动态添加一个控件到viewport中去

代码

Ext.namespace( ' IAMadmin ' );

IAMadmin.MainApp  =   function () {
           
     //  public space
     return  {
         //  public properties
        viewport:  false ,
        container_west:  false ,
        container_center:  false ,
        
         //  public methods
        init:  function () {
            
             this .container_west  =   new  Ext.Panel({
                region:  ' west ' ,
                id:  ' container_west ' ,
                hideBorders:  true
            });
             this .container_center  =   new  Ext.Panel({
                region:  ' center ' ,
                id:  ' container_center ' ,
                hideBorders:  true
            });
            
             this .viewport  =   new  Ext.Viewport({
                layout:  ' border ' ,
                items: [{
                    region:  ' north ' ,
                    xtype:  ' mainmenu '                  //  I created this one
                },
                 this .container_west,
                 this .container_center
                ]
            });
        },  //  end of init
        
        onClick:  function (obj,evt) {
             var  treePanelBuilder     =   new  Ext.ux.TreePanelBuilder();
             var  treePanel             =  treePanelBuilder.buildTreePanel();
            
             this .container_west.setWidth( 200 );
             this .container_west.add(treePanel);
            
             this .viewport.doLayout();
        }
    };
    
}();  //  end of application

 

基本的思路就是先生成一个容器，比如一个panel1，，在声明viewport的时候把这个容器加进去（items:panel1），然后把需要动态添加的控件添加到panel1

panel1.add(一个控件);

panel1.doLayout();

 

注意：容器添加后，需要调用doLayout方法，以便更新容器界面