extjs panel add 和remove panel的注意事项

待被添加的panel最好通过一个函数生成，否则，remove之后，就不能再进行add操作了。

删除panel可以直接使用 Ext.getCmp('left_panel').removeAll();

也可以是：

//清空panel，即删除panel中的items。
var itemLength=bbarRightPanel.items.length;
for(var i=0;i<itemLength;i++){
var x=bbarRightPanel.items.get(0);//删除panel中的第一个控件，后面的就顶上来了。);//所以每次删除时，只需删除组件数组中的首个组件即可
var array=Ext.query("*[for='"+x.id+"']");//获取组件数组中的子组件数组
Ext.removeNode(array[0]);//删除子节点，即label节点
bbarRightPanel.remove(x,true);//删除节点
}
//这时全删除了

1.penel中item被remove后不能被再次引用：

 

   我遇到的一种问题是，我有2个panel，panel1为主面板，panel2为panel1的子面板，即panel2在panel1的items集合 中，在我的应用中，我需要动态切换panel1的items中的内容，我采用的是panel面板的方法panel1.remove(panel2)，但是 这样操作之后再次调用add(panel2)的话会报extjs的错误，一旦panel2被remove后，它会调用panel2的destory方法进 行销毁，导致下次没办法再调用之前的panel2，而新创建的panel2又不符合要求（没有了之前的状态数据），解决办法如下，code：

Js代码  

1. panel1.remove(panel2, false);  
2. panel2.hide();  

 采用这两句之后，panel2会被从panel1中移除，但又不会被销毁，那么下次还可以通过panel1.add(panel2)把panel2再加进来进行重复使用。

 

2.borderlayout布局中中不能动态替换组件：

 

  呵呵，如果你的主面板的布局是borderlayout，那你不要指望能动态替换主面板的儿子级组件，因为ExtJs的官方文档里明确说了不支持对 borderlayout类型的面板的组件进行动态替换，而且我也尝试了很多次都不成功，但是我们可以换个思路，去动态替换孙子级组件，我们看代码： 

Js代码  

1. zkyg.main.view = new Ext.Viewport({  
2.     layout: 'border',  
3.     border: false,  
4.     frame: false,  
5.     items: [{  
6.         region: 'north',  
7.         height: 41,  
8.         contentEl: 'header'  
9.     },   
10.                new Ext.Panel({  
11.                region:'center',  
12.                layout:'fit',  
13.                id: 'mainPanel',  
14.                items: [zkyg.main.centerPanel]  
15.         })]  
16. });  
17.    

Js代码  

1. //其他的一些业务逻辑-------------------------------------------  
2.   
3. if(Ext.getCmp('mainPanel').items != undefined){  
4.     Ext.getCmp('mainPanel').items.each(function(item){  
5.     Ext.getCmp('mainPanel').remove(item, false);  
6.     item.hide();  
7.     });  
8.  }     
9. zkyg.vm.viewPanel.show();  
10. Ext.getCmp('mainPanel').add(zkyg.vm.viewPanel);  
11. Ext.getCmp('mainPanel').doLayout();  

 

如果我们直接去替换mainPanel这个面板，明显是不成功的，但是我们可以将mainPanel固定，设置它本身的布局类型为fit类型，然后 去动态替换它的子面板，这样操作是没有问题的，也就是上面讲的borderlayout你不要去替换儿子级组件，而是去替换他的孙子级组件。

 

还有一点，如果存在多层嵌套的面板（上中下三层）要进行动态替换的时候，最好将面板类型设置为Ext.Container类型，因为如果设置成Ext.Panel类型的话，在IE8及以下版本的IE浏览器中存在兼容性问题，add/remove方法可能会不成功。

链接：http://blog.csdn.net/hxyfendou/article/details/8772337。。。

http://www.cnblogs.com/chillsrc/archive/2012/04/12/2443818.html