javascript 在 extjs 4 中更改组合框的动态表单字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14725984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamic form fields on change of combobox In extjs 4
提问by anupkumar
I have a combobox and now I want to create a dynamic textfields on change of this combo box in Extjs 4 and i am following the Mvc structure of Extjs . Mycombo is below
我有一个组合框，现在我想在 Extjs 4 中更改这个组合框时创建一个动态文本字段，我正在遵循 Extjs 的 Mvc 结构。Mycombo在下面
{
xtype : 'combo',
store : 'product.CategoryComboBox',
name: 'category',
id:'category',
displayField: 'name',
valueField: 'idProductCategory',
multiSelect : false,
fieldLabel: 'Category',
allowBlank: false,
allowQueryAll : false,
forceSelection : true,
typeAhead: true,
triggerAction: 'all',
delimiter : ',',
width: 300,
queryMode:'local',
listeners:{select:{fn:function(combo, value) {}
}
回答by Diego L Espi?eira
You can add a FieldSet like this to your form
您可以将这样的 FieldSet 添加到您的表单中
{
xtype: 'fieldset',
itemId: 'field_container',
layout: 'anchor',
border: 0,
style: { padding: '0' },
fieldDefaults: {
// field defaults
},
defaultType: 'textfield'
}
so when the combobox changes its value you just do the following
因此，当组合框更改其值时，您只需执行以下操作
var container = this.down('fieldset[itemId="field_container"]');
container.removeAll();
var fieldsToAdd = [
{ name: 'field1', xtype: 'textfield', value: 'xxxxxx' },
{ name: 'field2', xtype: 'textfield', value: 'yyyyyyy' }
];
container.add(fieldsToAdd);
this way you can decide what the fieldsToAdd contains based on the combobox value.
通过这种方式，您可以根据组合框值决定 fieldsToAdd 包含的内容。
回答by leaf
Set an id to the textfield, then configure the listenersproperty of your combo as follows :
为文本字段设置一个 id，然后listeners按如下方式配置您的组合的属性：
listeners: {
change: function (combo, value) {
Ext.get('idOfYourTextfield').setValue(value);
}
}
回答by leaf
Field containerallows to have multiple form fields on the same line, so you could do that:
字段容器允许在同一行上有多个表单字段，因此您可以这样做：
{
xtype: 'fieldcontainer',
layout: 'hbox',
items: {
xtype: 'combo',
// your config here
listeners: {
change: function () {
this.up('fieldcontainer').add({
xtype: 'textfield',
value: this.getValue()
});
}
}
}
}
Edit
编辑
I guess you'll need to test if the text field already exists:
我想你需要测试文本字段是否已经存在：
change: function () {
var ct = this.up('fieldcontainer'),
textField = ct.down('textfield');
if (textField) {
textField.setValue(this.getValue());
} else {
ct.add({
xtype: 'textfield',
value: this.getValue()
});
}
}
