javascript - Extjs 4 扩展表单

Question

您好，我正在尝试扩展一个表单，我可以使用像这样的 commonItems 这样的辅助属性来扩展项目。

Ext.define('PC.view.FormEvento', {
        extend:'Ext.form.Panel',
        id:'FormEvento',
        url:'controller/action',
        bodyPadding:10,
        commonItems:[
            {
                xtype:'hiddenfield',
                name:'id',
                value:0
            },
]});

.. 我像这样结合扩展项的形式

Ext.define('PC.view.FormEventoExtended', {
    extend:'PC.view.FormEvento',
    id:'FormEventoExtended',
    title:'Evento Extended',

    initComponent:function () {
        var me = this;

        Ext.applyIf(me, {
            items:me.commonItems.concat(
                [
                    {
                        xtype:'textfield',
                        fieldLabel:'personal1',
                        name:'personal1'
                    },
                    {
                        xtype:'textfield',
                        fieldLabel:'personal2',
                        name:'personal2'
                    }
                ])
        });
        me.callParent(arguments);
    }
});

我将基本形式的 commonItems 连接到扩展形式的个人项目。在 Ext 4 中是否有一种形式可以做到这一点？

Answer 1

我不知道执行此操作的任何本地方法，但我更喜欢在每个扩展 Component 的类中放入一个方法 buildItems 的“最佳实践”，它返回一个包含项目的数组:

Ext.define('PC.view.FormEvento', {
    extend: 'Ext.form.Panel',
    id: 'FormEvento',
    url: 'controller/action',
    bodyPadding: 10,

    initComponent: function () {
        this.items = buildItems();

        this.callParent(arguments);
    },

    buildItems: function () {
        return [
            {
                xtype: 'hiddenfield',
                name: 'id',
                value:0
            },
        ];
    }
]});

当您从此类扩展时，更改项目变得非常简单，只需覆盖 buildItems 方法、调用父类并添加或插入其他项目:

Ext.define('PC.view.FormEventoExtended', {
    extend: 'PC.view.FormEvento',
    id: 'FormEventoExtended',
    title: 'Evento Extended',

    buildItems: function () {
        var items = this.callParent(arguments);

        return Ext.Array.push(items, [
            {
                xtype:'textfield',
                fieldLabel:'personal1',
                name:'personal1'
            },
            {
                xtype:'textfield',
                fieldLabel:'personal2',
                name:'personal2'
            }
        ]);
    }
});

当项目数量增加时，创建额外的方法是有意义的，例如buildFieldsetAddressItems。恕我直言，这样做的好处是您的项目列表更具可读性。