时间戳

首页 > 解决方案 > 有没有办法可以在本地加载带有最后选择的选项的 Ext JS ComboBox？

javascript - 有没有办法可以在本地加载带有最后选择的选项的 Ext JS ComboBox？

问题描述

当我刷新页面时，我希望能够加载最后在我的 Ext JS ComboBox 中选择的任何选项。目前使用下面的代码，它每次只加载第一个选项“全部”。我知道有一个 localStorage 代理，但不确定如何在这段代码中实现它。这是我下面的内容：

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

假设我选择“已完成”，我希望它在返回此 ComboBox 过滤器所在的位置后再次加载“已完成”。任何帮助都感激不尽！

标签： javascriptextjsextjs4extjs5extjs6

解决方案

您可以为此使用 cookie：

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

推荐阅读