controller的作用范围是整个app,如果在app里定义了一个controller,app会自动创建该controller的实例,无须直接创建。

controller有2个重要的属性,之一是refs,通过refs可以建立到某个component的引用。

Ext.define('MyApp.controller.Main',{
    extend:'Ext.app.Controller',
    config:{
        refs:{
            nav:'#mainNav',
            infoPanel:{
                selector:'tabpanel panel[name=fish] infopanel',
                xtype:'infopanel',
                autoCreate:true}

}}, addLogoutButton:function(){
this.getNav().add({text:'Logout'});
}
});

上面的例子中建立了到id为mainNav的组件引用,选择条件是id=mainNav

和对Infopanel的引用,选择条件是在tabpanel->panel(name是fish)->infopanel,

如果该组件不存在则自动创建(autoCreate=true)。

通过这种方式自动创建的组件和在某个方法里创建的组件有什么区别呢?

区别就是他们的作用范围。

在上面的例子中由于selector限定了该infopanel是在name为fish的panel上,

如果换成 selector:'infopanel',没有限定infopanel存在位置,则创建的一个相当于全局的组件,

不受任何其他组件的约束。

在开发的过程中犯了这样一个错误,autoCreate时没有限定组件的所属,

而实际引用时却把它当成是某个组件的item,结果当然是没有出现期待的效果。

小结一下就是 在refs里面,selector有2个作用,一个就是纯选择器的作用,

另外一个作用就是当该组件不存在且指定autoCreate时起到限定组件创建时所属的作用。