动态改变panel 中items内容
悬赏:10 发布时间:2011-08-09 提问人:xwf2010_good (初级程序员)
猎头职位:
例如:var panel1=new Ext.panel({
id:'123',
html'123'
});
var panel3=new Ext.panel({
id:'789',
html'789'
});
var tab=new Ext.TabPanel({
activeTab:0,
region:'center',
items: [
{
title: 'test',
border:false,
layout:'border',
items:[panel3]
},
{
title: 'test',
border:false,
layout:'border',
items:[panel1]
}
]
};
var panel2=new Ext.panel({
id:'456',
html'456'
});
怎么让动态改变第二个tab页显示panel2? 至于网上说得 先remove 在add 最后调用doLayout(true)只是把panel1移除了,panel2没有显示出来。 就大侠们指点。
------------------------------------------------------------------------------------------------------------------
问题补充:
这是什么意思?Ext.TabPanel默认不就是可以在多个组件之间切换吗?你是指直接替换tab内的组件吗?
是的 直接替换tab内的组件
------------------------------------------------------------------------------------------------------------------
问题补充:
发这个问题的时候漏掉了,我这个随手写的一个问题。 项目里面是有的。
------------------------------------------------------------------------------------------------------------------
问题补充:
非常感谢您的回答 差不多就是你的意思。 我在稍微表述清楚一点 麻烦您指点一下
var panel1=new Ext.Panel({
id:'panel1',
title: '树状',
border:false,
layout:'border',
items:[data1]
});
var panel2=new Ext.Panel({
id:'panel2',
title: '待审核',
border:false,
layout:'border',
items:[data2]
});
var panel3=new Ext.Panel({
id:'panel3',
title: '自定义',
border:false,
layout:'border',
items:[data3]
});
var tab = new Ext.TabPanel({
activeTab:0,
region:'center',
items: [
panel1,
panel2,
panel3
]
});
panel2.on('activate' , function(panel) {
这里面想改变data2 然后在panel2显示修改后的data2。
});
panel3.on('activate' , function(panel) {
这里面想改变data3 然后在panel3显示修改后的data3。
});
是不是这么个意思?
------------------------------------------------------------------------------------------------------------------
问题补充:
这样就可以了。panel2,和panel3只有一个item,直接删除然后再添加一个,这样就算修改了data2了。
panel没有removeAll()方法,我用remove(data3);this.add(newdata3);或者this.items.add(newdata3); this.doLayout(); panel3里面出现空白 说明data3移除成功 newdata3添加没有显示出来 不知道原因在哪?
------------------------------------------------------------------------------------------------------------------
问题补充:
panel没有removeAll()方法,我用remove(data3);this.add(newdata3);或者this.items.add(newdata3); this.doLayout(); panel3里面出现空白 说明data3移除成功 newdata3添加没有显示出来 不知道原因在哪?
removeAll方法是有的,你可以在API文档中找到。删除后显示不出来,我估计是因为你这里使用了border布局,这种布局要求center部分组件一定要有,如果你删除了就不行(我试过了,如果把panel2换成默认布局就可以)。这里我建议你试试其他布局方式。
已经解决了 谢谢你的帮助 removeAll在我的2.02版本中是没有的 2.2的API里面也找不到。
id:'123',
html'123'
});
var panel3=new Ext.panel({
id:'789',
html'789'
});
var tab=new Ext.TabPanel({
activeTab:0,
region:'center',
items: [
{
title: 'test',
border:false,
layout:'border',
items:[panel3]
},
{
title: 'test',
border:false,
layout:'border',
items:[panel1]
}
]
};
var panel2=new Ext.panel({
id:'456',
html'456'
});
怎么让动态改变第二个tab页显示panel2? 至于网上说得 先remove 在add 最后调用doLayout(true)只是把panel1移除了,panel2没有显示出来。 就大侠们指点。
------------------------------------------------------------------------------------------------------------------
问题补充:
myali88 写道
引用
怎么让动态改变第二个tab页显示panel2?
这是什么意思?Ext.TabPanel默认不就是可以在多个组件之间切换吗?你是指直接替换tab内的组件吗?
是的 直接替换tab内的组件
------------------------------------------------------------------------------------------------------------------
问题补充:
renpeng301 写道
tab页签用了border布局
border布局必须提供
region:'center', 把panel2加上这个试试····
border布局必须提供
region:'center', 把panel2加上这个试试····
- var panel2=new Ext.panel({
- id:'456',
- region:'center',
- html'456'
- });
发这个问题的时候漏掉了,我这个随手写的一个问题。 项目里面是有的。
------------------------------------------------------------------------------------------------------------------
问题补充:
非常感谢您的回答 差不多就是你的意思。 我在稍微表述清楚一点 麻烦您指点一下
var panel1=new Ext.Panel({
id:'panel1',
title: '树状',
border:false,
layout:'border',
items:[data1]
});
var panel2=new Ext.Panel({
id:'panel2',
title: '待审核',
border:false,
layout:'border',
items:[data2]
});
var panel3=new Ext.Panel({
id:'panel3',
title: '自定义',
border:false,
layout:'border',
items:[data3]
});
var tab = new Ext.TabPanel({
activeTab:0,
region:'center',
items: [
panel1,
panel2,
panel3
]
});
panel2.on('activate' , function(panel) {
这里面想改变data2 然后在panel2显示修改后的data2。
});
panel3.on('activate' , function(panel) {
这里面想改变data3 然后在panel3显示修改后的data3。
});
myali88 写道
- Ext.onReady(function() {
- var panel1 = new Ext.Panel({
- title : 'Tab 1' ,
- id : '123',
- html : '123'
- });
- var panel2 = new Ext.Panel({
- title : 'Tab 2' ,
- id : '456',
- html : '456'
- });
- var panel3 = new Ext.Panel({
- title : 'Tab 3' ,
- id : '789',
- html : '789'
- });
- var test = new Ext.Panel({
- title: 'test2',
- border:false,
- items:[panel1]
- });
- var tab = new Ext.TabPanel({
- renderTo : 'tab' ,
- activeTab : 0,
- items : [
- {
- title: 'test1',
- border:false,
- items:[panel3]
- },
- test
- ]
- });
- test.on('activate' , function(panel) {
- this.removeAll();
- this.add(panel2);
- this.doLayout(true);
- });
- });
是不是这么个意思?
------------------------------------------------------------------------------------------------------------------
问题补充:
myali88 写道
- panel2.on('activate' , function(panel) {
- //这里面想改变data2 然后在panel2显示修改后的data2。
- this.removeAll();
- this.add(newdata2);//newdata2,依据修改需要新建的data2
- this.doLayout();
- });
- panel3.on('activate' , function(panel) {
- // 这里面想改变data3 然后在panel3显示修改后的data3。
- this.removeAll();
- this.add(newdata3);//newdata3,依据修改需要新建的data3
- this.doLayout();
- });
这样就可以了。panel2,和panel3只有一个item,直接删除然后再添加一个,这样就算修改了data2了。
panel没有removeAll()方法,我用remove(data3);this.add(newdata3);或者this.items.add(newdata3); this.doLayout(); panel3里面出现空白 说明data3移除成功 newdata3添加没有显示出来 不知道原因在哪?
------------------------------------------------------------------------------------------------------------------
问题补充:
myali88 写道
引用
panel没有removeAll()方法,我用remove(data3);this.add(newdata3);或者this.items.add(newdata3); this.doLayout(); panel3里面出现空白 说明data3移除成功 newdata3添加没有显示出来 不知道原因在哪?
removeAll方法是有的,你可以在API文档中找到。删除后显示不出来,我估计是因为你这里使用了border布局,这种布局要求center部分组件一定要有,如果你删除了就不行(我试过了,如果把panel2换成默认布局就可以)。这里我建议你试试其他布局方式。
已经解决了 谢谢你的帮助 removeAll在我的2.02版本中是没有的 2.2的API里面也找不到。
采纳的答案
2011-08-10 myali88 (资深架构师)
引用
panel没有removeAll()方法,我用remove(data3);this.add(newdata3);或者this.items.add(newdata3); this.doLayout(); panel3里面出现空白 说明data3移除成功 newdata3添加没有显示出来 不知道原因在哪?
removeAll方法是有的,你可以在API文档中找到。删除后显示不出来,我估计是因为你这里使用了border布局,这种布局要求center部分组件一定要有,如果你删除了就不行(我试过了,如果把panel2换成默认布局就可以)。这里我建议你试试其他布局方式。
提问者对于答案的评价:
非常好
其他回答
tab页签用了border布局
border布局必须提供
region:'center', 把panel2加上这个试试····
border布局必须提供
region:'center', 把panel2加上这个试试····
- var panel2=new Ext.panel({
- id:'456',
- region:'center',
- html'456'
- });
renpeng301 (架构师) 2011-08-09
引用
怎么让动态改变第二个tab页显示panel2?
这是什么意思?Ext.TabPanel默认不就是可以在多个组件之间切换吗?你是指直接替换tab内的组件吗?
myali88 (资深架构师) 2011-08-09
- Ext.onReady(function() {
- var panel1 = new Ext.Panel({
- title : 'Tab 1' ,
- id : '123',
- html : '123'
- });
- var panel2 = new Ext.Panel({
- title : 'Tab 2' ,
- id : '456',
- html : '456'
- });
- var panel3 = new Ext.Panel({
- title : 'Tab 3' ,
- id : '789',
- html : '789'
- });
- var test = new Ext.Panel({
- title: 'test2',
- border:false,
- items:[panel1]
- });
- var tab = new Ext.TabPanel({
- renderTo : 'tab' ,
- activeTab : 0,
- items : [
- {
- title: 'test1',
- border:false,
- items:[panel3]
- },
- test
- ]
- });
- test.on('activate' , function(panel) {
- this.removeAll();
- this.add(panel2);
- this.doLayout(true);
- });
- });
是不是这么个意思?
myali88 (资深架构师) 2011-08-09
- panel2.on('activate' , function(panel) {
- //这里面想改变data2 然后在panel2显示修改后的data2。
- this.removeAll();
- this.add(newdata2);//newdata2,依据修改需要新建的data2
- this.doLayout();
- });
- panel3.on('activate' , function(panel) {
- // 这里面想改变data3 然后在panel3显示修改后的data3。
- this.removeAll();
- this.add(newdata3);//newdata3,依据修改需要新建的data3
- this.doLayout();
- });
这样就可以了。panel2,和panel3只有一个item,直接删除然后再添加一个,这样就算修改了data2了。
myali88 (资深架构师) 2011-08-10
- panel2.on('activate' , function(panel) {
- //这里面想改变data2 然后在panel2显示修改后的data2。
- if(!this.get(newdate2))
- {
- this.removeAll();
- this.add(newdata2);
- this.doLayout();
- }
- });
- panel3.on('activate' , function(panel) {
- //这里面想改变data3 然后在panel3显示修改后的data3。
- if(!this.get(newdate3))
- {
- this.removeAll();
- this.add(newdata3);
- this.doLayout();
- }
- });
renpeng301 (架构师) 2011-08-10
- panel有removeAll方法,我试了可以的、
- removeAll( Boolean autoDestroy ) : Array
- 从此容器中移除某个组件。Removes all components ...
- 从此容器中移除某个组件。Removes all components from this container.
- 参数项:
- autoDestroy : Boolean
- (可选的) True表示为自动执行组件Ext.Componentdestroy 的函数。(optional) True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
- 返回值:
- Array
- 被销毁的组件数组。Array of the destroyed components
renpeng301 (架构师) 2011-08-10
panel 有 hide()方法