Question

I have a view which contains a tab control with 2 tabs. I have defined an alias for each tab, in this format:

alias: 'widget.contenttab'

I am trying to access ‘contenttab’ in the controller but it says it is not defined:

contenttab is not defined

I am trying to set the html content of the tab in a select handler in the controller:

Ext.define('BP.controller.Induction', {
extend: 'Ext.app.Controller',

views: [
    'induction.Binder',
    'induction.LeftPage',
    'induction.RightPage',
],

stores: [
    'Sections',
    'Categories',
    'Tasks'
],

models: [
    'Section',
    'Category',
    'Task'
],


init: function() {
    this.control({
        'grid[xtype=categorygrid]': {
            itemclick: this.onItemClick 
        }
    });
    console.log('Initialized Induction!');
},


onItemClick: function(e, d) {
    console.log(d.data.category_id);
    this.getCategoriesStore().load({params:{'id':d.data.category_id}}, {
        success: function(category) {
            console.log("Category: " + category.get('name'));
        },
        error: function(e) {
            console.log(e);
        }
    });
    contenttab.html = 'test'; // produces error

}
});

The ‘contenttab’ is within my RightPage view. The line which produces an error ultimately needs to reside within the success callback function – but this isn’t getting fired (I have created another question here for that issue Extjs store load success handler not getting fired

Any guidance appreciated, thanks.

Answer 1

In your case you should use a ComponentQuery to receive your tab-instances. I guess you will know at least the name of your tab so you can do

var single = Ext.ComponentQuery.query('contenttab[title=YourTabName]')[0];

Or if you need all tabs of that type.

var list = Ext.ComponentQuery.query('contenttab');

The result will always be a array therefor I used the array selector at the first example. You can do this at any point to get a instance. But the more often you do this for the same instance the more I would recommend you to store the instance as local variable. Especially when you are on the way to it within a loop.

The is also the ref property within a controller, which do some things automatically for you. Some example:

refs: [
        {
            ref: 'firstTab',
            selector: 'contenttab[title=YourTabName]'
        }
    ]

This will create a method named getFirstTab() (note the auto camel-case) which refers to your tab (based on the provided query). Note that there are more options like autocreate. I must say, I never used this, but it wraps some things up for you which may be nice at startup.

To answer your last comment of the previous question: Yes this is the correct way to do it.