Extjs view alias / xtype not defined in controller

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.

Answer 2

Providing an alias allows you to use it in Ext.widget('contenttab') method to create an instance of your component. It does not however create a global variable 'contenttab'.

One other thing it does is registers an 'xtype' under 'contenttab' name in the Component Manager. So that you can reference your component by xtype as in

...
items:[ 'contenttab' ],
....

docs for alias: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Class-cfg-alias and some more examples: http://docs.sencha.com/ext-js/4-1/#!/guide/application_architecture