ExtJS grid to fetch data without displaying the solution _extjs

Search for 1 hours, just do not know where the mistake ... Depressed
I clicked on the tree node on the left side of the mouse and created a tab on the right, which was already implemented, so I nested a grid in the New tab page.
Strange problems have arisen.
FF and IE do not have the error. But grid just doesn't show. Originally I thought My code was wrong. So I am crazy to find my code problems, accidentally turn off FF Firbug plug-in interface, grid on the reality out ... It turns out that the grid will not show up if any changes occur to my window.
Excuse me, is this a code question or a bug? How to solve?
To add, I directly in the TabPanel with items to manage the grid object is not a problem. But I have a problem with adding an event and managing it in it.
The files are encapsulated inside the class package. So just stick to the key part.
This is a listening event.
Java code
listeners:{
' Click ': Function (node, event) {
Event.stopevent ();
Remove the selection of the root node
if (node.text== "Sampeng" | | | node.text = "Article Management" | | node.text = = "Product Management" | | node.text = "Information Management" | | node.text = "Visiting Management") {
}else{
var n = main.getcomponent (node.id);
if (!n) {//Determine if the panel has been opened
If you are pressing the list of articles, create a new list object and drop it in the next 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) {
Event.stopevent ();
Remove the selection of the root node
if (node.text== "Sampeng" | | | node.text = "Article Management" | | node.text = = "Product Management" | | node.text = "Information Management" | | node.text = "Visiting Management") {
}else{
var n = main.getcomponent (node.id);
if (!n) {//Determine if the panel has been opened
If you are pressing the list of articles, create a new list object and drop it in the next 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);
}
}
And then my tab panel to create the class
Java code
* Copyright (c) 2008-2010, Sampeng Inc.
*/
Package ("Sampeng.panel");
/**
* Role: Used to create the middle of the main display panel
* 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,//more than the width of the scroll bar on both sides automatically
items:[{
Title: "Home"
}
]
}
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");
/**
* Role: Used to create the middle of the main display panel
* 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,//more than the width of the scroll bar on both sides automatically
items:[{
Title: "Home"
}
]
}
Ext.applyif (Config,deconfig);
SamPeng.panel.main.superclass.constructor.call (This,config);
}
Ext.extend (Sampeng.panel.main,ext.tabpanel);
The grid only pastes the data source and the attribute.
Java code
/*******************************************************
* Create a data source for a table
* Link background, and on each page of the list of data returned
* Pass 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
。。。
/*******************************************************
* Construct edit Column Surface 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: ' Read 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}});
}

/*******************************************************
* Create a data source for a table
* Link background, and on each page of the list of data returned
* Pass 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
。。。
/*******************************************************
* Construct edit Column Surface 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: ' Read 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}});
}
Thank you, heroes!
The problem is my browser does not move, the grid anyway does not show that the browser changed, the grid came out. and is displayed according to the parameter size I set. I don't understand where the problem goes. There are only so many points. Hope Advice

Originally thought is the code has the problem, see Firebug no error, and observation Firebug indeed from the server to obtain data. For a long time did not want to problem, but do nothing, the window to minimize and then maximize the time, the data came out!!!
This could be a bug in ExtJS, looking for a similar solution from the Internet and finding this:
, and then qiuye402 with the master of Communication finally finished.

In fact, is the problem of the layout refresh, just the outermost container to render a little bit on it. The outermost container is generally similar to the viewport Dongdong, just started not to know, has been render contains grid panel, no effect, re-render viewport everything OK!