0

我正在尝试使用 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 配置属性）。

干杯，

詹姆士

4

1 回答 1

2

您的两种方法之间存在差异：第一种方法有一个面板，其中包含一个带有 html 和按钮的面板。第二种方法有一个包含 html 和按钮的面板（我猜然后 sencha puts按钮下的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'
            }
        ]
    }
});
于 2012-07-10T18:31:52.997 回答