PDA

View Full Version : Load A Grid



Kachopsticks
2 May 2014, 6:04 AM
I am still learning Ext JS 4 coming from 3.4 I have a button which has a controller and a controller action. When my button is clicked it fires off an AJAX request. I get my response back and now I need to load it into a grid. How do I do this? I have my grid in a separate class. I feel like I should be fire an event from my button that will my grid will listen for, but I am not sure how to go about setting this up in Ext JS 4. I am using Sencha Architect 2.2.3. Do I need to assign a controller to my grid to do this, or just a basic function? Any help is appreciated. I feel like this is simple, but it is not clicking for me.

Kachopsticks
2 May 2014, 10:45 AM
Well, I believe I am getting farther but my grid is not loading and I am not sure why. I only expect my name column to load since the other columns are not mapped to the results correctly. I have specified the name colimn to look for FIRST_NAME. Does any one see why this does not work. I do not get any js errors, my grid just stays empty.

48887

controller for button makes ajax call, tries to load store from the success function


Ext.Ajax.request({
url: 'http://localhost:8080/DuplicatePartyManagement/servlet/searchParties',
method: 'POST',
timeout: 360000,
headers: { 'Content-Type': 'application/json' },
jsonData: {
firstName : firstName,
lastName : lastName
},
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
var grid = Ext.ComponentQuery.query('#partySearchResultsGrid')[0];
grid.store.loadData(obj);
},
failure: function(response, opts) {
var obj = Ext.decode(response.responseText);
Ext.MessageBox.alert('ERROR', 'An Error Occurred, possibly due to a timeout');
}
});
},


store


Ext.define('DPM.store.PartySearchResults', {
extend: 'Ext.data.Store',


requires: [
'DPM.model.PartySearchResult'
],


constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
model: 'DPM.model.PartySearchResult',
storeId: 'partySearchResults',
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'PartySearchResult'
}
}
}, cfg)]);
}
});




Ext.define('DPM.view.PartySearchResultsGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.partysearchresultsgrid',


itemId: 'partySearchResultsGrid',
title: 'Party Search Reults',
store: 'PartySearchResults',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
columns: [
{
xtype: 'gridcolumn',
text: 'Password'
},
{
xtype: 'gridcolumn',
dataIndex: 'FIRST_NAME',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'address',
text: 'Address'
},
{
xtype: 'gridcolumn',
dataIndex: 'city',
text: 'City'
},
{
xtype: 'gridcolumn',
dataIndex: 'state',
text: 'State'
},
{
xtype: 'gridcolumn',
dataIndex: 'zipCode',
text: 'ZipCode'
},
{
xtype: 'gridcolumn',
dataIndex: 'dateOfBirth',
text: 'DateOfBirth'
},
{
xtype: 'gridcolumn',
dataIndex: 'duplicate',
text: 'Duplicate'
}
]
});


me.callParent(arguments);
}


});


model


Ext.define('DPM.model.PartySearchResult', {
extend: 'Ext.data.Model',


fields: [
{
name: 'FIRST_NAME'
},
{
name: 'address'
},
{
name: 'city'
},
{
name: 'state'
},
{
name: 'zipCode'
},
{
name: 'dateOfBirth'
},
{
name: 'duplicate'
}
]
});

Kachopsticks
2 May 2014, 12:05 PM
Well I got it working and figured I would post the answer in case anyone else runs into this issue. You have to use loadRawData() instead of loadData() if you implement it the way I did. Just a tweak between 3.4 and 4, the learning curve is killing me. :-) LoadData does not use the reader specified with the store. The documentation says 'Using this method is great if the data is in the correct format already.' Does anyone know what the correct format is? Can the object being loaded not have field values that do not match store field values? O well, my problem is solved.