Question

使用Sencha Touch ver 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>");
}

它创建了正确数量的轮播，但只有第一个实例具有标签集。其余的都是空白的。我输出了configureEntry（）和它适当地将每件物品都劈开了。好像我在设置时遗漏了一些东西。有什么想法吗？

更新：6/21 - A 似乎问题是视图的实例。原因当我创建硬编码视图时：

var item1 = 
{
    item: "test1"
}               

var itemView = new MCConnect.view.PassDown.PassDownEntryItemView();
    itemView.configureEntry(item1);

var item2 = 
{
    item: "test2"
}               
var itemView1 = new MCConnect.view.PassDown.PassDownEntryItemView();
    itemView1.configureEntry(item2);

carouselControl.setItems([itemView, itemView1]);

即使有两个旋转木马面板出现，我仍然得到只有“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 感谢Akatum的建议。我想到了。我将标签的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>");

现在可以使用了

Answer 1

您的configureEntry功能存在问题。 var fieldLabel = Ext.ComponentQuery.query('label')[0];将始终返回整个应用程序中的第一个标签组件。因此，在您的情况下，它将始终返回第一个轮播面板中的标签。

您应该使用up()或down()方法（取决于您的应用程序的布局），而不是使用Ext.ComponentQuery.query('label')[0];来查找特定MCConnect.view.PassDown.PassDownEntryItemView中的特定标签。

修改

您只能在label的子组件中查找PassDownEntryItemView组件。为此，您可以使用down()方法。因此，您的configureEntry方法应该如下所示：

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

摆弄工作示例：https://fiddle.sencha.com/#fiddle/6t4

创建视图的多个实例

1 个答案:

修改