组合框应该记住最后一次选择 [英] combobox should remember the last selection

问题描述

下面是我显示三个组合框的代码，这三个组合框是按严重程度排列的过滤、开始发布和结束发布。当我刷新页面时，我希望组合框记住之前选择的内容。现在，它在两个组合框中都显示了当前版本。 对此有任何帮助

            launch: function() {
                var that = this;
                this.down('#SevFilter').add({
                    xtype: 'rallyattributecombobox',
                    cls: 'filter',
                    itemId: 'severity',
                    model: 'Defect',
                    labelWidth: 117,
                    fieldLabel : 'Filter By Severity:',
                    field: 'Severity',
                    allEntryText: '-- ALL --',
                    allowNoEntry: true,
                    _insertNoEntry: function(){
                        var record;
                        var doesNotHaveAllEntry = this.store.count() < 1 || this.store.getAt(0).get(this.displayField) !== this.allEntrylText;
                        if (doesNotHaveAllEntry) {
                            record = Ext.create(this.store.model);
                            console.log("record value", record);
                            record.set(this.displayField, this.allEntryText);
                            record.set(this.valueField, "-1");
                            this.store.insert(0, record);
                        }
                        /*var doesNotHaveNoEntry = this.store.count() < 2 || this.store.getAt(1).get(this.displayField) !== this.noEntryText;
                        if (doesNotHaveNoEntry) {
                            record = Ext.create(this.store.model);
                            record.set(this.displayField, this.noEntryText);
                            record.set(this.valueField, null);
                            this.store.insert(1, record);
                        }*/
                    },
                    listeners: {
                        //ready: this._onSevComboBoxLoad,
                        select: this._onSevComboBoxSelect,
                        scope: this
                    }
                });     
                var button = this.down('#goButton');
                button.on('click', this.goClicked, this);
                this.down('#SevFilter').add({
                    xtype: 'rallyreleasecombobox',
                    //multiSelect: true,
                    itemId: 'priorityComboBox',
                    fieldLabel: 'Release Start:',
                    model: 'release',
                    width: 400,
                    valueField: 'ReleaseStartDate',
                    displayField: 'Name',
                    //  multiSelect: true,
                    //field: 'Name',
                    _removeFunction: function(){
                        console.log("this.store");
                    },
                    listeners: {
                        //select: this._onSelect,
                        select: this._onFirstReleaseSelect,
                        scope: this
                    }
                });                     
                this.down('#SevFilter').add({
                    xtype: 'rallyreleasecombobox',
                    itemId: 'priorityComboBox2',
                    fieldLabel: 'Release End:',
                    model: 'release',
                    //multiSelect: true,
                    stateId: 'rally.technicalservices.trend.defect.release',
                    stateful: true,
                    stateEvents: ['change'],
                    width: 400,
                    valueField: 'ReleaseDate',
                    displayField: 'Name',
                    listeners: {
                        change: function(box) {
                            var start_date = this.down('#priorityComboBox2').getDisplayField();
                            this.logger.log(start_date);
                        },  
                        ready: this._removeFutureReleases,  
                        select: this._onSecondReleaseSelect,
                        //  ready: this._onLoad,
                        scope: this
                    },
                });
            },

推荐答案

在javascript中，您可以使用localstorage。

以下是一个应用程序示例，刷新页面时会在相应的组合框中保留State和Release选项：

Ext.define('CustomApp', {
    extend: 'Rally.app.App',
    componentCls: 'app',
    items: [
        {html:'Select a Filter checkbox to filter the grid'},
        {
            xtype: 'container',
            itemId: 'StateFilter'
        },
        {
            xtype: 'container',
            itemId: 'ReleaseFilter'
        }
        ],
    launch: function() {
        document.body.style.cursor='default';
        this._createFilterBox('State');
        this._createFilterBox('Release');
    },
    _createFilterBox: function(property){
        this.down('#'+property+'Filter').add({
            xtype: 'checkbox',
            cls: 'filter',
            boxLabel: 'Filter table by '+property,
            id: property+'Checkbox',
            scope: this,
            handler: this._setStorage
        });
        this.down('#'+property+'Filter').add({
            xtype: 'rallyattributecombobox',
            cls: 'filter',
            id: property+'Combobox',
            model: 'Defect',
            field: property,
            value: localStorage.getItem(property+'Filtervalue'), //setting default value
            listeners: {
                select: this._setStorage,
                ready: this._setStorage,
                scope: this
            }
        });
    },

    _setStorage: function() {
        localStorage.setItem('StateFiltervalue',Ext.getCmp('StateCombobox').getValue());
        localStorage.setItem('ReleaseFiltervalue',Ext.getCmp('ReleaseCombobox').getValue());
        console.log('localStorage State: ', localStorage.StateFiltervalue,', localStorage Release:',  localStorage.ReleaseFiltervalue);
        this._getFilter();
    },

    _getFilter: function() {
        var filter = Ext.create('Rally.data.wsapi.Filter',{property: 'Requirement', operator: '=', value: 'null'});
        filter=this._checkFilterStatus('State',filter);
        filter=this._checkFilterStatus('Release',filter);
            if (this._myGrid === undefined) {
                this._makeGrid(filter);
            }
            else{
                this._myGrid.store.clearFilter(true);
                this._myGrid.store.filter(filter);

            }
    },

    _checkFilterStatus: function(property,filter){
        if (Ext.getCmp(property+'Checkbox').getValue()) {
            var filterString=Ext.getCmp(property+'Combobox').getValue()+'';
            var filterArr=filterString.split(',');
            var propertyFilter=Ext.create('Rally.data.wsapi.Filter',{property: property, operator: '=', value: filterArr[0]});
            var i=1;
            while (i < filterArr.length){
                propertyFilter=propertyFilter.or({
                    property: property,
                operator: '=',
                value: filterArr[i]
            });
            i++;
        }
        filter=filter.and(propertyFilter);
        }
        return filter;
    },
    _makeGrid:function(filter){
       this._myGrid = Ext.create('Rally.ui.grid.Grid', {
            itemId:'defects-grid',
            columnCfgs: [
                'FormattedID',
                'Name',
                'State',
                'Release'
            ],
            context: this.getContext(),
            storeConfig: {
                model: 'defect',
                context: this.context.getDataContext(),
                filters: filter
            }
        });
       this.add(this._myGrid);
    }


});

源可用here。

这篇关于组合框应该记住最后一次选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！