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 (){});