A quick look into the sources and your good
In the controller definition you have
PHP Code:
Ext.define('Books.controller.Books', {
extend: 'Ext.app.Controller',
models: ['Book'],
stores: ['Books', 'Reviews'], // <-- Reviews store => getReviewsStore()
refs: [
{ref: 'bookSideBar', selector: 'booksidebar'},
{ref: 'bookView', selector: 'bookview'}, //<--- ref: bookView => getBookView()
{ref: 'reviewList', selector: 'reviewlist'}
],
/...
And in the Ext.app.Controller.js it takes the "refs" to generate the methods
PHP Code:
constructor: function(config) {
this.mixins.observable.constructor.call(this, config);
Ext.apply(this, config || {});
this.createGetters('model', this.models);
this.createGetters('store', this.stores);
this.createGetters('view', this.views);
if (this.refs) {
this.ref(this.refs); // <-- generate magic component query view ref
}
},
createGetters: function(type, refs) {
type = Ext.String.capitalize(type);
Ext.Array.each(refs, function(ref) {
var fn = 'get',
parts = ref.split('.');
// Handle namespaced class names. E.g. feed.Add becomes getFeedAddView etc.
Ext.Array.each(parts, function(part) {
fn += Ext.String.capitalize(part);
});
fn += type;
if (!this[fn]) {
this[fn] = Ext.Function.pass(this['get' + type], [ref], this);
}
// Execute it right away
this[fn](ref);
},
this);
},
ref: function(refs) {
var me = this;
refs = Ext.Array.from(refs);
Ext.Array.each(refs, function(info) {
var ref = info.ref,
fn = 'get' + Ext.String.capitalize(ref);
if (!me[fn]) {
me[fn] = Ext.Function.pass(me.getRef, [ref, info], me);
}
});
},
In the createGetters() method the little nice comment, that namespaced stores, models and views are concatenated can be a pitfall.
For the ComponentQuery: You can still use the xtype (or alias)
PHP Code:
this.control({".xtype_name": render: {}});
this.control('.gridpanel')