Sencha觸摸 - 在模板下面的顯示按鈕

Question

我試圖從使用Sencha Touch 2框架的模板創建面板，但我遇到了一些麻煩。我想要做的是顯示HTML模板，然後下方的按鈕 - 這一點使用HTML，而不是一個模板的一個例子是：

Ext.define('GS.view.Home', { 

extend: 'Ext.Panel', 

config: { 
    title: 'Home', 
    items: [ 
     { 
      xtype: 'panel', 
      html: [ 
       '<img src="resources/images/someImage.gif"/>', 
       '<h1>A Header</h1>', 
       "<p>some text</p>" 
      ].join("") 
     }, 
     { 
      xtype: 'button', 
      text: 'Click Me', 
      ui: 'forward' 
     } 
    ] 
} 
}); 

渲染時，看起來像這樣：

我想要做的是使用模板加載面板，而不是在底下有一個按鈕。我的代碼目前看起來是這樣的：

var tpl = new Ext.XTemplate(
    '<img src="resources/images/someImage.gif"/>', 
    '<h1>A Header</h1>', 
    '<p>some text</p>', 
    { 
     // XTemplate configuration: 
     compiled: true 
    } 
); 
Ext.define('GS.view.Home', { 

    extend: 'Ext.Panel', 
    xtype: 'home', 
    config: { 
     title: 'Home', 
     tpl: tpl, 
     data: [], 
     items: [ 

      { 
       xtype: 'button', 
       text: 'Click Me', 
       ui: 'forward' 
      } 
     ] 
    } 
}); 

但是這導致按鈕被放置在模板上面的HTML：

我也嘗試添加一個面板項目陣列設置爲模板的tpl值，但這不會導致任何HTML呈現。

任何人都知道我可以如何使用模板，但底部仍然有一個按鈕？如果你的答案只是在模板HTML中包含一個帶有正確類名的按鈕，那麼我該如何將它連接回控制器？ （我通常使用itemId配置屬性）。

乾杯，

詹姆斯

Answer 1

還有就是你的兩種方法之間的區別：第一個具有面板，包含使用HTML中的潘內爾，按鈕..第二個有一個包含html和按鈕的面板（並且我猜sencha將html放在按鈕下面）。

在底部的解決方案使用兩個面板應該做的伎倆：

Ext.define('GS.view.Home', { 

    extend: 'Ext.Panel', 
    xtype: 'home', 
    config: { 
     title: 'Home', 
     items: [ 
      { 
       xtype: 'panel', 
       tpl: tpl, 
       data: [], 
      }, 

      { 
       xtype: 'button', 
       text: 'Click Me', 
       ui: 'forward' 
      } 
     ] 
    } 
});