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

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

WBOY
WBOY원래의
2016-05-16 18:57:031502검색

거의 한 시간 동안 검색했는데 어디에서 오류가 발생했는지 알 수 없습니다. . . 우울
마우스 왼쪽의 트리 노드를 클릭하고 오른쪽에 탭을 생성했습니다. 이미 가능했기 때문에 새로 생성된 탭에 그리드를 중첩시켰습니다.
이상한 문제가 발생했습니다. .
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으로 문의하세요.