extjs panel remove 后不能add

转载自：http://blog.csdn.net/hxyfendou/article/details/8772337

1.如果panel的布局采用了border的布局（也就是东西南北中），那么默认是不能使用add方法添加panel的，但可以变通一下， 如下所示,在追加一个panel，也就是在south里再添加一个panel，而这个panel的布局不是border,则就可以使用add方法了。

{

    region:'south',

    height:400,

    items:{

     id :"addpanelId",

     height:400,

     items:[{xtype:'button',text:'添加组件',handler:addPanel},

        {xtype:'button',text:'移除组件',handler:removePanel}]

    }

   }  

2. 上述代码中，尽量不要将函数直接写成handler:function(){}模式，这样会导致，有些变量访问不了，最好在公共变量处定义一个函数 function addPanel(){}

3.add()方法执行之后，需要dolayout一下，注意不要使用doLayout(true,true),直接使用doLayout()就行，否则会使得添加进入的panel上的控件不可见。

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

-------------------------------------------------------------------------------

下面是全部可运行的代码

-------------------------------------------------------------------------------

function createPanel (){ //创建一个panel
 var mymappanel2012A = new Ext.Panel({

                   frame:true,

                   height:200,

                   id:'mappanel2012A',

                   items:{xtype:'field',id:'maxlieId1212'}

                  });

     return mymappanel2012A;

}

function removePanel(){//移除一个组件面板

                  

                 try{

                     var xxmap = Ext.getCmp('addpanelId');

                     var myt = Ext.getCmp('mappanel2012A');

                     if(myt){

                       Ext.getCmp('addpanelId').remove(myt);

                      }

             Ext.getCmp('addpanelId').doLayout();

                 }catch(e){

                  alert(e.name + " " + e.message);

                 }

}

function addPanel(){ //添加一个组件面板

 try{

  Ext.getCmp('addpanelId').add(createPanel ());

     Ext.getCmp('addpanelId').doLayout();

     

 }catch(e){

          alert(e.name + " -- " + e.message);

 }

    //Ext.getCmp('addpanelId').doLayout(true,true);//这个方法会导致面板下的组件无法显示
}

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

6. 也可用以下方式逐个删除子元素

var item, items = modi_panel.getForm().items; 

while ((item = items.last())) { // 删除组件 

modi_panel.getForm().remove(item); 

} 

items = adultCheckForm.items; 

while ((item = items.last())) { // 删除组件 

modi_panel.remove(item); 

} 

modi_panel.doLayout();

 

ContainerPanel.items.each(function(item){
ContainerPanel.remove(item);

7

<div>5、面板内容动态控制</div><div><p style="line-height: 19px; margin: 10px auto;">面板中的内容也可以是指定的html片段，此时可以通过配置选项中html属性来指定。比如下面的代码：</p><div class="cnblogs_code" style="border: 1px solid rgb(204, 204, 204); padding: 5px; margin: 5px 0px; font-family: 'Courier New'; font-size: 12px; overflow: auto; background-color: rgb(245, 245, 245);"><div class="cnblogs_code_toolbar" style="margin-top: 5px;"><span class="cnblogs_code_copy" style="line-height: 1.5; padding-right: 5px;"><a target=_blank title="复制代码" href="http://blog.csdn.net/hxyfendou/article/details/8772337" style="color: rgb(26, 139, 200); text-decoration: none; border: medium none;"><img alt="复制代码" src="http://common.cnblogs.com/images/copycode.gif" style="border: medium none; max-width: 100%;" /></a></span></div><pre style="white-space: pre-wrap; word-wrap: break-word; margin-top: 0px; font-family: 'Courier New'; margin-bottom: 0px;"><div style="background-color: rgb(245, 245, 245);"><span style="color: rgb(0, 0, 0); line-height: 1.5;">        Ext.onReady(</span><span style="line-height: 1.5;">function</span><span style="color: rgb(0, 0, 0); line-height: 1.5;">(){
</span><span style="line-height: 1.5;">new</span><span style="color: rgb(0, 0, 0); line-height: 1.5;"> Ext.Panel({
title: </span><span style="color: rgb(0, 0, 0); line-height: 1.5;">"</span><span style="color: rgb(0, 0, 0); line-height: 1.5;">面板用法</span><span style="color: rgb(0, 0, 0); line-height: 1.5;">"</span><span style="color: rgb(0, 0, 0); line-height: 1.5;">,
width: </span><span style="color: rgb(0, 0, 0); line-height: 1.5;">300</span><span style="color: rgb(0, 0, 0); line-height: 1.5;">,
height: </span><span style="color: rgb(0, 0, 0); line-height: 1.5;">200</span><span style="color: rgb(0, 0, 0); line-height: 1.5;">,
renderTo: Ext.getBody(),
html: </span><span style="color: rgb(0, 0, 0); line-height: 1.5;">"</span><span style="color: rgb(0, 0, 0); line-height: 1.5;"><h1><font color='red'>面板主区域</font></h1></span><span style="color: rgb(0, 0, 0); line-height: 1.5;">"</span><span style="color: rgb(0, 0, 0); line-height: 1.5;">,
});
});
</span><span style="color: rgb(0, 0, 0); line-height: 1.5;"><</span><span style="color: rgb(0, 0, 0); line-height: 1.5;">/</span><span style="color: rgb(0, 0, 0); line-height: 1.5;">script></span></div>

显示效果如下：



当然，如果面板中的html比较复杂，比如是说是一个动态页面的内容。此时可以通过在配置选项中设置autoLoad配置选项来指定自动加载指定url中的内容作为面板中显示的内容。比如下面的代码：

<script type="text/javascript">
Ext.onReady(function(){
new Ext.Panel({
title: "面板用法",
width: 300,
height: 200,
autoLoad:{
url:"index.html"
}
});
});
</script>



也可以在对象初始化以后，动态更新面板中的html内容，可以通过调用面板的load方法实现，load方法中的参数与autoLoad配置选项中所代表的一样，代码如下：

<script type="text/javascript">
Ext.onReady(function(){
var panel=new Ext.Panel({
renderTo: Ext.getBody()
});
panel.load({
url:"index.jsp",
params:{name:"ljq",pwd:"123"},
scope: this,
discardUrl: false,
nocache: false,
text: "正在加载，请稍候...",
timeout: 30,
scripts: true
});
});
</script>



                           
这时候直接通过面板的body元素来实现面板的内容的更新。比如下面的代码：

panel.body.update("<h1><font color='blue'>这是Ext的面板</font></h1>", true, function(){});