2

我有一个视图，其中包含一个带有 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 存储加载成功处理程序没有被触发

任何指导表示赞赏，谢谢。

4

2 回答 2

5

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

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

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

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

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

也是控制器中的ref属性，它会自动为您做一些事情。一些例子：

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

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

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

于 2012-11-13T07:07:50.570 回答
2

提供别名允许您在 Ext.widget('contenttab') 方法中使用它来创建组件的实例。但是，它不会创建全局变量“contenttab”。

它所做的另一件事是在组件管理器中的“contenttab”名称下注册一个“xtype”。这样您就可以通过 xtype 引用您的组件，如

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

别名文档：http ://docs.sencha.com/ext-js/4-1/#!/api/Ext.Class-cfg-alias 以及更多示例： http ://docs.sencha.com/ext -js/4-1/#!/guide/application_architecture

于 2012-11-12T23:58:34.387 回答