javascriptextjsextjs4rally

combobox should remember the last selection


Below is my code to display three comboboxes, which will be Filter by severity, start release and end release. When I refresh the page I want comboboxes to remember what was selected earlier. Now it shows the current release in both the comboboxes. Any help on this

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

Solution

  • In javascript you may use localstorage.

    Here is an app example that retains State and Release selections in respective compboboxes when page is refreshed:

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

    The source is available here.