Sencha touch 混合第三方物流和Sencha Touch 2中的项目

我有一个列表详细视图，它工作良好-它有一个tpl，没有项目。我想添加其他组件，所以我添加了一个items数组，但现在tpl不再显示。我曾尝试将tpl保留在主配置中，并将其作为组件添加，但没有任何效果（顺便说一句，数据如何知道适当的tpl位于何处？）-我想理想情况下，我希望能够将我的列表数据插入页面上的任何位置-即项目上方和下方以及项目之间。这是怎么做到的

Ext.define("App.view.ListDetail", {
    extend: "Ext.Container",
    record: undefined,
    config: {
        layout: 'vbox',
        style: "padding: 5px;",
        scrollable: true,
        //  tpl: ["<div>", "name<br />verified star<br />avatar pic", "</div>"].join(""), // this works fine if I have no items array


        //adding this causes above tpl to no longer render
        items: [
        {
            xtype: 'component',
            tpl: ["<div>", "name<br />verified star<br />avatar pic", "</div>"].join(""),  //this does nothing
        },
        {
            xtype: 'panel',
            //more stuff here

        },
        ] 
    }
});

Ext.define（“App.view.ListDetail”{
扩展：“Ext.Container”，
记录：未定义，
配置：{
布局：“vbox”，
样式：“填充：5px；”，
可滚动：对，
//tpl:[“”，“名称
验证星
化身图片”，“”].加入（“”，//如果我没有项目数组，这可以正常工作
//添加此选项将导致上述tpl不再渲染
项目：[
{
xtype:'组件'，
tpl:[“”，“名称
已验证的明星
头像图片”，“”].加入（“”，//这不起任何作用
},
{
xtype:'面板'，
//这里有更多的东西
},
] 
}
});

不幸的是，您不能将

tpl

和

项

配置混合在一起，因为它们都会更新组件的html

要实现您想要的功能，您需要将另一项添加到

items

配置中，确保将其放置在您想要的位置，然后将自定义

tpl

配置添加到该项中

另外，我相信您知道，但是您需要在

tpl

旁边使用

data

配置，否则它不会显示任何内容

Ext.define("App.view.ListDetail", {
    extend: "Ext.Container",
    record: undefined,
    config: {
        layout: 'vbox',
        style: "padding: 5px;",
        scrollable: true,

        //adding this causes above tpl to no longer render
        items: [
            {
                xtype: 'component',
                tpl: ["<div>", "name<br />verified star<br />avatar pic", "</div>"].join("")  //this does nothing
            },
            {
                xtype: 'panel'
                //more stuff here

            },
            {
                tpl: ["<div>", "name<br />verified star<br />avatar pic", "</div>"].join("") // this works fine if I have no items array
            }
        ]
    }
});

Ext.define（“App.view.ListDetail”{
扩展：“Ext.Container”，
记录：未定义，
配置：{
布局：“vbox”，
样式：“填充：5px；”，
可滚动：对，
//添加此选项将导致上述tpl不再渲染
项目：[
{
xtype:'组件'，
tpl:[“”，“，”名称
已验证的明星
头像图片“，”]。加入（“”//这不起任何作用
},
{
xtype:“面板”
//这里有更多的东西
},
{
tpl:[“”，“名称
验证星
化身图片”，“”]。加入（“”//如果我没有物品数组，这可以正常工作
}
]
}
});