Question

我在一个tabpanel中创建了一个工具栏，它有一个按钮，并且显示在我的两个选项卡面板上。现在我只是尝试仅显示面板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）禁用/启用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中禁用特定选项卡面板的工具栏

1 个答案: