1

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

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

        },
        ] 
    }
});
4

1 回答 1

3

不幸的是，您不能将配置混合在一起tpl，items因为它们都会更新组件的 html。

要实现您想要的，您需要将另一个项目添加到items配置中，确保将其放置在您想要的位置，然后将您的自定义tpl配置添加到该项目中。

另外，我确定您知道，但是您需要在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
            }
        ]
    }
});
于 2012-02-12T20:18:22.127 回答