Solution to extjs grid getting data without displaying it

After searching for almost an hour, I just don't know where the error is. . . Depressed
I clicked on the tree node on the left side of the mouse and created a tab on the right. This was already possible, so I nested a Grid in the newly created tab.
A strange problem occurred. .
No error is reported in FF and IE. But the Grid just doesn't display. Originally I thought my code was wrong. So I frantically searched for problems with my code and accidentally turned off FF's firbug plug-in interface, and the grid came into reality. . . It turns out that the Grid will only be displayed as long as there are any changes to my window.
Is this a problem with my code or a bug? How to solve it?
To add, I have no problem using items to manage grid objects directly in TabPanel. But something went wrong after I added the event and managed it.
Files are all encapsulated in class packages. So only the key part is posted
This is the listening event.
Java code
listeners:{
'click':function(node, event) {
event.stopEvent();
//Remove the selection judgment of the root node
if (node.text=="SamPeng" || node.text == "Article Management" || node.text == "Product Management" || node.text == "Information Management" || node.text == " Visitor management"){
}else{
var n = main.getComponent(node.id);
if (!n) { //Determine whether the panel has been opened
//If so Click the article list, create a new list object and throw it into the new tab
if(node.text == "Article List"){
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) {
.stopEvent();
                                                                                                                                                                                                                                                                                            Management" || node.text == "Information Management" || node.text == "Visit Management"){
                                                                                                                                  if (! n) {// Determine whether the panel has been opened
// If it is a list of articles, create a new list object and throw into the new tab
if (node.text == "article list list "){
                                 var grid=new SamPeng.account.list(); 'id':node.id,
'title':node.text,

Then my tab panel creation class
Java code
* Copyright(c) 2008-2010, SamPeng Inc.
*/
package("SamPeng.panel");
/**
* Function: Used to create the main display panel in the middle
* Author: SamPeng
* Time: September 24, 2008 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, //If the width exceeds the width, additional scroll bars will automatically appear on both sides
items:[{
title:"Homepage"
}
]
}
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");
/**
* Function: Used to create the main display panel in the middle
* Author: SamPeng
* Time: September 24, 2008 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,//If the width is exceeded, additional scroll bars will automatically appear on both sides
items:[{
title: "Home" 🎜>                                                                                                                          🎜> Ext.applyIf(config,deconfig);
SamPeng.panel.main.superclass.constructor.call(this,config);
}
Ext.extend(SamPeng.panel.main,Ext. TabPanel);
Grid only pastes data sources and attributes.
Java code
/***************************************************** ***
* Create a data source for the table
* Link to the background and return the data list of each page
* Pass it in Json data format
********** **********************************************/
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}});
. . .
. . . Omit a lot of
. . .
/***************************************************** ***
* Construct the edit list panel (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: 'Reading data. ..'},
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}});
},
// call Delete data
//The server returns deleted data by accepting parameters
deleteData: function (jsonData) {
this.dataStore.load({params:{start:0, limit:this.myPageSize, delData: jsonData}});
}

/***************************************************** ***
* Establish a data source for the table
**********************************************/
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: 'name'},
{ name: 'typename'},
              {name: 'time'},
                                                                                                                                                    . myPageSize}});
. . .
. . . Omit a lot of
. . .
        /***************************************************** ***
     * Construct the edit list panel (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了！

Solution to extjs grid getting data without displaying it_extjs