Extjs 视图别名/xtype 未在控制器中定义答案

【问题标题】：Extjs view alias / xtype not defined in controllerExtjs 视图别名/xtype 未在控制器中定义
【发布时间】：2012-11-13 15:18:28
【问题描述】：

我有一个视图，其中包含一个带有 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 store load success handler not getting fired

感谢任何指导，谢谢。

【问题讨论】：

标签： extjs scope extjs4 alias xtype

【解决方案1】：

在您的情况下，您应该使用 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。我必须说，我从来没有使用过这个，但它为你包装了一些东西，在启动时可能会很好。

回答您对previous question 的最后评论：是的，这是正确的做法。

【讨论】：

谢谢，我会试一试，看看进展如何。
我一直在玩这个。除了使用别名/ xtype 和标题选择器（唯一有效的标题选择器是面板的标题，而不是每个选项卡），我在选择选项卡面板时遇到了一些困难。效果很好的是为每个选项卡提供一个 itemId 并将其与查询一起使用。
我设置 refs 的成功率较低 - 使用 '#myTab' 选择器在调用 getMyTab() 时收到未定义的警告。奇怪的。至少我现在可以通过一种方式获取对象:)
@BrynJ 我建议您使用您自己为每个实例设置的自定义 ident 选择器，例如 cId='firstTab'，而不是自己设置 id（如果不确切知道您在做什么设置 id'S 是一个错误- 容易发生的事情）。现在重要的是在您尝试找到它时创建该选项卡。它不需要可见。您可以从控制台自己尝试使用 Ext.getCmp('name') 作为 id 或 Ext.ComponentQuery.query('[cId='firstTab']'); 和/或所有其他选择器。希望这会有所帮助。
确实如此，我听从了您的建议。我现在可以将对象输出到控制台，并且可以看到所有属性。我目前感兴趣的是html，我可以设置它并通过再次输出到控制台来确认它已设置，但选项卡内容实际上并没有改变？！从阅读开始，我尝试执行 myTab.doLayout()，它不会产生错误但似乎没有做任何事情。对象是副本还是引用，我必须做什么才能让面板更新？

【解决方案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

【讨论】：