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 の上に配置されます。

ここに画像の説明を入力

また、テンプレートに設定された tpl 値を使用して項目配列にパネルを追加しようとしましたが、これにより HTML がまったくレンダリングされません。

テンプレートを使用する方法を知っている人はいますが、下部にボタンがありますか? あなたの答えが、正しいクラス名のボタンをテンプレート html に含めることだけである場合、それをコントローラーにリンクするにはどうすればよいですか? (通常、itemId 構成プロパティを使用します)。

乾杯、

ジェームズ

4

1 に答える 1

2

2 つのアプローチには違いがあります。最初のアプローチには、html を含むパネルとボタンを含むパネルがあります。2 番目のアプローチには、html とボタンの両方を含むパネルがありますボタンの下の html)。

一番下のソリューションで 2 つのパネルを使用すると、うまくいくはずです。

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 に答える