Rally Grid load event is not firing

Question

I've been trying to make sure that the load event in the Rally.ui.grid.Grid is firing since I have a problem because my Grid is not filtering. I tried calling the methods myStore.setFilter() and myStore.load(), these two are firing, but I can't be sure the Grid is working properly since the first time, when it all loads, it does the filtering right, but then when I change the dropdown or combobox it doesn't.

This is how I load myStore:

this.myStore=Ext.create("Rally.data.wsapi.Store",{
                    model:"Task",
                    autoLoad:true,
                    filters: myFilters,
                    listeners:{
                        load:function(myStore,myData,success){

                            if(!this.myGrid) //IT CREATES THE GRID FOR THE FIRST TIME
                                {
                                    this._loadGrid(myStore)
                                    console.log('Grid Created!');
                                    // this.myStore.setFilter();
                                    // this.myStore.load();
                                }
                                else
                                {
                                    this.myStore.setFilter();
                                    //this.myStore.load();
                                    console.log('Grid reloaded!');
                                    console.log(myFilters);
                                }
                            },
                            scope:this
                        },
                    fetch:["FormattedID","State","Iteration", "Release"]
                }

                )
            }

And this is how I load myGrid:

_loadGrid:function(myStoryStore){
            this.myGrid = Ext.create("Rally.ui.grid.Grid",{
                store:myStoryStore,
                columnCfgs:["FormattedID","State","Iteration", "Release"],
                listeners: {
                    load: function(myGridy){
                        console.log('myGrid did load!');
                    },
                    scope:this
                }
                });

            this.add(this.myGrid);
    }

Answer 1

Here is an example by David Thomas from his videos on building Rally apps that uses reconfigure method to which a store is passed: _myGrid.reconfigure(myStore)

Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',

launch: function() {
    var relComboBox = Ext.create('Rally.ui.combobox.ReleaseComboBox',{
        listeners:{
            ready: function(combobox){
                //console.log('loaded release name', combobox.getRecord().get('Name')); //getRecord() returns currently selected item
                var releaseRef = combobox.getRecord().get('_ref'); 
                this._loadStories(releaseRef);
                //console.log('what is this', this);
            },
            select: function(combobox){
                var releaseRef = combobox.getRecord().get('_ref'); 
                this._loadStories(releaseRef);
            },
            scope: this
        }
    });
    this.add(relComboBox);
},

_loadStories: function(releaseRef){
    console.log('loading stories for ', releaseRef);

    var myStore = Ext.create('Rally.data.WsapiDataStore',{
        model: 'User Story',
        autoLoad:true,
        fetch: ['Name','ScheduleState','FormattedID'],
        filters:[
            {
                property : 'Release',
                operator : '=',
                value : releaseRef
            }
        ],
        listeners: {
            load: function(store,records,success){
                console.log("loaded %i records", records.length);
                this._updateGrid(myStore);
            },
            scope:this
        }
    });
},

_createGrid: function(myStore){
    console.log("load grid", myStore);
    this._myGrid = Ext.create('Ext.grid.Panel', {
        title: 'Stories by Release',
        store: myStore,
        columns: [
                {text: 'ID', dataIndex: 'FormattedID', flex: 1},
            {text: 'Story Name', dataIndex: 'Name', flex: 2},
            {text: 'Schedule State', dataIndex: 'ScheduleState', flex: 2}
        ],
        height: 400
    });
    this.add(this._myGrid);
},

_updateGrid: function(myStore){
    if(this._myGrid === undefined){
        this._createGrid(myStore);
    }
    else{
        this._myGrid.reconfigure(myStore);
    }
}

});