extjs panel add 和remove panel的注意事项

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

 
 

  
  5、面板内容动态控制
 
 
 
 

  
  
面板中的内容也可以是指定的html片段，此时可以通过配置选项中html属性来指定。比如下面的代码：
  
  

   
   

    
    
   
   
   
   
    
    

     
             Ext.onReady(
     
     function
     
     (){
           
     
     new
     
      Ext.Panel({
              title: 
     
     "
     
     面板用法
     
     "
     
     ,
              width: 
     
     300
     
     ,
              height: 
     
     200
     
     ,
              renderTo: Ext.getBody(),
              html: 
     
     "
     
     <h1><font color='red'>面板主区域</font></h1>
     
     "
     
     ,
           });
        });
        
     
     <
     
     /
     
     script>
    
    
   
   

    
    
   
   
  
  
显示效果如下：
 
 
 
 

  
  
 
 
 
 

  
  当然，如果面板中的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
     
     (){});