CODEWITHSUNDEEP
extjsextjs4extjs-mvcextjs4.1
Joseph Victor Zammit
Joseph Victor Zammit

Reputation: 15320

ExtJS MVC Controller ref to Tab Panel's active tab

I have an MVC app which has a Tab Panel rendered as the only item in the viewport. Within the tabs I would like to put the same type of component, for which the event handling is equal within all tabs.

Therefore I need an ExtJS MVC Controller ref to the active tab, that would lead me to execute events on the components in the active tab. Is it possible to have such a ref?

My current approach is this:

  1. get reference to Tab Panel
  2. call getActiveTab()
  3. call the controller events for the component in active tab

Is it possible to encapsulate the above 3 steps in one controller ref? Would be beautiful :-)

I'm using ExtJS 4.1.

Upvotes: 3

Views: 5677

Answers (2)

David Kanarek
David Kanarek

Reputation: 12613

Personally, I think controller refs are overrated. This sounds like a simple case where you can use one as you describe, but I prefer to listen to the event, and navigate from the firing component to the one I need.

In your case, assuming your tab panel contains regular ext panels, I'd do something like the following:

onButtonClick: function (button) {
    var panel = button.up('panel[tab]');

    if (panel) {
        panel.someMethod();
    }
}

The up method will find the closest ancestor that is of xtype panel and has a property named tab. If you have more specific xtypes or known properties, use those instead.

The panel should be the active one (else how was its button clicked?) but you can check that by going up another level to the tab panel and getting the activeTab there.

onButtonClick: function (button) {
    var panel = button.up('panel[tab]'),
        tabPanel = button.up('tabpanel'),
        activeTab = tabPanel && tabPanel.getActiveTab();

    if (panel && panel === activeTab) {
        panel.someMethod();
    }
}

Upvotes: 3

sha
sha

Reputation: 17860

Say your tabPanel has itemId: 'content'. Inside that panel you will have bunch of tabs and on each tab you will have bunch of buttons (as an example). And you want to handle all these button's click in one controller. Do I understand you correctly?

I believe that simple ref inside your controller would work:

this.control('#content button', { 
       click: this.buttonClicked
   }
});

Upvotes: 1

Related Questions