在Sencha Touch 2中混合tpl和物品

Question

我有一個可以正常工作的列表詳細視圖 - 它有一個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 

     }, 
     ] 
    } 
}); 

Answer 1

不幸的是，你不能混用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 
      } 
     ] 
    } 
});