PDA

View Full Version : Loading data from a store with ajax proxy in a grid



geoffreydv
3 Apr 2014, 5:20 AM
I am trying to filter a store that uses an ajax proxy and show the result in a grid:

My store:


Ext.define('MyApp.store.OrganisationStore', {
extend: 'Ext.data.Store',
model: "MyApp.model.Organisation",
proxy: {
remoteFilter: true,
type: 'ajax',
api: {
read: '/api/organisation'
},
reader: {
root: "organisations",
type: 'json'
}
}
});


The code to load the data in a grid (executed in a controller):



var store = Ext.getStore("OrganisationStore");
store.filter([
{
property: "establishmentNumber",
value: this.getEstablishmentNumber().getValue()
},
{
property: "enterpriseNumber",
value: this.getEnterpriseNumber().getValue()
}
]);
this.getOrganisationsGrid().reconfigure(store);
store.load();


I don't see any results in the grid but I can see that an xhr request has been made and that a correct JSON response was returned (the filter works).

Am I missing something obvious here?

scottmartin
3 Apr 2014, 12:18 PM
So the store is populated, but there are is no data in the grid? Do you see a blank canvas, or blank rows?

console.log(store.getCount());

geoffreydv
3 Apr 2014, 10:45 PM
I see a grid with the correct columns but no rows. store.getCount() returns 0 after I call store.load(). However when I do this:



store.load(function(records) {
console.log(records);
});


I can see the loaded data in my log. The grid is not showing anything..

This is my grid's code:



Ext.create('Ext.grid.Panel', {
itemId: "organisationsGrid",
columns: [
{ header: 'Enterprise', dataIndex: 'enterpriseOrganisationId'},
{ header: 'Establishment', dataIndex: 'id'},
{ header: 'Name', dataIndex: 'name' },
{ header: 'Language', dataIndex: 'language'},
{ header: 'Street', dataIndex: 'street'},
{ header: 'House Number', dataIndex: 'housenumber'},
{ header: 'Zip Code', dataIndex: 'postalCode'},
{ header: 'City', dataIndex: 'city'},
{ header: 'Country', dataIndex: 'countryName'},
{ header: 'Phone', dataIndex: 'phone'},
{ header: 'Fax', dataIndex: 'fax'},
{ header: 'Email', dataIndex: 'email'},
{ header: 'Status', dataIndex: 'status'},
{ header: 'Sub Status', dataIndex: 'subStatus'},
{ header: 'Uses Code', dataIndex: 'usesCode'}
],
height: 200, width: 800
})


update: when I remove the .filter(.. call the data is loaded and shown in the grid so this must be the line causing the data not being shown.

scottmartin
4 Apr 2014, 4:16 AM
You would need to place the store.getCount() in your store onLoad event to get the correct count, as you have to give time for the data to return. In your grid setup, I do not see your store assigned to the grid, so I assume you pasted your code quickly to show columns?

As for your filter issue. If all is fine with no filter, then yes ... verify your filter is valid. Try some hard values to see if your getValue is not correct or not populated when called.