Extjs查看别名/ xtype未在控制器中定义

Question

我有一个视图,其中包含带有2个选项卡的选项卡控件.我已为每个选项卡定义了一个别名,格式如下:

alias: 'widget.contenttab'

我试图访问控制器中的'contenttab',但它说它没有定义:

contenttab is not defined

我试图在控制器的选择处理程序中设置选项卡的html内容:

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

}
});

'contenttab'位于我的RightPage视图中.产生错误的行最终需要驻留在成功回调函数中 - 但这不会被解雇(我在这里为此问题创建了另一个问题Extjs存储加载成功处理程序未被解雇

任何指导表示赞赏,谢谢.

Answer 1

在您的情况下,您应该使用ComponentQuery来接收选项卡实例.我想你至少会知道你的标签的名称,所以你可以这样做

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

或者,如果您需要该类型的所有选项卡.

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

结果将始终是一个数组,我在第一个例子中使用了数组选择器.您可以随时执行此操作以获取实例.但是,对于同一个实例,您执行此操作的次数越多,我建议您将实例存储为局部变量.特别是当你在循环中的路上.

这也是参考控制器中属性,它会自动为您执行一些操作.一些例子:

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

这将创建一个名为getFirstTab()(注意auto camel-case)的方法,该方法引用您的选项卡(基于提供的查询).请注意,还有更多选项autocreate.我必须说,我从来没有使用过这个,但它为你包装了一些在启动时可能很好的东西.

回答您对上一个问题的最后评论:是的,这是正确的方法.