转载自:http://blog.csdn.net/hxyfendou/article/details/8772337
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
<div>5、面板内容动态控制</div><div><p style="line-height: 19px; margin: 10px auto;">面板中的内容也可以是指定的html片段,此时可以通过配置选项中html属性来指定。比如下面的代码:</p><div class="cnblogs_code" style="border: 1px solid rgb(204, 204, 204); padding: 5px; margin: 5px 0px; font-family: 'Courier New'; font-size: 12px; overflow: auto; background-color: rgb(245, 245, 245);"><div class="cnblogs_code_toolbar" style="margin-top: 5px;"><span class="cnblogs_code_copy" style="line-height: 1.5; padding-right: 5px;"><a target=_blank title="复制代码" href="http://blog.csdn.net/hxyfendou/article/details/8772337" style="color: rgb(26, 139, 200); text-decoration: none; border: medium none;"><img alt="复制代码" src="https://i-blog.csdnimg.cn/blog_migrate/69c5a8ac3fa60e0848d784a6dd461da6.gif" style="border: medium none; max-width: 100%;" /></a></span></div><pre style="white-space: pre-wrap; word-wrap: break-word; margin-top: 0px; font-family: 'Courier New'; margin-bottom: 0px;"><div style="background-color: rgb(245, 245, 245);"><span style="color: rgb(0, 0, 0); line-height: 1.5;"> Ext.onReady(</span><span style="line-height: 1.5;">function</span><span style="color: rgb(0, 0, 0); line-height: 1.5;">(){ </span><span style="line-height: 1.5;">new</span><span style="color: rgb(0, 0, 0); line-height: 1.5;"> Ext.Panel({ title: </span><span style="color: rgb(0, 0, 0); line-height: 1.5;">"</span><span style="color: rgb(0, 0, 0); line-height: 1.5;">面板用法</span><span style="color: rgb(0, 0, 0); line-height: 1.5;">"</span><span style="color: rgb(0, 0, 0); line-height: 1.5;">, width: </span><span style="color: rgb(0, 0, 0); line-height: 1.5;">300</span><span style="color: rgb(0, 0, 0); line-height: 1.5;">, height: </span><span style="color: rgb(0, 0, 0); line-height: 1.5;">200</span><span style="color: rgb(0, 0, 0); line-height: 1.5;">, renderTo: Ext.getBody(), html: </span><span style="color: rgb(0, 0, 0); line-height: 1.5;">"</span><span style="color: rgb(0, 0, 0); line-height: 1.5;"><h1><font color='red'>面板主区域</font></h1></span><span style="color: rgb(0, 0, 0); line-height: 1.5;">"</span><span style="color: rgb(0, 0, 0); line-height: 1.5;">, }); }); </span><span style="color: rgb(0, 0, 0); line-height: 1.5;"><</span><span style="color: rgb(0, 0, 0); line-height: 1.5;">/</span><span style="color: rgb(0, 0, 0); line-height: 1.5;">script></span></div>显示效果如下:
< script type = " text/javascript " > Ext.onReady( function (){ new Ext.Panel({ title: " 面板用法 " , width: 300 , height: 200 , autoLoad:{ url: " index.html " } }); }); < / script>
< 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>
panel.body.update( " <h1><font color='blue'>这是Ext的面板</font></h1> " , true , function (){});