动态添加一个控件到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方法，以便更新容器界面