CODEWITHSUNDEEP
extjsextjs4
mikeb
mikeb

Reputation: 727

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

I created a toolbar inside a tabpanel that has one button, and is appearing for both my tab panels. Now i'm trying to only show the tbar and its button for only panel A and hide it for panel B. Any help on this? 

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

Upvotes: 0

Views: 96

Answers (1)

Gilsha
Gilsha

Reputation: 14589

There are two possible ways to implement this.

1) Disable/enable the toolbar on 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) Move the toolbar from tab panel to '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 />",
                }]
        });
 });

Upvotes: 1

Related Questions