Question

我有一个列表详细信息视图，工作正常 - 它有一个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

        },
        ] 
    }
});

Answer 1

很遗憾，您无法将tpl和items配置混合在一起，因为它们都会更新组件的html。

要实现您的目标，您需要在items配置中添加其他项目，确保将其放置在所需位置，然后将自定义tpl配置添加到该项目中。< / p>

此外，我确定您知道，但您需要在data旁边使用tpl配置，否则它不会显示任何内容。

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
            }
        ]
    }
});

在Sencha Touch 2中混合tpl和项目

1 个答案: