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