Sencha touch 创建视图的多个实例

使用Sencha Touch 2.3.1a版

PassDownEntryView中的旋转木马控件

{
    xtype: "container",
    itemId: "pageEntryItemsContainer",
    layout: "fit",
    items:
    [
        {
            xtype: "carousel",
            itemId: "carouselItems",
            direction: "horizontal",
            items:
            [
            ]
        }
    ]
}

我正在为旋转木马创建多个视图实例

var data = JSON.parse(response.responseText);
var itemViewArray = [];


var index = 0;
Ext.Array.each(data.Data, function(item)
{
    var itemView = Ext.create('MCConnect.view.PassDown.PassDownEntryItemView');
    itemView.setItemId('EntryItemId' + index);
    itemView.configureEntry(item);

    itemViewArray.push(itemView);
    index++;
});

if(itemViewArray.length > 0)
{
    carouselControl.setItems(itemViewArray);
}

configureEntry在PassDownEntryItemView中设置html

{
    xtype: "label",
    html: ""
}   

设置标签的代码：

configureEntry: function(item)
{
    var fieldLabel =  Ext.ComponentQuery.query('label')[0];
    fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>");
}

我仍然得到只有Test2显示的结果，即使有两个转盘面板显示。除了第二个是空的

更新6/22 我在下面添加了我的PassDownEntryItemView代码：

Ext.define('MCConnect.view.PassDown.PassDownEntryItemView', 
{
    extend: 'Ext.form.Panel',
    xtype: 'passdownEntryItemView',
    requires: 
    [ 
        'Ext.data.Store',
        "Ext.field.Text",
        "MCConnect.view.Commons.AutoHeightTextArea"
    ],
    config:
    {
        itemId: '',
        isReadOnly: true,
        passDownEntryItemId: 0,
        layout: "vbox",
        items:
        [

            {
                xtype: 'fieldset',
                style: 'padding: 0; margin: 1px;',
                items:
                [
                    {
                        xtype: "label",
                        html: ""
                    }
                ]
            }
        ],
        listeners:
        [
        ]
    },

    initialize: function()
    {
    },

    configureEntry: function(item)
    {
        this.setPassDownEntryItemId(item.passDownEntryId);
        var fieldLabel =  Ext.ComponentQuery.query('label')[0];
        fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>");
    }


});     

6/22 多亏了阿卡图姆的建议。我想出来了。我将标签的itemId标记为labelDistrictItem-0，因此在我的configureEntry中搜索它，然后设置它并重命名itemId：

var fieldLabel =  Ext.ComponentQuery.query('passdownEntryItemView #labelDistrictItem-0')[0];
fieldLabel.setItemId('labelDistrictItem-' + item.id);
fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>");

它现在可以工作了

问题在于您的configureEntry函数。var fieldLabel=Ext.ComponentQuery.query'label'[0]；将始终返回整个应用程序中的第一个标签组件。因此，在您的情况下，它将始终返回第一个转盘面板中的标签

而不是使用Ext.ComponentQuery.query'label'[0]；您应该使用或方法在特定的MCConnect.view.PassDown.PassDown EntryItemView中查找特定的标签，具体取决于应用程序的布局

编辑 您可以通过仅在PassDownEntryItemView的子组件中查找标签组件来获取标签组件。为此，您可以使用方法。因此，您的configureEntry方法应该如下所示：

configureEntry:functionitem{ this.setPassdownEntryItem.passDownEntryId； var fieldLabel=this.down'label'； fieldLabel.setHtml+item.item+； }

---

摆弄工作示例：

好的，这很有意义，谢谢。我在上面发布了我的PassDownEntryItemView，你能告诉我你的解决方案吗。我理解你的意思，但由于每次都是同一种观点，我不太确定如何尝试寻找一个特定的标签。我可以在第一次创建它时给它一个不同的itemId吗？但是如果我通过Ext.ComponentQuery.query'label'[0]设置标签；它仍然会找到您正在创建PassDownEntryItemView多个实例的createdYou。每个实例都有自己的子组件。我已经根据您的布局更新了我的答案，并添加了示例。您的解决方案与项目ID也是可能的。好的，我知道你在做什么。谢谢你的帮助。

var fieldLabel =  Ext.ComponentQuery.query('passdownEntryItemView #labelDistrictItem-0')[0];
fieldLabel.setItemId('labelDistrictItem-' + item.id);
fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>");