extjs how to determine if combobox change event was fire by user

Question

I am trying Extjs and I am trying this scenario: I have a combobox which will display the first level in a hierarchy by default. That is to say:

0001
0001.0002
0001.0002.0004
0001.0003
0005

First level would be 0001 and 0005. If I select 0001 it goes into the restapi and fetches 0001.0002 and 0001.0003. That behavior is working as expected. My problem is this: I have to show the fetched data in this very same combobox and to keep selected the item I chose first. What my combo is doing is loading the data, but unselecting everything. Here is what I did so far:

var store = Ext.create('mycomponents.store.mystore', {});
var selectedText = '';
var autoSelec = false;

Ext.define('mycomponents.view.myview', {
    extend: 'Ext.container.Container',
    id: 'myview',
    alias: 'widget.newComponent',
    xtype: 'myview',
    items: [
        {
            xtype: 'combobox',
            reference: 'levels',
            publishes: 'value',
            fieldLabel: 'Options',
            displayField: 'val',
            valueField: 'val',
            queryMode: 'local',
            lastQuery: '',
            emptyText: 'Please select...',
            anyMatch: true,
            anchor: '-15',
            store: store,
            minChars: 0,
            typeAhead: true,
            triggerAction: 'all',
            selectOnFocus:true,
            typeAheadDelay: 100,
            labelWidth: 100,
            labelAlign: 'right',
            width: 265,
            pageSize: 0,
            clearFilterOnBlur: true,
            defaultValue: 0,
            matchFieldWidth: false,
            allowBlank: false,
            forceSelection: true,
            enableKeyEvents: true,
            onTrigger2Click: function (args) {
                this.select(this.getStore().getAt(0));
            },
            listeners: {
                select: function (combo, record, eOpts) {
                    console.log('Select', combo, record, eOpts);
                },

                change: function (item, newValue, oldValue) {
                    if (!autoSelec && newValue !== oldValue && !store.isLoading() && item.selection) {
                        if (newValue) {
                            selectedText = newValue;
                        }

                        store.proxy.extraParams = {
                            sort: 'clave',
                            'filter[activo]': true,
                            'filter[idpadre]': item.selection.data.idelemento
                        };

                        store.load({
                            callback: function () {
                                var items = store.data.items;

                                if (items.length) {
                                    console.log('MY STORE >>>', items);
                                }

                                autoSelec = true;
                            }
                        });
                    }
                }
            }
        }
    ],

    initComponent: function () {
        this.callParent(arguments);
        var that = this;
    }
});

How can I set the previous chosen item as the selectt item after the store load and therefore not to allow the reload of the store?

Do your work in the select event, instead of the change, select won't fire when you set it programatically — Juan Mendes
@JuanMendes how can I put the last selected item in the top of the combobox? — assembler

assembler assembler · Accepted Answer · 2019-04-30T19:50:06

I found a solution after of spent all day long of searching and reading. Maybe this could sound very naive, but I'm starting with Extjs.

Here is the solution:

var items = store.data.items;
store.insert(0, mypreviousElement);
item.setValue(items[0]);
item.focus();

from here, item is my combo... this is a callback after store.load, hope this might help.

extjs how to determine if combobox change event was fire by user

1 Answers