GeoExt：通过更改字段名称更改过滤器答案

【问题标题】：GeoExt: Change Filter via changing field nameGeoExt：通过更改字段名称更改过滤器
【发布时间】：2017-08-20 07:05:50
【问题描述】：

在 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 过滤器时没有使用新的字段名称。

任何提示或解决方案？

【问题讨论】：

标签： extjs openlayers geoext

【解决方案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());
            }
        }
    }
}],

【讨论】：

【解决方案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');

【讨论】：