CODEWITHSUNDEEP
extjsextjs4
user1063963
user1063963

Reputation: 1375

How to refer to a tabpanels tab, from inside

I have a tabpanel which is part of a form (input fields are on different tabs). I need to inform the user on submission if a form has invalid fields even if they are not on the current tab. I think the best way would be to change the tabs color.

The question is how can I get the reference for the tab button, without introducing a new id?

Here is what i was trying to do, turned out to be a dead end since i get reference to the tab inner body, and with one more up to the entire tab panel

...
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:190,
margin: '10 0 0 0',
items: [{
    title: 'Personal',
    layout:'column',
    border:false,
    items:[{
        columnWidth:.5,
        border:false,
        layout: 'anchor',
        defaultType: 'textfield',
        items: [{
             fieldLabel: 'Email',
             name: 'user[email]',
             allowBlank: false,
             listeners: {
                 'validitychange': function(th, isvalid, eOpts) {
                     if(!isvalid) {
                         alert(this.up().up().getId());
                     };
                 }
             },
             vtype:'email',
             anchor:'95%'
        }]
    }]
}]

Upvotes: 4

Views: 6640

Answers (2)

BillyTom
BillyTom

Reputation: 2729

If you have access to the tabPanel then you can access the items of its tabBar directly with:

this.up('tabpanel').getTabBar().items.get(0)
this.up('tabpanel').getTabBar().items.get(1)

etc.

See http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.tab.Bar-property-items

Upvotes: 1

dbrin
dbrin

Reputation: 15673

Try this: From your field or any other Component in the panel (like a button) :

this.up('tabpanel').down('tab').el.applyStyles('background:red')

if the tab in question is not the first tab, you can use any tab property in the selector like this: ...down('tab[text=Example]') . You can use id property if you have it, if not you can just make up any property and set it to something meaningful like "ref:FirstTab".

Upvotes: 5

Related Questions