EXt 布局

EXt 布局

 

完整的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中的发生冲突了？
结果当然不言而喻了。