ExtJs ComboBox Refresh Selected (Raw) Value

Question

I have a combobox with store items ({ value, text}), and sometimes I need to update the texts. When I do that the selected value (text) is not updated.

Here is the fiddle to illustrate and the code looks like below. We pick an item in the drop down then we click on update text. This will update the text in the drop down but not the combobox raw value.

[Update]: replaced model.set() with 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);
                    }
                }
            ]
        });
    }
});

Answer 1

You have to use

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

to change the value in each record. Your button code has to be:

 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"); 
                });
            }
          }]

Update

You can solve it with that code:

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

I have written a Sencha fiddle for you showing the solution: https://fiddle.sencha.com/#view/editor&fiddle/3cf6

I glad if it helped! Please consider accepting the best answer.