完整的GridPanel也有了，我現在需要將它組裝到后臺管理中去。現在要求點擊一下左邊Tree中的“人員信息”節點，右邊的TabPanel就顯示出與之對應的GridPanel。最簡單的方法就是在TabPanel的html屬性（應該可以這么叫吧）中使用iframe來打開另一個用于顯示GridPanel的頁面，相關代碼如下：
var c1=new Ext.tree.TreeNode({
id:'c1',
text:'人員信息',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判斷是否已經打開該面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true, //通過html載入目標頁
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="UserListGridPanel.jsp"></iframe>'
});
}
tab.setActiveTab(n);
}
}
});
這種做法雖然很簡單，但是又帶來兩個問題：
1.頁面會刷新
2.UserListGridPanel.jsp頁面中也必須加載龐大的ExtJS庫
當然也有辦法解決了，可以使用autoLoad來解決。修改上面的代碼：
var c1=new Ext.tree.TreeNode({
id:'c1',
text:'人員信息',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判斷是否已經打開該面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true, //自動載入UserListGridPanel.jsp頁面，該頁面含有JavaScript，不緩存
autoLoad:{url:'UserListGridPanel.jsp',scripts:true,nocache:true}
});
}
tab.setActiveTab(n);
}
}
});
用了之后我又頭大了，正常的話應該是如圖下圖所示。
可現在得到的卻是下面這種結果。
想來想去，改來改去，最后我猜想應該是渲染的時候出問題了，上面兩種方式中UserListGridPanel的renderTo屬性一直都是Ext.getBody()，可是顯示結果卻不一樣，也就是說兩種情況下的Ext.getBody()不是同一個對象（OOP習慣了，什么都是對象O(∩_∩)O哈哈~）。第一種方式中Ext.getBody()指的就UserListGridPanel.jsp，而第二種方式中Ext.getBody()指的則是main.jsp。
于是試著在UserListGridPanel.jsp中創建一個id為“UserListGridPanel”的div，然后修改rederTo屬性為Ext.get(‘UserListGridPanel’)，看來猜的沒錯，這樣改確實可以。可是頁面又變成下面這樣了：
我快抓狂了…
再次把JS翻來覆去的改了N遍，得到的結果還是那樣…
可是單獨運行UserListGridPanel.jsp卻是正常的啊！突然想到了點什么，上面不是說用autoLoad時，被載入的頁面中可以不用再載入ExtJS庫嗎？而我現在的UserListGridPanel.jsp中還載入了ExtJS庫，會不會和main.jsp中的發生沖突了？
結果當然不言而喻了。