代码之家 › 专栏 › 技术社区 › mikeb

在extjs4.2中禁用特定选项卡面板的工具栏

extjs4 extjs

mikeb · 技术社区 · 8 年前

我在一个有一个按钮的选项卡中创建了一个工具栏,它同时出现在我的两个选项卡中。现在我试图只显示面板A的tbar及其按钮,而隐藏面板B的tbar和按钮。有什么帮助吗?

tabPanel = Ext.create('Ext.tab.Panel', {
        region: 'center',
        activeTab: 0,
        autoScroll: true,
        tbar: [{
            xtype: 'button',
            deferredRender : false, 
            handler:function(){
                update();
            }   
        }],
        items: [
                {   
                    id:"panel_A",
                    html: "<iframe src= '"+A_url +"' width='100%' height='100%' id='frm_A' name='frm_A' frameborder=0 />",
                },{
                    id:"panel_B",
                    html: "<iframe src='"+B_url +"'  width='100%' height='100%' id='frm_B' name='frm_B' frameborder=0 />",
                }]
        });

1 回复 | 直到 8 年前

Gilsha 8 年前

有两种可能的实现方法。

1) 禁用/启用上的工具栏 tabchange .

 Ext.create('Ext.tab.Panel', {
        region: 'center',
        activeTab: 0,
        autoScroll: true,
        listeners: {
          tabchange: function(tabPanel, newCard){
              var activeTab = newCard.tab.getText();
              if(activeTab=="panel_B")
                  tabPanel.down("toolbar").setDisabled(true);
              else
                  tabPanel.down("toolbar").setDisabled(false);
          }
        },
        tbar: [{
            xtype: 'button',
            deferredRender : false, 
            handler:function(){
                update();
            }   
        }],
        items: [
                {   
                    id:"panel_A",
                    html: "<iframe src= '"+A_url +"' width='100%' height='100%' id='frm_A' name='frm_A' frameborder=0 />",
                },{
                    id:"panel_B",
                    html: "<iframe src='"+B_url +"'  width='100%' height='100%' id='frm_B' name='frm_B' frameborder=0 />",
                }]
        });
 });

2) 将工具栏从选项卡面板移动到“panel_A”。

Ext.create('Ext.tab.Panel', {
        region: 'center',
        activeTab: 0,
        autoScroll: true,                        
        items: [
                {   
                    id:"panel_A",
                    html: "<iframe src= '"+A_url +"' width='100%' height='100%' id='frm_A' name='frm_A' frameborder=0 />",
                    tbar: [{
                         xtype: 'button',
                         deferredRender : false, 
                         handler:function(){
                            update();
                         }   
                    }],
                },{
                    id:"panel_B",
                    html: "<iframe src='"+B_url +"'  width='100%' height='100%' id='frm_B' name='frm_B' frameborder=0 />",
                }]
        });
 });