웹 프론트엔드 JS 튜토리얼 it_extjs를 표시하지 않고 데이터를 가져오는 extjs 그리드에 대한 솔루션

it_extjs를 표시하지 않고 데이터를 가져오는 extjs 그리드에 대한 솔루션

May 16, 2016 pm 06:57 PM
extjs grid 표시하지 않음

거의 한 시간 동안 검색했는데 어디에서 오류가 발생했는지 알 수 없습니다. . . 우울
마우스 왼쪽의 트리 노드를 클릭하고 오른쪽에 탭을 생성했습니다. 이미 가능했기 때문에 새로 생성된 탭에 그리드를 중첩시켰습니다.
이상한 문제가 발생했습니다. .
FF와 IE에서는 오류가 보고되지 않습니다. 그러나 그리드는 표시되지 않습니다. 처음에는 내 코드가 잘못된 줄 알았습니다. 그래서 나는 내 코드에 문제가 있는지 미친듯이 검색하다가 실수로 FF의 firbug 플러그인 인터페이스를 꺼버렸고 그리드가 현실이 되었습니다. . . 내 창에 변경 사항이 있는 동안에만 그리드가 표시된다는 것이 밝혀졌습니다.
이것은 내 코드에 문제가 있는 건가요, 아니면 버그인가요? 어떻게 해결하나요?
추가로 TabPanel에서 그리드 개체를 직접 관리하는 항목을 사용하는 데 아무런 문제가 없습니다. 그런데 이벤트를 추가하고 관리한 후 문제가 발생했습니다.
파일은 모두 클래스 패키지에 캡슐화되어 있습니다. 그래서 중요한 부분만 올립니다
듣기 이벤트 입니다.
Java 코드
리스너:{
'click':function(node, event) {
event.stopEvent()
//루트 노드의 선택 판단 제거
if (node.text=="SamPeng" || node.text == "기사 관리" || node.text == "제품 관리" || node.text == "정보 관리" || node.text == " 방문자 관리"){
}else{
var n = main.getComponent(node.id);
if (!n) { //패널이 열렸는지 확인
// 그렇다면 기사 목록을 클릭하고 새 목록 개체를 만들어 새 탭에 넣습니다.
if(node.text == "Article List"){
vargrid=new SamPeng.account.list();
n = main.add({
'id':node.id,
'title':node.text,
items: [{layout:"fit",items:grid}]
});}
}
main.setActiveTab(n)
}
}
리스너:{
'click':function(node, event) {
.stopEvent();
                                                                                  ~                                                        관리" || node.text == "정보 관리" || node.text == "방문 관리"){                                                                                                 만약 (! n) {// 패널이 열렸습니다
// 기사 목록인 경우 새 목록 개체를 만들고 새 탭에 넣습니다.
if (node.text == "article list list "){
                              vargrid =new SamPeng.account.list(); 'id':node.id,
'title':node.text,
                                                                 ~          
그럼 내 탭 패널 생성 클래스
Java 코드
* Copyright(c) 2008-2010, SamPeng Inc.
*/
package("SamPeng.panel")
/ **
* 기능 : 중앙에 메인 디스플레이 패널을 생성하는데 사용
* 작성자 : SamPeng
* 시간 : 2008년 9월 24일 1:24:42
*/
SamPeng.panel.main = function(config){
var config=config || {};
var deconfig={
renderTo:'mainlay' 🎜>너비:1000,
높이:561,
activeTab:0,
plain: true,
border: true,
tabPosition: 'top',
frame: true,
autoScroll: true,
enableTabScroll:true, //너비가 너비를 초과하면 추가 스크롤 막대가 자동으로 양쪽에 나타납니다.
items:[{
title:"Homepage"
}
]
}
Ext.applyIf(config,deconfig);
SamPeng.panel.main.superclass.constructor.call(this,config); 확장(SamPeng.panel .main,Ext.TabPanel);
* Copyright(c) 2008-2010, SamPeng Inc.
*/
package("SamPeng.panel")
/* *
* 기능 : 중앙에 메인 디스플레이 패널을 생성하는데 사용
* 작성자 : SamPeng
* 시간 : 2008년 9월 24일 1:24:42
* /
SamPeng.panel.main = function(config){

var config=config || {}
var deconfig={
renderTo:'mainlay' ,
너비:1000,
높이:561,
activeTab:0,
일반: true,
테두리: true,
tabPosition: 'top',
프레임: true,
autoScroll: true,
활성화TabScroll:true,//너비가 초과되면 추가 스크롤 막대가 자동으로 양쪽에 나타납니다.
items:[{
title: "Home" 🎜>​ 🎜> Ext.applyIf(config,deconfig);
SamPeng.panel.main.superclass.constructor.call(this,config)
}
Ext.extend(SamPeng.panel.main,Ext . TabPanel);
그리드는 데이터 소스와 속성만 붙여넣습니다.
Java 코드
/**************************************************** * ***
* 테이블에 대한 데이터 소스 생성
* 백그라운드로 연결하여 각 페이지의 데이터 목록을 반환
* Json 데이터 형식으로 전달
****** ****** ******************************************** **/
this.dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: ' php/article_list.php',
disableCaching:false
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id:'id'
},[
{name: 'id'},
{name: 'name'},
{name: 'typename'},
{이름: '시간'},
])
});
this.dataStore.load({params:{start:0,limit:this.myPageSize}}); . .
. . .
을 많이 생략하세요. . .
/**************************************************** * ***
* 편집 목록 패널 구성(GridPanel)
********************************** *** **********************/
SamPeng.account.list.superclass.constructor.call(this, {
id: 'list-account-panel',
ds: this.dataStore ,
cm: art_cm,
sm: selectBoxModel,
height:500,
tbar: pagingbar,
bbar: menubar,
loadMask: {msg: '데이터를 읽는 중 .. '},
enableColumnHide: false,
autoScroll:true
//region:'center'
})
Ext.extend(SamPeng.account.list, Ext.grid .GridPanel , {
reload : function() {
this.dataStore.load({params:{start:0,limit:this.myPageSize}})
},
// 데이터 삭제 호출
//서버는 매개변수를 수락하여 삭제된 데이터를 반환합니다
deleteData: function (jsonData) {
this.dataStore.load({params:{start:0,limit:this.myPageSize, delData: jsonData} });
}

/**************************************************** * ***
* 테이블에 대한 데이터 소스 설정
******************************** **************/
this.dataStore = new Ext.data.Store({
프록시: new Ext.data.HttpProxy( {
url: 'php/article_list.php',
비활성화Caching:false
}),

reader: new Ext.data.JsonReader({
루트: 'results' ,
totalProperty: 'total',
id:'id'
},[
{name: 'name'},
{ name: 'typename'},
              {이름: '시간'},
                                                                                                                                 . myPageSize}}); . .
. . .
을 많이 생략하세요. . . id : 'list-account-panel',
ds : this.datastore > 🎜>               bbar: 메뉴바,
               loadMask: {msg: '读取数据中 . ..'},
               enableColumnHide: false,
               autoScroll:true
              /region:'center'
        });
Ext.extend(SamPeng.account.list, Ext.grid.GridPanel, {
reload : function() {
        this.dataStore.load({params:{start:0,limit:this. myPageSize}});    
    },
// 调用删除数据
// 服务器过接受参数返回删除的数据
deleteData : function (jsonData) {
    this.dataStore.load( {params:{start:0,limit:this.myPageSize, delData:jsonData}})
}    
谢谢各位大侠了!
问题状况是我浏览器不动,Grid死活不显示,浏览器一变,Grid就出来了。而且是按光我设数大小显示的。不明白倒底问题哪里。只有这么多分了。望指教

本来以为是代码유问题,看Firebug没有报错,并且观察Firebug确实从服务端取得了数数据。搞了很久没有想流问题,但是什么也不干,把窗口最小化再最大化的时候,数据又流来了!!!
其实就是布局刷새로운问题,只需将最外层的容器重新 render 一下就可以了。最外层的容器一般就是类似于viewport的东东了,刚开始知道,一直不新render包含그리드 패널 ,没有效果,새로 렌더링 뷰포트 알았어!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

CSS Flex 및 그리드 레이아웃(코드 포함)을 사용하여 3D 주사위를 구현하는 방법을 단계별로 안내합니다. CSS Flex 및 그리드 레이아웃(코드 포함)을 사용하여 3D 주사위를 구현하는 방법을 단계별로 안내합니다. Sep 23, 2022 am 09:58 AM

프론트엔드 인터뷰에서 CSS를 사용하여 주사위/마작 레이아웃을 구현하는 방법에 대한 질문을 자주 받습니다. 다음 기사에서는 CSS를 사용하여 3D 주사위를 만드는 방법을 소개합니다(Flex 및 Grid 레이아웃은 3D 주사위를 구현함).

Win7 그림 축소판이 표시되지 않는 문제에 대한 해결 방법 Win7 그림 축소판이 표시되지 않는 문제에 대한 해결 방법 Jan 07, 2024 pm 12:45 PM

사진을 볼 때 폴더에 있는 각 사진의 축소판만 대략적으로 확인하면 필요한 사진을 빠르게 탐색하거나 찾을 수 있습니다. 그러나 설정이나 메모리 부족으로 인해 이미지 썸네일이 표시되지 않는 경우가 있습니다. 구체적인 해결 방법은 다음과 같습니다. win7 사진 축소판이 표시되지 않는 문제 해결 방법 1: 1. 먼저 폴더 왼쪽 상단에서 "구성"을 선택한 다음 "폴더 및 검색 옵션"을 클릭합니다. 2. "아이콘은 항상 표시하고 미리 보기는 표시하지 않음"을 선택 취소하고 확인을 클릭합니다. 방법 2: 1. 먼저 C 드라이브에 최소 1GB 이상의 충분한 공간이 있는지 확인하십시오. 2. 그렇지 않은 경우 C 드라이브를 마우스 오른쪽 버튼으로 클릭하고 속성을 선택한 다음 "일반"에서 "디스크 정리"를 클릭하세요. 삼.

USB 디스크가 내 컴퓨터에 표시되지 않습니다. USB 디스크가 내 컴퓨터에 표시되지 않습니다. Feb 11, 2024 pm 01:51 PM

USB 플래시 드라이브를 사용할 때 정상적으로 팝업되지 않고 직접 연결을 해제하면 드라이브 문자가 표시되지 않는 학생들이 많습니다. 다음은 친구들에게 해결 방법을 알려줍니다. 1단계: 하단에서 승리 아이콘을 선택합니다. 바탕 화면 왼쪽 모서리에서 하단의 두 가지 설정 옵션을 선택합니다. 2단계: 장치 옵션을 선택합니다. 3단계: 다른 장치를 찾아 USB 플래시 드라이브 아이콘을 찾으세요. 인식하지 못하더라도 당황하지 마세요. 이 인터페이스에 머무르면 USB 플래시 드라이브를 연결하여 찾을 수 있습니다. 4단계: 독립형 USB 플래시 드라이브 아이콘에서 장치를 제거하고 USB 플래시 드라이브를 다시 연결하면 드라이브 문자가 표시됩니다. 도움이 되었다면 좋아요를 눌러주시고 더 많은 컴퓨터 문제를 해결할 수 있도록 격려해 주세요. Shuimiao·dedeCMS 스테이션 그룹 기사 업데이트 프로그램 체험판으로 업데이트된 기사이므로 이 표시가 있습니다 (2023-02-0617:27:18)

Win11에서 휴지통이 표시되지 않는 문제를 해결하는 방법 Win11에서 휴지통이 표시되지 않는 문제를 해결하는 방법 Dec 26, 2023 pm 09:47 PM

컴퓨터에 있는 모든 쓸모없는 파일과 쓰레기는 휴지통에 저장됩니다. 많은 사용자가 win11 시스템을 업데이트한 후 휴지통이 사라져 필요한 파일을 복원할 수 없게 되는 것을 발견합니다. 오늘 와서 Win11에서 휴지통이 표시되지 않는 문제를 해결하는 방법을 알아보세요. Windows 11에서 휴지통이 표시되지 않으면 어떻게 해야 합니까? 1. 먼저 바탕 화면의 빈 영역에서 마우스 오른쪽 버튼을 클릭하고 팝업 메뉴에서 "개인 설정" 옵션을 선택합니다. 2. 선택 후 설정 인터페이스가 나타납니다. 설정 인터페이스 왼쪽에서 테마 옵션을 찾아 클릭하세요. 3. 클릭한 후 오른쪽에서 아래로 스크롤하여 "바탕 화면 아이콘 설정" 옵션을 찾아 클릭합니다. 4. 클릭하면 휴지통 선택 인터페이스가 표시됩니다. 5. 휴지통을 확인하고 확인을 클릭하여 다시 시작하세요.

일반적으로 사용되는 5가지 CSS 레이아웃 프레임워크에 대해 알아보세요. 일반적으로 사용되는 5가지 CSS 레이아웃 프레임워크에 대해 알아보세요. Jan 16, 2024 am 09:20 AM

CSS 레이아웃 프레임워크: 일반적으로 사용되는 5가지 레이아웃 프레임워크 살펴보기 소개: 웹 디자인에서 레이아웃은 중요한 부분입니다. CSS 레이아웃 프레임워크는 다양한 레이아웃 스타일로 웹 페이지를 빠르게 구축하는 데 도움이 될 수 있습니다. 이 기사에서는 일반적으로 사용되는 5가지 CSS 레이아웃 프레임워크를 소개하고 독자가 이러한 프레임워크를 더 잘 이해하고 사용할 수 있도록 구체적인 코드 예제를 제공합니다. 1. 부트스트랩: 부트스트랩은 현재 가장 인기 있는 CSS 레이아웃 프레임워크 중 하나입니다. 풍부한 구성 요소와 강력한 반응 기능을 갖추고 있습니다.

PHP와 ExtJS를 사용하여 강력한 웹 애플리케이션 기능을 구현하는 방법 PHP와 ExtJS를 사용하여 강력한 웹 애플리케이션 기능을 구현하는 방법 Jun 25, 2023 am 11:40 AM

웹 애플리케이션의 지속적인 개발과 인기로 인해 점점 더 많은 기업과 개인이 PHP와 ExtJS를 사용하여 강력한 웹 애플리케이션을 구축하기 시작하고 있습니다. 널리 사용되는 서버 측 스크립팅 언어인 PHP는 크로스 플랫폼이며 배우기 쉬운 반면, ExtJS는 개발자가 대화형 웹 애플리케이션 인터페이스를 신속하게 구축하는 데 도움이 되는 인기 있는 프런트 엔드 프레임워크입니다. 이 기사에서는 PHP와 ExtJS를 사용하여 강력한 웹 애플리케이션 기능을 구현하는 방법을 소개합니다. 사용할 PHP 및 MySQL 데이터베이스 연결 설정

CSS 상대 레이아웃 속성에 대한 자세한 설명: 위치 및 상대 CSS 상대 레이아웃 속성에 대한 자세한 설명: 위치 및 상대 Oct 26, 2023 am 10:01 AM

CSS 상대 레이아웃 속성에 대한 자세한 설명: 위치 및 상대 프런트 엔드 개발에서 레이아웃은 개발자가 페이지에서 요소의 위치를 ​​더 잘 제어하기 위해 직면해야 하는 문제인 경우가 많습니다. CSS는 다양한 레이아웃 방법을 제공합니다. 그중 상대 레이아웃은 매우 일반적인 레이아웃 방법으로, 위치 및 상대 속성을 사용하여 요소의 위치와 크기를 유연하게 조정할 수 있습니다. 위치 속성은 요소의 위치 지정 방법을 정의하는 데 사용됩니다.

페이지 레이아웃 및 반응형 디자인을 위한 UniApp 구현 기술 페이지 레이아웃 및 반응형 디자인을 위한 UniApp 구현 기술 Jul 05, 2023 pm 01:57 PM

페이지 레이아웃 및 반응형 디자인 구현을 위한 UniApp의 구현 기술 소개: UniApp은 Vue.js 프레임워크를 기반으로 하는 크로스 플랫폼 개발 도구로, iOS, Android 및 H5와 같은 여러 플랫폼용 애플리케이션을 동시에 개발할 수 있습니다. 이 기사에서는 UniApp을 사용하여 페이지 레이아웃과 반응형 디자인을 구현하는 방법을 소개하고 몇 가지 실용적인 코드 예제를 제공합니다. 1. 페이지 레이아웃 Flex 레이아웃 Flex 레이아웃은 페이지 레이아웃에서 일반적으로 사용되는 방법으로, 다양한 화면 크기와 장치에 자동으로 적응할 수 있습니다. 유니앱에서

See all articles