ExtJs ComboBox 刷新选定（原始）值答案

【问题标题】：ExtJs ComboBox Refresh Selected (Raw) ValueExtJs ComboBox 刷新选定（原始）值
【发布时间】：2021-03-13 01:37:07
【问题描述】：

我有一个包含商店项目 ({ value, text}) 的组合框，有时我需要更新文本。当我这样做时，所选值（文本）不会更新。

这里是the fiddle to illustrate，代码如下所示。我们在下拉列表中选择一个项目，然后单击更新文本。这将更新下拉列表中的文本，但不会更新组合框的原始值。

[更新]：将 model.set() 替换为 store.loadData()

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create("Ext.form.Panel", {
            renderTo: Ext.getBody(),
            width: 300,
            height: 200,
            bodyPadding: 20,
            layout: "form",

            items: [
                {
                    xtype: "combobox",
                    itemId: "pickmin",
                    fieldLabel: "Test",
                    queryMode: "local",
                    store: {
                        fields: ["value", "text"],
                        data: [
                            { value: 1, text: "Text 1" },
                            { value: 2, text: "Text 2" },
                            { value: 3, text: "Text 3" },
                            { value: 4, text: "Text 4" },
                        ]
                    }
                }
            ],

            buttons: [
                {
                    text: "Update Text",
                    handler: function (btn) {
                        const combo = btn.up("form").down("#pickmin");
                        const newData = []
                        combo.store.each(r => {
                            newData.push({
                                value: r.data.value,
                                text: r.data.text + "0"
                            });
                        });
                        combo.store.loadData(newData);
                    }
                }
            ]
        });
    }
});

【问题讨论】：

标签： extjs extjs7

【解决方案1】：

你必须使用

 r.set("text", r.data.text + "0");

更改每条记录中的值。您的按钮代码必须是：

 buttons: [{
            text: "Update Text",
            handler: function (btn) {
                const combo = btn.up("form").down("#pickmin");
                combo.store.each(r => {
                    r.set("text", r.data.text + "0"); 
                });
            }
          }]

更新

您可以使用该代码解决它：

combo.getStore().on("load",
    function (store, records, successful, operation, eOpts) {
       combo.setValue(combo.getValue());
    },
    this
)

我已经为你写了一个 Sencha fiddle 来展示解决方案：https://fiddle.sencha.com/#view/editor&fiddle/3cf6

如果有帮助我很高兴！请考虑接受最佳答案。

【讨论】：

如果我改用 store reload() 会怎样？我没有解释说它不仅仅是可以更新的文本。我们也可以更改值，但我要解决的情况是所选项目仍在商店中，但现在有不同的文本值。
我已经用解决方案更新了我的答案

【解决方案2】：

您忘记为组合框设置 valueField 和 displayField 属性组合框属性应该是这样的

 xtype: "combobox",
 itemId: "pickmin",
 valueField:"value",
 displayField :"text"

现在可以从组合框中获取 rawValue

【讨论】：

默认的valueField和displayField分别为“value”和“text”；即使我设置了这些，当我点击按钮时文本仍然没有更新。