Question

我将以下 object literal 发送到Ext JS Ext.FormPanel。

此表单包含多个表单字段，例如“客户联系”，“联系原因”等。

其中每一项都必须是下拉列表，而不是现在的简单文字字段。

我将第一个字段转换为下拉列表：

var form_customer_contact = new Ext.FormPanel({
    frame:true,
    labelWidth: 110,
    labelAlign: 'right',
    bodyStyle:'padding:0',
    width: 300,
    height: 600,
    autoScroll: true,
    itemCls: 'form_row',
    defaultType: 'displayfield',
    items: [{
            fieldLabel: 'Customer Contact',
            name: 'customerContact',
            allowBlank:false,
            value: 'Mr. Smith'
        },{
            fieldLabel: 'Reason for Contact',
            width:          150,
            xtype:          'combo',
            mode:           'local',
            value:          '1',
            triggerAction:  'all',
            forceSelection: true,
            editable:       false,
            fieldLabel:     'Produkt',
            name:           'reason',
            hiddenName:     'reason',
            displayField:   'name',
            valueField:     'value',
            store:          new Ext.data.JsonStore({
                fields : ['name', 'value'],
                data   : [
                    {name : 'data correction',   value: '1'},
                    {name : 'new contact',  value: '2'},
                    {name : 'missing information', value: '3'}
                ]
            })
        }, {
            fieldLabel: 'Communication',
            name: 'communication',
            value: 'test'
        }, {
            fieldLabel: 'Related Order',
            name: 'relatedOrder',
            value: 'test'
        }, {
            fieldLabel: 'Date/Time',
            name: 'dateTime',
            value: 'test'
        }, {
            fieldLabel: 'Notes',
            name: 'notes',
            value: 'test'
        }
    ]
});

现在所有其他字段也需要转换为下拉列表，但由于代码的 80％每个都保持不变，我想简单地说调用功能，例如像这样：

getField('Reason for Contact', 'reason', {'data correction', 'new contact', 'missing information'})
getField('Communication', 'communication', {'telephone', 'fax', 'email'})

在Javascript中创建函数或对象的最佳方法是什么，可以如上所述调用，以减少此示例中的代码膨胀？

Answer 1

您可以创建一个工厂函数来执行此操作：

var createCombo = function(label, name, values) {
    var i, data = [];

    for(i = 0; i < values.length; i++) {
        data.push({ name: values[i], value: i+1+'' });
    }   

    return new Ext.form.ComboBox({
        fieldLabel:     label,
        name:           name,
        width:          150,  
        mode:           'local',
        value:          '1',
        triggerAction:  'all',
        forceSelection: true,
        editable:       false,
        displayField:   'name',
        valueField:     'value',
        store:          new Ext.data.JsonStore({
            fields : ['name', 'value'],
            data   : data
        })            
    });
};

然后在项列表中，将其命名为：

createCombo('Reason for Contact', 'reason', ['data correction', 'new contact', 'missing information'])

Answer 2

通过创建xtypes扩展可重用组件。 http://www.sencha.com/learn/Manual:Component:Extending_Ext_Components

如何将重复代码从对象文字放入函数并使用参数调用？

2 个答案: