我在向ExtJS表单中添加字段或从中删除字段时遇到了麻烦。我的用例如下:
在表单上提供一组单选按钮。根据选择哪个单选按钮,显示一组不同的表单字段。
我对ExtJS并不十分熟悉,但是我正在做的是缓存要添加/删除的字段,并在触发单选按钮更改事件时从表单中添加/删除它们。这是我的代码的简化版本:
var textFieldA = new Ext.form.TextField({
fieldLabel: 'Text Field A',
name: 'text_field_a',
allowBlank: false
});
var textFieldB = new Ext.form.TextField({
fieldLabel: 'Text Field B',
name: 'text_field_b',
allowBlank: false
});
var form = new Ext.FormPanel({
autoScroll: true,
bodyStyle: 'padding: 5px 5px 0',
border: false,
frame: true,
layout: 'form',
items: [{
xtype: 'fieldset',
fieldLabel: 'Fieldset',
autoHeight: true,
items: [{
xtype: 'radiogroup',
fieldLabel: 'Show text field',
columns: 1,
vertical: true,
items: [
{
xtype: 'radio',
boxLabel: 'Show field a',
name: 'field_to_show',
inputValue: 'a'
},
{
xtype: 'radio',
boxLabel: 'Show field b',
name: 'field_to_show',
inputValue: 'b'
}
],
listeners: {
'change': {
fn: function(radioGroup, selectedRadio) {
switch (selectedRadio.getGroupValue())
{
case 'a':
radioGroup.findParentByType('fieldset').remove(textFieldB);
radioGroup.findParentByType('fieldset').add(textFieldA);
break;
case 'b':
radioGroup.findParentByType('fieldset').remove(textFieldA);
radioGroup.findParentByType('fieldset').add(textFieldB);
break;
}
radioGroup.findParentByType('fieldset').doLayout();
}
}
}
}]
}]
});
form.render('container');
第一次选择每个无线电时,此方法有效,但随后的选择却不起作用,正如我期望的那样。在Firefox中,会引发JavaScript错误:
操作不受支持”代码:“ 9
[中断此错误]返回!!(p.compareDocumentPosition(c)&16);在ext-base-debug-w-comments.js中
在Chrome中,只有标签会添加到表单中。
我期望它的工作方式不正确吗?
最佳答案
我不一定会采用添加/删除文件的方法-为什么不给每个字段一个ID(也是表单字段的一种好习惯),方法是:
id:'fieldname'
然后使用以下方法隐藏/显示适当的字段:
Ext.getCmp('fieldname').hide()
Ext.getCmp('fieldname').show()
关于javascript - 添加和删除ExtJS表单字段时遇到问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/4026956/