更改 Ext-JS 组合框上的 valueField 配置？答案

【问题标题】：Change valueField config on Ext-JS combobox?更改 Ext-JS 组合框上的 valueField 配置？
【发布时间】：2013-01-13 12:07:09
【问题描述】：

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

通过cmb.bindStore(newStore) 重置商店效果很好。

设置cmb.displayField = 'newfieldname'; 也很有效。

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

我试过了：

之后做一个cmb.reset()
Ext.apply(...)

是不是因为valueField 是一个必填字段而在某种程度上很特别？是否有一些特殊的方法可以在我不知道的 Ext-JS 组件上设置配置值，或者无法更改“valueField”的值？

仅供参考 - 这是我的代码：

    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

【问题讨论】：

你在使用getValue吗？我使用 Ext 示例运行了您的代码，其 valueField 为“name”，getValue 有效。
你是先用valueField 和displayField 作为'name' 运行它吗？如果我这样做，然后将 valueField 和 displayField 更改为“abbr”，下拉列表会显示缩写，但是当您选择一个时，状态名称最终会显示在组合框中。我会尽量找时间做一个jsfiddle。
我是从具有tpl和displayTpl的示例中做到的，并且成功了。

标签： javascript user-interface extjs combobox config

【解决方案1】：

您快到了，但您在哪里查看错误的属性，因为valueField 不是您的问题，而是displayField。您的确切问题是预配置和缓存的属性。第一个是显示模板，第二个是选择器实例。您需要覆盖模板并删除选择器实例。这是一个工作片段 (JSFiddle)

在示例中，我添加了带有十字的第二个触发器。点击它，ComboBox 就会得到新的值。我建议您为此创建自己的组件，方法是从 ComboBox 扩展并将所有组件包装到需要树参数的重新配置方法中。

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()); })

});

【讨论】：

您的答案是正确的...感谢 JSFiddle。出于好奇，有几个后续问题：为什么 extjs 中的每个配置都没有一个设置器来做正确的事情？如果没有像你这样的人的帮助，我到底应该怎么解决这个问题？这就像隐藏的部落知识......
您好@HDave，感谢您的接受:) 现在回答您的问题；好吧，我想这里的重点是这里发生的初始化量，此外我认为您没有常见问题。请参阅网格上的重新配置功能。这是一种普遍的需求，因此得到了实施。我认为重要的一点是，一旦您掌握了框架，您几乎可以自定义所有内容。但是您只会在 API 中找到常见用途，其余部分您必须深入了解（在源代码中）。但我必须承认，有些事情你需要一些部落知识；）

【解决方案2】：

我不确定是否可以通过这种方式重新配置组合框，但也许您可以创建另一个具有不同存储和 valueField 的组合框。根据您的逻辑隐藏/销毁其中一个。

【讨论】：