javascriptextjsextjs4extjs5extjs6

Is there a way you can load a Ext JS ComboBox with the last selected option locally?


I want to be able to load whatever option was selected last in my Ext JS ComboBox when I refresh the page. Currently with this code below it just loads the first option 'all' every time. I know there is a localStorage proxy but unsure how to implement it into this code. Here is what I have below:

let stageFilterCombo = Ext.create("Ext.form.field.ComboBox", {
                height: 38,
                cls: "arrowCls ro-dropdown-ui br-5 stageFilterDropdownUI",
                labelAlign: 'left',
                itemId: "PACK_STAGE_FILTER_COMBO",
                labelSeparator: "",
                labelWidth: 15,
                originalIdx: 2,
                hidden: isPackForEntity,
                margin: '0 15',
                displayField: "name",
                valueField: "value",
                editable: false,
                width: 190,
                name: "groupBy",
                value: "all",
                store: Ext.create("Ext.data.Store", {
                    fields: ["name", "value"],
                    data: [{
                            "name": "Show : All Packs",
                            "pickerName": "All Packs",
                            "value": "all"
                        }, {
                            "name": "Show: Ongoing",
                            "pickerName": "Ongoing",
                            "value": "ongoing"
                        }, {
                            "name": "Show: Completed",
                            "pickerName": "Completed",
                            "value": "completed"
                        }
                    ]
                }),
}

Say I select 'completed', I would like it to load 'completed' again once I return to where this ComboBox filter is. Any help will be much appreciated!


Solution

  • You may use cookie for that:

    Ext.onReady(function () {
        var nextMonth = new Date();
        nextMonth.setMonth(nextMonth.getMonth() + 1);
        var _myCookie = Ext.util.Cookies.get('ComboLastSelected');
    
        var states = Ext.create('Ext.data.Store', {
            fields: ['abbr', 'name'],
            data: [{
                    "abbr": "AL",
                    "name": "Alabama"
                }, {
                    "abbr": "AK",
                    "name": "Alaska"
                }, {
                    "abbr": "AZ",
                    "name": "Arizona"
                }
            ]
        });
    
        var combo = Ext.create('Ext.field.ComboBox', {
            fieldLabel: 'Choose State',
            width: 200,
            store: states,
            queryMode: 'local',
            queryDelay: 100,
            displayField: 'name',
            valueField: 'abbr',
            minChars: 2,
            value: _myCookie ? _myCookie : '',
            forceSelection: true,
            renderTo: Ext.getBody(),
            matchFieldWidth: false
        });
    
        combo.on('select', function () {
            Ext.util.Cookies.set('ComboLastSelected', this.getValue(), nextMonth);
        });
    
    });
    

    https://fiddle.sencha.com/fiddle/3f2i