动态改变panel 中items内容

0 0

动态改变panel 中items内容10

例如：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没有显示出来。就大侠们指点。

问题补充：

myali88 写道

引用

怎么让动态改变第二个tab页显示panel2？

这是什么意思？Ext.TabPanel默认不就是可以在多个组件之间切换吗？你是指直接替换tab内的组件吗？

是的直接替换tab内的组件

问题补充：

renpeng301 写道

tab页签用了border布局
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 写道

引用

removeAll方法是有的，你可以在API文档中找到。删除后显示不出来，我估计是因为你这里使用了border布局，这种布局要求center部分组件一定要有，如果你删除了就不行（我试过了，如果把panel2换成默认布局就可以）。这里我建议你试试其他布局方式。

已经解决了谢谢你的帮助 removeAll在我的2.02版本中是没有的 2.2的API里面也找不到。

JavaScript EXT

2011年8月09日 19:54

xwf2010_good
4
0 0 0

8个答案按时间排序按投票排序

0 0

采纳的答案

引用

2011年8月10日 11:14

myali88
3108
0 0 1

添加评论

0 0

panel 有 hide()方法

2011年8月10日 11:29

lynnlysh
30
0 0 1

添加评论

0 0

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

2011年8月10日 10:50

renpeng301
912
0 0 7

添加评论

0 0


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

2011年8月10日 10:32

renpeng301
912
0 0 7

添加评论

0 0

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了。

2011年8月10日 10:17

myali88
3108
0 0 1

添加评论

0 0

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

是不是这么个意思？

2011年8月09日 21:31

myali88
3108
0 0 1

添加评论

0 0

引用

怎么让动态改变第二个tab页显示panel2？

这是什么意思？Ext.TabPanel默认不就是可以在多个组件之间切换吗？你是指直接替换tab内的组件吗？

2011年8月09日 21:02

myali88
3108
0 0 1

添加评论

0 0

tab页签用了border布局
border布局必须提供
region:'center', 把panel2加上这个试试····

var panel2=new Ext.panel({ 
           id:'456', 
     region:'center',
           html'456' 
      });

2011年8月09日 20:28

renpeng301
912
0 0 7

添加评论

已解决问题

未解决问题

排行榜

查看全部排名>>