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 的“最佳实践”，它返回一个包含items的数组： / p>

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 。这样做的好处是您的项目列表更易读，imho。

Answer 2

您可以在PC.view.FormEvento构造函数中编写类似的内容：

initComponent: function() {
   var me = this;

   me.items.push({
      xtype:'hiddenfield',
      name:'id',
      value:0
   });
   me.callParent(arguments);
}

当调用此构造函数时，对象将已在子对象中配置了项。

Extjs 4扩展表单

2 个答案: