extjs - 创建自定义组件并重新使用它

Question

我是 ext 的新手，我想创建一个包含表单的自定义组件，并通过将其注册为 xtype 来使用它，我想要：

MyComponent = Ext.extend(Ext.FormPanel, {
initComponent: function () {
    Ext.apply(this, {
        labelWidth: 50,
        // label settings here cascade unless overridden
        items: [{
            xtype: 'label',
            text: 'Name'
        },

        {
            xtype: 'textfield',
            label: 'First Name',
            name: 'firstname',

            id: 'firstname',
            allowBlank: true
        },
        {
            xtype: 'label',
            text: 'Last Name',
            style: {
                'color': 'black',
                'font-size': '10px'
            }
        },
        {
            xtype: 'textfield',
            label: 'lastname',

            name: 'lastname',
            id: 'lastname'
        },
        {
            xtype: 'label',
            text: 'Teams'
        },
        {
            xtype: 'button',

            text: 'Save',

            handler: function () {},
            id: 'save',
        },
        {
            xtype: 'button',
            text: 'cancel',
            handler: function () { //Ext.Msg.alert('Status', 'Changes saved successfully.');
                Ext.example.msg(' Click', 'You cancelled');
            }
        }
        ]
    });
    MyComponent.superclass.initComponent.apply(this, arguments);
},
onRender: function () {
    MyComponent.superclass.onRender.apply(this, arguments);
}
});

Ext.reg('mycomponentxtype', MyComponent); /*   paste in your code and press Beautify button   */
if ('this_is' == /an_example/) {
    do_something();
} else {
    var a = b ? (c % d) : e[f];
}

Answer 1

当我创建自己的组件时，我会这样做：

Ext.define('MyApp.view.dialog.MyDialog', {
    'extend' : 'Ext.window.Window',
    'alias' : 'widget.MyDialog',//declare xour own xtype here
    'title' : 'My Dialog',
    'items' : [{
        'xtype' : 'textfield',
        'fieldLabel' : 'Surename',
        //other config here 
    }] // other items here
});

然后你可以说：

Ext.widget('MyDialog').show();