更改ext-JS组合框上的valueField配置？ [英] Change valueField config on Ext-JS combobox?

问题描述

我在表单上有一个组合框，需要重置其存储区以及'displayField'和'valueField'配置。

I have a combobox on a form where I need to reset its store along with the 'displayField' and 'valueField' configs.

通过<$

设置 cmb.displayField ='newfieldname'; C $ c> cmb.bindStore（newStore） 也很好。

Setting cmb.displayField = 'newfieldname'; also works great.

但是， cmb.valueField ='newValField'; 不行。组合显示正确的东西，但当我选择一个项目，该值使用旧的valueField值，而不是新的。

However, cmb.valueField = 'newValField'; does not work. The combo displays the right stuff, but when i select an item, the value is using the old valueField value, not the new one.

我试过：

• 之后执行 cmb.reset（）


• Ext.apply（...）

• doing a cmb.reset() afterwards
• Ext.apply(...)

code> valueField 有点特别，因为它是一个必填字段？是否有一些特殊的方法来设置一个配置值在Ext-JS组件我不知道或者是不可能改变'valueField'的值？

Is it because valueField is somehow special because it is a required field? Is there some special way to set a config value on an Ext-JS component I don't know about or is it just not possible to change the value of 'valueField'?

FYI - 这是我的代码：

FYI - Here is my code:

    comp.bindStore(Ext.create('Ext.data.Store', {
        fields : [ {
            name : 'abbr',
            type : 'string'
        }, {
            name : 'name',
            type : 'string'
        }, {
            name : 'slogan',
            type : 'string'
        } ],
        data : [ {
            "abbr" : "AL",
            "name" : "Alabama",
            "slogan" : "The Heart of Dixie"
        }, {
            "abbr" : "AK",
            "name" : "Alaska",
            "slogan" : "The Land of the Midnight Sun"
        }, {
            "abbr" : "AZ",
            "name" : "Arizona",
            "slogan" : "The Grand Canyon State"
        }, {
            "abbr" : "AR",
            "name" : "Arkansas",
            "slogan" : "The Natural State"
        }, ]
    }));

    comp.displayField = 'abbr';    // THIS WORKS
    comp.valueField = 'abbr';      // THIS DOESNT WORK

推荐答案

其中查看错误的属性原因 valueField 不是你的问题，它是 displayField 。您的确切问题是预配置和缓存的属性。第一个是显示模板，第二个是选择器实例。您需要覆盖模板并删除选择器实例。这里有一个工作剪辑（ JSFiddle ）

You are nearly there but you where looking at the wrong property cause valueField is not your issue, it is displayField. Your exact problem are preconfigured and cached properties. The first is the display template the second is the picker instance. You need to override the template and remove the picker instance. Here's a working snipped (JSFiddle)

在示例中，我添加了一个十字的第二个触发器。命中它和ComboBox得到新的值。我建议你通过扩展ComboBox创建自己的组件，并将所有的组件包装到一个期望树参数的重新配置方法中。

In the example I added a second trigger with a cross. Hit it and the ComboBox get the new values. I recommend you to create your own component for this by extending from ComboBox and wrap all into a reconfigure method that would expect tree parameters.

Ext.onReady(function() {
    // The data store containing the list of states
    var states = Ext.create('Ext.data.Store', {
        fields: ['abbr', 'name'],
        data : [
            {"abbr":"AL1", "name":"Alabama1"},
            {"abbr":"AK1", "name":"Alaska1"},
            {"abbr":"AZ1", "name":"Arizona1"}
            //...
        ]
    });

    var comp = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'Choose State',
        id: 'combo-ident',
        trigger2Cls: 'x-form-clear-trigger',
        onTrigger2Click: function (args) {
            var comp = Ext.getCmp('combo-ident');
            comp.clearValue();
            comp.bindStore(Ext.create('Ext.data.Store', {
                fields : [ {
                    name : 'abbr',
                    type : 'string'
                }, {
                    name : 'name',
                    type : 'string'
                }, {
                    name : 'slogan',
                    type : 'string'
                } ],
                data : [ {
                    "abbr" : "AL",
                    "name" : "Alabama",
                    "slogan" : "The Heart of Dixie"
                }, {
                    "abbr" : "AK",
                    "name" : "Alaska",
                    "slogan" : "The Land of the Midnight Sun"
                }, {
                    "abbr" : "AZ",
                    "name" : "Arizona",
                    "slogan" : "The Grand Canyon State"
                }, {
                    "abbr" : "AR",
                    "name" : "Arkansas",
                    "slogan" : "The Natural State"
                }, ]
            }));

            comp.displayField = 'abbr';
            comp.valueField = 'name';
            comp.displayTpl = new Ext.XTemplate(
                '<tpl for=".">' +
                    '{[typeof values === "string" ? values : values["' + comp.displayField + '"]]}' +
                    '<tpl if="xindex < xcount">' + comp.delimiter + '</tpl>' +
                '</tpl>'
            );
            comp.picker = null;
        },
        store: states,
        queryMode: 'local',
        displayField: 'name',
        valueField: 'abbr',
        renderTo: Ext.getBody()
    });
    comp.on('select', function(){ console.log(arguments); console.log(arguments[0].getSubmitValue()); })

});

这篇关于更改ext-JS组合框上的valueField配置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！