GeoExt:通过更改字段名来更改过滤器

Question

在GeoExt 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方法，如下所示(令人惊讶的是，ExtJS5.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');