[英]How to put repetitive code from an object literal into a function and call with parameters?
I have the following object literal being sent to an Ext JS Ext.FormPanel. 我将以下对象文字发送到Ext JS Ext.FormPanel。
This form has a number of form fields , eg "Customer Contact", "Reason for Contact", etc. 此表单有许多表单字段 ,例如“客户联系人”,“联系原因”等。
Each of these need to be of type dropdown instead a simple text field as they are now. 这些中的每一个都需要是类型下拉列表而不是现在的简单文本字段 。
I converted the first field to a dropdown: 我将第一个字段转换为下拉列表:
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'
}
]
});
Now all the other fields need to be converted to a dropdown as well, but since about 80% of the code will remain the same each, I want to simply call a function , eg like this: 现在所有其他字段也需要转换为下拉列表,但由于大约80%的代码将保持相同,我想简单地调用一个函数 ,例如:
getField('Reason for Contact', 'reason', {'data correction', 'new contact', 'missing information'})
getField('Communication', 'communication', {'telephone', 'fax', 'email'})
What is the best way to create a function or object in Javascript which can be called as described above in order to reduce the code bloat in this example? 在Javascript中创建函数或对象的最佳方法是什么,可以如上所述调用以减少此示例中的代码膨胀?
You could create a factory function to do that like this: 您可以创建一个工厂函数来执行此操作:
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
})
});
};
Then in your list of items call it like this: 然后在您的项目列表中调用它如下:
createCombo('Reason for Contact', 'reason', ['data correction', 'new contact', 'missing information'])
Extend reusable components by creating xtypes. 通过创建xtypes扩展可重用组件。 http://www.sencha.com/learn/Manual:Component:Extending_Ext_Components http://www.sencha.com/learn/Manual:Component:Extending_Ext_Components
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.