以前单位做的项目都是上面一排菜单按钮,每点击一次按钮下面工作区的iframe就到后台重新加载一次页面;这样做有很大弊端,其一是iframe经常会对弹出层造成遮挡(ie6下),其二是每个页面都有一个jsp页面(其实就是些js、css之类的引用)和js文件,维护起来很是不便;其三,iframe里的遮罩没法挡住整个屏幕区域。既然如此,我们就不能直接去下js文件把组件添加到页面上吗?答案是可以的,而且很简单。
第一步:创建一个返回Panel的匿名方法,例如
第二步:设定好一个工作区(Panel对象),我的做法是让这个Panel成为上级Panel的唯一子结点以方便引用,例如:
红字部分所代表的Panel就是我们的工作区,它会随菜单的单击而转变为不同的对象
第三步:为每一个按钮添加点击事件,例如
其实核心就是用ajax的方式获取js文本,之后通过eval方法转换为Panel对象,再将原来的Panel替换掉,别忘了workpanel的autoDestroy可别设置成false,那样做对性能会有很大影响
第一步:创建一个返回Panel的匿名方法,例如
(function() {
...//你可以在这里写关于这个面板的代码
return new Ext.Panel({
...//此处省略
});
})()
第二步:设定好一个工作区(Panel对象),我的做法是让这个Panel成为上级Panel的唯一子结点以方便引用,例如:
...//省略其他配置
items: [{
id: 'workpanel',
layout: 'fit',
items: {
[color=red] html: 'Hi,have fun!'[/color]
}
}],
...//省略其他配置
红字部分所代表的Panel就是我们的工作区,它会随菜单的单击而转变为不同的对象
第三步:为每一个按钮添加点击事件,例如
var p=Ext.getCmp('workpanel');
Ext.Ajax.request({
url: url,
success: function(response, opts){
var obj = eval(response.responseText);
p.add(obj);
p.removeAll();
p.doLayout();
}
});
其实核心就是用ajax的方式获取js文本,之后通过eval方法转换为Panel对象,再将原来的Panel替换掉,别忘了workpanel的autoDestroy可别设置成false,那样做对性能会有很大影响