您的位置:首页 > Web前端 > JavaScript

extjs panel add 和remove panel的注意事项

2012-07-23 11:18 369 查看
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);//这个方法会导致面板下的组件无法显示
}

 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  extjs function button border