Question

我想创建一个弹出窗口，它会有一些自定义模板。基本功能是在标题中包含一些文本，然后是表单，进度条和按钮。问题是我的自定义模板在最后呈现，并不真正适合弹出窗口。这是什么方法？在任何地方可以找到任我缩短的代码：

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
    });
},

Answer 1

我不会使用自定义tpl属性。这完全取决于您打算如何使用此基类。在我的项目中，我将公共逻辑放在initComponent()构造函数中 - 就像为所有子视图创建相同的工具栏一样。

Ext窗口带有自定义模板

1 个答案: