Question

我的视图定义如下：

    Ext.define('senchaTest.view.ModelDetailsView', {
    extend: 'Ext.Panel',
    requires: [
    ],
    xtype: 'modeldetailsview',

    config: {
        modelName: null
        layout: 'vbox',
        items: [
        {
            xtype: 'label',
            itemId: 'modelinformationview-name-label'
        }]
    },
    updateModelName: function(modelName) {
        var components = Ext.ComponentQuery.query('.modelinformationview #modelinformationview-name-label');
        if (components && components.length > 0) {
            components[0].setHtml(modelName);
        };
    }
});

我想在选项卡面板中重复使用此视图。我在标签面板中有两个标签。每个都有一个上面定义的视图的实例。但是，每个人都会有不同的数据和角色。当我尝试设置这些视图的实例的配置值时，只使用一个配置。我知道这是因为Ext.ComponentQuery查询相同的组件（例如，'。modelinformationview＃modelinformationview-name-label'）。它从创建的视图的每个实例返回两个组件，我选择第一个并使用它。因此，始终只使用一个视图。我想知道如何重用这样的定义视图。我知道控制器可以在实现这一目标方面发挥作用。但我还没有想出最好的方法。请帮忙。感谢。

Answer 1

this是modeldetailsview函数中右updateModelName()的实例，因此它很简单：

updateModelName: function(modelName) {
    var component = this.down('[itemId=modelinformationview-name-label]');
    component.setHtml(modelName);
}

[编辑]

我制作了这个示例，向您展示如何重复使用itemId https://fiddle.sencha.com/#fiddle/45o标识它们的组件。

我使用Fiddle.view.Main的两个实例定义了Fiddle.view.Reusable，然后在主视图的initialize事件中，我获得了对主视图的引用，并从中使用Ext.Container.getComponent()获取itemId的组件实例。

itemId只是一种识别组件实例而不会污染全局id空间的方法，您可以使用它来获取Ext.Container.getComponent('foo');之类的容器中的项目我在我的例子中做过，或者更常见的是componentQuery('[itemId=foo]');，就像我回答你的问题一样。

Answer 2

一个简单的例子：

Ext.define('App.view.Mygrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.myGrid',

    itemId: 'myGrid',
}

之后您可以通过将其添加到父级的items属性中来添加此内容，如下所示：

items:
[{ xtype: 'myGrid' }]

请注意，在这种情况下您不需要itemId。 alias属性使您可以使用alias作为xtype实例化视图。

如何在Sencha touch中使用itemId

2 个答案: