![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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
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方法,以便更新容器界面