extjs 表格数据重新加载_extjs grid取到数据而不显示的解决

extjs grid取到数据而不显示的解决

更新时间：2008年12月29日 16:40:37   作者：

在使用extjs gridpanel时，当将数据载入时，grid中的数据并没有显示出来。

找了快1个小时，就是不知道错误在哪里。。。郁闷

我在鼠标左侧点击tree节点，在右侧创建一个标签页，这个已经能够实现，于是我再在新建的标签页里嵌套一个Grid。

奇怪的问题出现了。。

FF和IE下都没报错。但是Grid就是不显示。本来我以为我代码错误。于是我狂找我的代码问题，无意中关掉FF的firbug插件界面，grid就现实出来了。。。原来只要我的窗口发生任何变化Grid才会显示出来。

请问这是我代码问题还是bug？如何解决？

补充一下，我直接在TabPanel里面用items管理grid对象并没问题。但是我用添加事件后在其中管理就出问题了。

文件都是封装在类包里面的。所以只贴关键部分

这是监听事件。

Java代码

listeners:{

'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 == "文章列表"){

var grid=new SamPeng.account.list();

n = main.add({

'id':node.id,

'title':node.text,

items: [{layout:"fit",items:grid}]

});}

}

main.setActiveTab(n);

}

}

listeners:{

'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 == "文章列表"){

var grid=new SamPeng.account.list();

n = main.add({

'id':node.id,

'title':node.text,

items: [{layout:"fit",items:grid}]

});}

}

main.setActiveTab(n);

}

}

然后是我的tab面板创建类

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',

width:1000,

height:561,

activeTab:0,

plain: true,

border: true,

tabPosition: 'top',

frame: true,

autoScroll: true,

enableTabScroll:true,//超过宽度就自动两边多出滚动条

items:[{

title:"首页"

}

]

}

Ext.applyIf(config,deconfig);

SamPeng.panel.main.superclass.constructor.call(this,config);

}

Ext.extend(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',

width:1000,

height:561,

activeTab:0,

plain: true,

border: true,

tabPosition: 'top',

frame: true,

autoScroll: true,

enableTabScroll:true,//超过宽度就自动两边多出滚动条

items:[{

title:"首页"

}

]

}

Ext.applyIf(config,deconfig);

SamPeng.panel.main.superclass.constructor.call(this,config);

}

Ext.extend(SamPeng.panel.main,Ext.TabPanel);

Grid的就只贴数据源和属性的了。

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'},

{name: 'time'},

])

});

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}});

}

/*******************************************************

* 为表格建立数据源

*     链接后台，并且按每一页的数据列表返回

*    用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'},

{name: 'time'},

])

});

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}});

}

谢谢各位大侠了！

问题状况是我浏览器不动，Grid死活不显示，浏览器一变，Grid就出来了。而且是按照我设定的参数大小显示的。不明白倒底问题出在哪里。只有这么多分了。望指教

本来以为是代码有问题，看Firebug没有报错，并且观察Firebug确实从服务端取得了数据。搞了很久没有想出问题，但是什么也不干，把窗口最小化再最大化的时候，数据又出来了！！！

这可能是Extjs的一个Bug，从网上找类似的解决方法，找到了这个：

，后来又和qiuye402大侠进行了沟通终于搞定。

其实就是布局刷新的问题，只需将最外层的容器重新render一下就可以了。最外层的容器一般就是类似于viewport的东东了，刚开始不知道，一直重新render包含grid的panel，没有效果，重新render viewport一切OK了！

相关文章

extjs实现选择多表自定义查询功能 前台部分(ext源码) ，需要的朋友可以参考下。2011-12-12

这篇文章主要为大家详细介绍了ExtJS 4.2 Grid组件的单元格合并,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10

extjs每个组件要设置唯一的ID，否则会造成各种错误。EXTJS基本上是靠ID来识别组件的2014-06-06

今天做一个grid，里面的数据需要带明细，思来想去还是搞个表格嵌套吧,需要的朋友可以参考下2014-05-05

用RowEditor作批量编辑器时，遇到一个问题，想要在Roweditor中使用三个下拉列表组成级联式选择控件2011-07-07

Ext对基本类型的扩展 ext,extjs,format，学习extjs的朋友可以参考下。2010-12-12

面版表示页面上的一块相对独立的区域，利用传统的html+css要构建灵活统一的区域并非易事。2010-01-01

本文为大家详细介绍下Extjs Gird 支持中文拼音排序以及修复汉字排序异常的Bug、localeCompare比较汉字字符串，Firefox与IE均支持，感兴趣的朋友可以参考下2013-04-04

如何获取grid修改后的数据问题，下面是API的描述。可以获取各种值，感兴趣的朋友可以参考下2013-08-08

Exitjs DataView中图片文件名获取实现代码。2009-11-11

最新评论