ExtJS 4: Store data not populated with data inside

Question

Why would records.length be set to a number greater than 0, but the store.data.length is equal to 0? I'm basically trying to reference my store inside of the callback, so that my grid has data before I add it to my form. But the store data doesn't exist for some reason. If you have a better way of achieving the same end result, I'm willing to change it to your suggestion. Essentially, each grid is dynamically built based on different filters from the wrapping loop of this code.

                            var p = item.get('p');
                            var store = Ext.create('App.store.example.MyStore');
                            store.clearFilter(true);
                            store.filter('s', s);
                            store.filter('p', p);

                            store.load({

                                callback: function(records, operation, success) {
alert(store.data.length);
alert(records.length);
                                    var grid = Ext.create('App.view.example.MyGrid', {
                                        store: store
                                    });

                                    formPanel.add(
                                        Ext.create('Ext.form.FieldSet', {
                                            id: p + '_TOP',
                                            title: p,
                                            width: '100%',
                                            anchor: '100%',
                                            layout: {
                                                type: 'vbox',
                                                align: 'stretch'
                                            },
                                            items: [myGrid]
                                        })
                                    );
                                    formPanel.doLayout();


                                }
                            });

                            formPanel.doLayout();
                        });

Answer 1

I think if I would have just set the "remoteFilters" to true, it would have worked.

But I simplified it a bit. I set the filters inside the store create configs. And had to set two configs inside my model to get this to work. This way, I didn't have to set the filters manually, or perform the load (because I have the store autoLoad it for me).

View code:

                        var store = Ext.create('App.store.example.MyStore', {
                            filters: [{
                                property: 's',
                                value: s
                            },{
                                property: 'p',
                                value: p
                            }]
                        });

                        var grid = Ext.create('App.view.example.MyGrid', {
                            store: store
                        });
                        formPanel.add(
                            Ext.create('Ext.form.FieldSet', {
                                id: p + '_TOP',
                                title: p,
                                width: '100%',
                                anchor: '100%',
                                layout: {
                                    type: 'vbox',
                                    align: 'stretch'
                                },
                                items: [grid]
                            })
                        );

Store configs:

autoLoad: true,
remoteFilter: true,