动态改变panel 中items内容

JavaScript EXT

动态改变panel 中items内容

悬赏：10 发布时间：2011-08-09 提问人：xwf2010_good (初级程序员)

< > 猎头职位:  上海: 上海 ETL开发员

例如：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加上这个试试···· 

Js代码  

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

发这个问题的时候漏掉了，我这个随手写的一个问题。  项目里面是有的。

------------------------------------------------------------------------------------------------------------------
问题补充：
非常感谢您的回答  差不多就是你的意思。 我在稍微表述清楚一点 麻烦您指点一下 
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 写道

Java代码  

1. Ext.onReady(function() {  
2.             var panel1 = new Ext.Panel({  
3.                 title : 'Tab 1' ,  
4.                 id : '123',  
5.                 html : '123'  
6.             });  
7.               
8.             var panel2 = new Ext.Panel({  
9.                 title : 'Tab 2' ,  
10.                 id : '456',  
11.                 html : '456'  
12.             });   
13.   
14.               
15.             var panel3 = new Ext.Panel({  
16.                 title : 'Tab 3' ,  
17.                 id : '789',  
18.                 html : '789'  
19.             });  
20.               
21.             var test = new Ext.Panel({  
22.                 title: 'test2',  
23.                 border:false,  
24.                 items:[panel1]  
25.             });     
26.   
27.             var tab = new Ext.TabPanel({  
28.                 renderTo : 'tab' ,  
29.                 activeTab : 0,  
30.                 items : [  
31.                     {  
32.                         title: 'test1',  
33.                         border:false,  
34.                         items:[panel3]  
35.                     },  
36.                     test  
37.                 ]  
38.             });  
39.               
40.             test.on('activate' , function(panel) {  
41.                 this.removeAll();  
42.                 this.add(panel2);  
43.           
44.                 this.doLayout(true);  
45.                   
46.             });  
47.         });  

是不是这么个意思？

------------------------------------------------------------------------------------------------------------------
问题补充：

myali88 写道

Java代码  

1. panel2.on('activate' , function(panel) {  
2.                 //这里面想改变data2 然后在panel2显示修改后的data2。  
3.                 this.removeAll();  
4.                 this.add(newdata2);//newdata2，依据修改需要新建的data2  
5.                 this.doLayout();  
6.             });  
7.             panel3.on('activate' , function(panel) {  
8.                 //  这里面想改变data3 然后在panel3显示修改后的data3。  
9.                 this.removeAll();  
10.                 this.add(newdata3);//newdata3，依据修改需要新建的data3  
11.                 this.doLayout();  
12.             });   

这样就可以了。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换成默认布局就可以）。这里我建议你试试其他布局方式。

---

提问者对于答案的评价：
非常好

问题答案可能在这里 → 寻找更多解答

• wxPython：布局管理器
• 打造Ext2.0模块化单页系统Demo
• flex4通过Resize效果实现Panel状态变换
• Extjs a is null 错误
• panel使用column, 怎么样才能让panel里的子panel等高?

其他回答

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

Js代码  

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

renpeng301 (架构师) 2011-08-09

引用

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

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

myali88 (资深架构师) 2011-08-09

Java代码  

1. Ext.onReady(function() {  
2.             var panel1 = new Ext.Panel({  
3.                 title : 'Tab 1' ,  
4.                 id : '123',  
5.                 html : '123'  
6.             });  
7.               
8.             var panel2 = new Ext.Panel({  
9.                 title : 'Tab 2' ,  
10.                 id : '456',  
11.                 html : '456'  
12.             });   
13.   
14.               
15.             var panel3 = new Ext.Panel({  
16.                 title : 'Tab 3' ,  
17.                 id : '789',  
18.                 html : '789'  
19.             });  
20.               
21.             var test = new Ext.Panel({  
22.                 title: 'test2',  
23.                 border:false,  
24.                 items:[panel1]  
25.             });     
26.   
27.             var tab = new Ext.TabPanel({  
28.                 renderTo : 'tab' ,  
29.                 activeTab : 0,  
30.                 items : [  
31.                     {  
32.                         title: 'test1',  
33.                         border:false,  
34.                         items:[panel3]  
35.                     },  
36.                     test  
37.                 ]  
38.             });  
39.               
40.             test.on('activate' , function(panel) {  
41.                 this.removeAll();  
42.                 this.add(panel2);  
43.           
44.                 this.doLayout(true);  
45.                   
46.             });  
47.         });  

是不是这么个意思？

myali88 (资深架构师) 2011-08-09

Java代码  

1. panel2.on('activate' , function(panel) {  
2.                 //这里面想改变data2 然后在panel2显示修改后的data2。  
3.                 this.removeAll();  
4.                 this.add(newdata2);//newdata2，依据修改需要新建的data2  
5.                 this.doLayout();  
6.             });  
7.             panel3.on('activate' , function(panel) {  
8.                 //  这里面想改变data3 然后在panel3显示修改后的data3。  
9.                 this.removeAll();  
10.                 this.add(newdata3);//newdata3，依据修改需要新建的data3  
11.                 this.doLayout();  
12.             });   

这样就可以了。panel2，和panel3只有一个item，直接删除然后再添加一个，这样就算修改了data2了。

myali88 (资深架构师) 2011-08-10

Java代码  

1. panel2.on('activate' , function(panel) {   
2. //这里面想改变data2 然后在panel2显示修改后的data2。   
3. if(!this.get(newdate2))  
4. {  
5. this.removeAll();  
6. this.add(newdata2);  
7. this.doLayout();    
8. }  
9. });   
10. panel3.on('activate' , function(panel) {   
11. //这里面想改变data3 然后在panel3显示修改后的data3。   
12. if(!this.get(newdate3))  
13. {  
14. this.removeAll();  
15. this.add(newdata3);  
16. this.doLayout();    
17. }  
18. });   

renpeng301 (架构师) 2011-08-10

Java代码  

1. panel有removeAll方法，我试了可以的、  
2. removeAll( Boolean autoDestroy ) : Array   
3. 从此容器中移除某个组件。Removes all components ...   
4. 从此容器中移除某个组件。Removes all components from this container.   
5. 参数项：   
6. autoDestroy : Boolean   
7. （可选的） 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.   
8. 返回值：   
9. Array   
10. 被销毁的组件数组。Array of the destroyed components   

renpeng301 (架构师) 2011-08-10

panel  有 hide()方法