Sencha Touch - 模板下方的显示按钮

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上方：

我还尝试将一个面板添加到items数组中，并将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'
            }
        ]
    }
});