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

Question

我在有一个按钮的选项卡面板中创建了一个工具栏，并且出现在我的两个选项卡面板中。现在我试图只为面板 A 显示 tbar 及其按钮，并为面板 B 隐藏它。对此有什么帮助吗？

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 />",
                }]
        });

Answer 1

有两种可能的实现方式。

1) Disable/enable 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 />",
                }]
        });
 });

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

Disabling the toolbar for a specific tab panel in extjs4.2

extjs

extjs4