PDA

View Full Version : My grid simply refuses to display data



phamtranquocviet
26 Jun 2013, 8:07 PM
Hi,
I modified existing and working code from another grid, but my new grid just refuses to display data. Please help. Thanks.


Here is my view:


Ext.define('Iip.view.giips.admission.ApproveLetterOfIntentTab', {
extend: 'Ext.panel.Panel',
alias:'widget.approve-letter-of-intent-tab',
title: Ext.ComponentQuery.query('#loi-menu-item')[0].title,
id: 'approve-letter-of-intent-tab',

listeners: {
afterrender: function() {
//Iip.app.getController('Iip.controller.giipa.mrkt.actn.ContactManagerTabs');
}
},

initComponent: function() {
var grid = Ext.create('Ext.grid.Panel', {
store: Ext.create('Iip.store.giips.admission.Lois').load(),
selType: 'rowmodel',
id: 'letter-of-intent-grid',
margin: '2 0 0 0',
columnLines: true,
minHeight: '150',

columns: [
{header: 'ID', dataIndex: 'loiId', hidden: true},
{header: 'First Name', dataIndex: 'firstName', flex: 0.2},
{header: 'Last Name', dataIndex: 'lastName', flex: 0.2},
{header: 'Relationship', dataIndex: 'relationship', flex: 0.2},
{header: 'City', dataIndex: 'city', flex: 0.2},
{header: 'Number of Children', dataIndex: 'numberOfChildren', align: 'center', flex: 0.2}
],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{xtype: 'button', text: 'View', id: 'contact-manager-tab-contact-grid-add-contact'},
{xtype: 'button', text: 'Search', id: 'contact-manager-tab-contact-grid-search-contact'},
{
xtype: 'button',
text: 'Clear Search Results',
id: 'contact-manager-tab-contact-grid-clear-search-results',
hidden: true
}
]
}]
});

Ext.applyIf(this, {
items: [grid]
});
this.callParent(arguments);
}
});



Here is my store:


Ext.define("Iip.store.giips.admission.Lois", {
extend: "Ext.data.Store",
storeId:"loi-store",
model: "Iip.model.giips.admission.Loi",
autoLoad: false,
buffered: true
});


Here is my model:


Ext.define('Iip.model.giips.admission.Loi', {
extend: 'Ext.data.Model',
idProperty: "loiId",

fields:[
{name: "loiId", type: "int"},
{name: "firstName", type: "string"},
{name: "lastName", type: "string"},
{name: "relationship", type: "string"},
{name: "city", type: "string"},
{name: "numberOfChildren", type: "int"}
],

proxy: {
type: "ajax",
actionMethods: {
read: "POST",
update: "POST"
},
api: {
read: "indexes/admission_index.php?c=get_lois",
update: "indexes/admission_index.php?c=get_lois"
},
reader: {
type: "json",
root: "lois"
},
listeners: {
exception: function(proxy, response, operation, opts) {
if(typeof(operation.error) == "string") {
Ext.Msg.alert("Error", "Connection to server interrupted");
}
}
}
}
});


Here is the data server return in Firebug:
{"lois":[{"loiId":"1","firstName":"Quyen","lastName":"Nguyen","city":"Milpitas","numberOfChildren":"1","relationship":"Mother"},{"loiId":"2","firstName":"Quyen","lastName":"Nguyen","city":"Milpitas","numberOfChildren":"1","relationship":"Mother"},{"loiId":"3","firstName":"Quyen","lastName":"Nguyen","city":"Milpitas","numberOfChildren":"2","relationship":"Mother"}]}

glopes
26 Jun 2013, 9:28 PM
Just one idea, change the autoload to true and then change your grid to:


var grid = Ext.create('Ext.grid.Panel', {
store: 'giips.admission.Lois',
selType: 'rowmodel',
id: 'letter-of-intent-grid',
margin: '2 0 0 0',
columnLines: true,
minHeight: '150',
....

phamtranquocviet
27 Jun 2013, 5:14 AM
Hi,
Thanks for the reply. I tried that, but it did not help. It actually stopped loading the data from the server, which I don't understand either.

infernoz
27 Jun 2013, 10:53 AM
You should set the root of your store to be "lois" according to your json data being returned. Add this to your store:



reader: {
type: 'json',
root: 'lois'
},

phamtranquocviet
27 Jun 2013, 7:30 PM
Thanks for the reply. I tried that, but still shows no data on my grid.

infernoz
27 Jun 2013, 7:49 PM
oops sorry, i didnt see you had the reader in the model already with the root param set.

I'd work one step at a time. Take that json data that is being returend from the server and instead of getting it via a proxy, hard code it in the store, and see if the grid reads it from there. You can then know whether its an issue with the format of the json or how the store is interacting with the grid. Simplify your example until you uncover whats going on

phamtranquocviet
27 Jun 2013, 9:00 PM
Hi,

After so much hair pulling, I finally figured it out. Do not use buffered in your store in version greater than 4.0.7

I changed from this:



Ext.define("Iip.store.giips.admission.Lois", {
extend: "Ext.data.Store",
storeId:"loi-store",
model: "Iip.model.giips.admission.Loi",
autoLoad: false,
buffered: true
});



to this:



Ext.define("Iip.store.giips.admission.Lois", {
extend: "Ext.data.Store",
storeId:"loi-store",
model: "Iip.model.giips.admission.Loi",
autoLoad: false
});


and it worked like a charm.


buffered worked fine in 4.0,7 though...

carol.ext
27 Jun 2013, 9:56 PM
Try taking buffered: true out of your store config. Looking at the documentation for buffered (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Store-cfg-buffered) there may be some other config changes needed to use it.

I pasted your code into an example and got it to work. I think taking out buffered was really the only change needed.