梦幻之旅

DEBUG - 天道酬勤

   :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  671 随笔 :: 6 文章 :: 256 评论 :: 0 Trackbacks

 

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

posted on 2010-10-19 17:13 HUIKK 阅读(615) 评论(0)  编辑  收藏 所属分类: EXT

只有注册用户登录后才能发表评论。


网站导航: