weixin_42467478
2011-08-09 19:54
浏览 769

动态改变panel 中items内容

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

8条回答 默认 最新

  • myali88 2011-08-10 11:14
    已采纳

    [quote]
    panel没有removeAll()方法,我用remove(data3);this.add(newdata3);或者this.items.add(newdata3); this.doLayout(); panel3里面出现空白 说明data3移除成功 newdata3添加没有显示出来 不知道原因在哪?
    [/quote]
    removeAll方法是有的,你可以在API文档中找到。删除后显示不出来,我估计是因为你这里使用了border布局,这种布局要求center部分组件一定要有,如果你删除了就不行(我试过了,如果把panel2换成默认布局就可以)。这里我建议你试试其他布局方式。

    点赞 打赏 评论
  • renpeng301 2011-08-09 20:28

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

    [code="js"]
    var panel2=new Ext.panel({
    id:'456',
    region:'center',
    html'456'
    });
    [/code]

    点赞 打赏 评论
  • myali88 2011-08-09 21:02

    [quote]怎么让动态改变第二个tab页显示panel2? [/quote]
    这是什么意思?Ext.TabPanel默认不就是可以在多个组件之间切换吗?你是指直接替换tab内的组件吗?

    点赞 打赏 评论
  • myali88 2011-08-09 21:31

    [code="java"]
    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);
    
            });
        });
    

    [/code]
    是不是这么个意思?

    点赞 打赏 评论
  • myali88 2011-08-10 10:17

    [code="java"]
    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();
    });
    [/code]
    这样就可以了。panel2,和panel3只有一个item,直接删除然后再添加一个,这样就算修改了data2了。

    点赞 打赏 评论
  • renpeng301 2011-08-10 10:32

    [code="java"]

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

    }
    });
    [/code]

    点赞 打赏 评论
  • renpeng301 2011-08-10 10:50

    [code="java"]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

    [/code]

    点赞 打赏 评论
  • lynn890125 2011-08-10 11:29

    panel 有 hide()方法

    点赞 打赏 评论

相关推荐 更多相似问题