拒绝iframe嵌套，ajax方式轻松实现单页面

以前单位做的项目都是上面一排菜单按钮，每点击一次按钮下面工作区的iframe就到后台重新加载一次页面；这样做有很大弊端，其一是iframe经常会对弹出层造成遮挡（ie6下），其二是每个页面都有一个jsp页面（其实就是些js、css之类的引用）和js文件，维护起来很是不便；其三，iframe里的遮罩没法挡住整个屏幕区域。既然如此，我们就不能直接去下js文件把组件添加到页面上吗？答案是可以的，而且很简单。

第一步：创建一个返回Panel的匿名方法，例如

Js代码

1. (function() {   
2. ...//你可以在这里写关于这个面板的代码   
3. return new Ext.Panel({   
4.             ...//此处省略   
5.             });   
6. })()  

(function() {
...//你可以在这里写关于这个面板的代码
return new Ext.Panel({
			...//此处省略
			});
})()

第二步：设定好一个工作区（Panel对象），我的做法是让这个Panel成为上级Panel的唯一子结点以方便引用，例如：

Js代码

1. ...//省略其他配置   
2. items: [{   
3.               id: 'workpanel',   
4.               layout: 'fit',   
5.               items: {   
6.                    [color=red] html: 'Hi,have fun!'[/color]   
7.               }   
8.        }],   
9. ...//省略其他配置  

...//省略其他配置
items: [{
              id: 'workpanel',
              layout: 'fit',
              items: {
                   [color=red] html: 'Hi,have fun!'[/color]
              }
       }],
...//省略其他配置

红字部分所代表的Panel就是我们的工作区，它会随菜单的单击而转变为不同的对象
第三步：为每一个按钮添加点击事件，例如

Js代码

1. var p=Ext.getCmp('workpanel');   
2. Ext.Ajax.request({   
3.                         url: url,   
4.                         success: function(response, opts){   
5.                             var obj = eval(response.responseText);   
6.                             p.add(obj);   
7.                             p.removeAll();   
8.                             p.doLayout();   
9.                         }   
10.                     });  

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，那样做对性能会有很大影响