GeoExt:通过更改字段名称来更改筛选器

Question

在GeoExt 2中，我有一个带有一个字段和2个单选按钮的表单。我编码了单选按钮以更改该字段的名称以符合 GeoExt 的约定。

items: [
{
xtype: "numberfield",
itemId: 'parcel',
name: 'parcelAtt__ge',
fieldLabel: 'Parcel Number:'
},
{
xtype: 'radiogroup',
fieldLabel: 'Search type:',
columns: 2,
vertical:true,
items: [
{
boxLabel: 'greater than',
name: 'option',
inputValue: '1',
submitValue: false,
checked: true,
listeners: {
change: function (field, newValue, oldValue) {
if (newValue) myPanel.down('#parcel').inputEl.dom.name = 'parcelAtt__ge';
}
}
},
{
boxLabel: 'lower then',
name: 'option',
inputValue: '2',
submitValue: false,
listeners: {
change: function (field, newValue, oldValue) {
if (newValue) myPanel.down('#parcel').inputEl.dom.name = 'parcelAtt__le';
}
}
},
]
}
],

我可以确认(通过Firebug(上面的代码更改了HTML中的字段名称，但是在提交表单时，GeoExt在设置OpenLayers过滤器时不会使用新的字段名称。

任何提示或解决方案？

Answer 1

除非您的表单中有文件上传字段，否则 ExtJS 根本不使用 HTML 表单提交，因此不使用输入元素的名称。

两种可能的解决方案：

您可以尝试是否可以在字段上使用setName函数：

myPanel.down('#parcel').setName('parcelAtt__le')

或者，您必须使用两个具有预定义名称的字段，并在它们之间同步值：

items: [{
xtype: "numberfield",
itemId: 'parcelGe',
name: 'parcelAtt__ge',
fieldLabel: 'Parcel Number:'
},{
xtype: "numberfield",
hidden: true,
itemId: 'parcelLe',
name: 'parcelAtt__le',
fieldLabel: 'Parcel Number:'
},{
xtype: 'radiogroup',
fieldLabel: 'Search type:',
columns: 2,
vertical:true,
simpleValue: true,
items: [{
boxLabel: 'greater than',
name: 'option',
inputValue: 'ge',
submitValue: false,
checked: true
},{
boxLabel: 'lower than',
name: 'option',
inputValue: 'le',
submitValue: false
}],
listeners: {
change: function (field, newValue, oldValue) {
var leField = myPanel.query('#parcelLe'),
geField = myPanel.query('#parcelGe');
if(newValue=='le') {
leField.show();
geField.hide();
leField.setValue(geField.getValue());
}
else if(newValue=='ge') {
geField.show();
leField.hide();
geField.setValue(leField.getValue());
}
}
}
}],

Answer 2

我发现了我的错误。我不应该直接更改 Dom 元素。相反，我不得不向字段添加一个 setName 方法，如下所示(令人惊讶的是，默认情况下，Ext JS 5.1 仅提供 getName 方法(：

Ext.define('MyApp.form.field.Base', {
override: 'Ext.form.field.Base',
setName: function(name) {
this.name = name;
}
});

然后在单选按钮的事件处理程序中使用该方法，如下所示：

if (newValue) myPanel.down('#parcel').setName('parcelAtt__ge');