0

カスタムテンプレートを含むポップアップウィンドウを作成したいと思います。基本的な機能は、ヘッダー、フォーム、プログレスバー、ボタンにテキストを含めることです。問題は、カスタムテンプレートが最後にレンダリングされ、ポップアップに実際に収まらないことです。これに対する適切なアプローチは何ですか？どこでも利用できる例はありますか？私の短縮コード：

Ext.define('MyTooltip', {
    extend : 'Ext.window.Window',
    title: 'Mywindow',
    closeAction: 'hide',
    width: 300,
    height: 300,
    layout: 'fit',
    resizable: false,
    draggable: true,
    modal: true,
    items: [],
    data: {
        bar: 'foo'
    },
    tpl : Ext.create('Ext.XTemplate', '<div class="tooltip"><h1>{bar}</h1><div>{form}</div></div>', {compiled: true}),

    initComponent: function(){
        var me = this;

        //Create items
        var progressBar = Ext.create('Ext.ProgressBar', {
            text: 'Progress...',
            width: 250,
            animate: true,
            hidden: true,
            id: 'widget-progressbar'
        });       

        me.items = [
            Ext.create('Ext.form.Panel',{
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                border: false,
                bodyPadding: 10,

                fieldDefaults: {
                    labelAlign: 'top',
                    labelWidth: 100,
                    labelStyle: 'font-weight:bold'
                },
                items: [                   
                    {
                        width:          50,
                        xtype:          'combo',
                        mode:           'local',
                        value:          'Audi',
                        triggerAction:  'all',
                        forceSelection: true,
                        editable:       false,
                        fieldLabel:     'Cars',
                        name:           'cars',
                        queryMode:      'local',
                        store:          ["Audi", "BMW", "Citroen"]
                    },
                    progressBar
                ],

                buttons: [
                    {
                        text: 'Start',
                        handler: function() {
                        },
                        scope: this
                    }
                ]
            })
        ]      

        me.callParent(arguments);      
    }
});

編集

次の最初の回答は、initComponentメソッドを変更しようとしましたが、アイテムをtplまたはhtmlにレンダリングするにはどうすればよいですか？

initComponent: function(){
    (...)

    me.callParent(arguments);

    var tpl = Ext.create('Ext.XTemplate', 
        '<div>'+
            '<div><h3>Available cars</h3>'+
            '<div>{form}'+
            '</div>'+
        '</div>',
        {compiled: true}
    );

    this.html = tpl.apply({
        form: me.form.html
    });
},
4

1 に答える 1

0

カスタムtplプロパティを使用することはしません。それはすべて、この基本クラスをどのように使用することを計画しているかによって異なります。私のプロジェクトではinitComponent()、すべての子ビューに同じツールバーを作成するなど、コンストラクター内に共通ロジックを配置しました。

于 2012-06-18T18:52:00.283 に答える