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

时间:2010-08-18 10:24:22

标签: extjs components reusability

我是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];
}

1 个答案:

答案 0 :(得分:0)

当我创建自己的组件时,我这样做:

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();