PDA

View Full Version : Issues with output display when turning TouchGridPanel example into dynamic data...



jaypompano
11 Feb 2011, 1:33 PM
I am able to get the hardcoded data TouchGridPanel example working located at (http://www.simoens.org/Sencha-Projects/demos/). However when I code dynamic JSON data into it, the data seems to be returning {ObjectA} | {ObjectB} | etc etc...The column model looks good. I'm suspecting it is the data in the store, but I compare in debugger and they look good to me. Could someone possibly point out what I am missing? Below is hardcoded data example, then my example. Thank you.

Hardcoded example...



var documentsPanel = new Ext.form.FormPanel({
items: []
});

Ext.regModel("TouchGridPanel", {
fields: [
"company",
"price",
"change",
"pct",
"updated"
]
});

store = new Ext.data.Store({
model: "TouchGridPanel",
data: [
{ company: "3m Co", price: 71.72, change: 0.02, pct: 0.03, updated: "9-1-2010" },
{ company: "Alcoa Inc", price: 29.01, change: 0.42, pct: 1.47, updated: "9-1-2010" },
{ company: "Altria Group Inc", price: 83.81, change: 0.28, pct: 0.34, updated: "9-1-2010" },
{ company: "American Express Company", price: 52.55, change: 0.01, pct: 0.02, updated: "9-1-2010" }
]
});

var colModel = [{
header: "Company",
mapping: "company",
flex: 2
}, {
header: "Price",
mapping: "price",
style: "text-align: center;"
}, {
header: "Change",
mapping: "change",
cls: "centered-cell"
}, {
header: "% Change",
mapping: "pct",
cls: "centered-cell"
}, {
header: "Last Updated",
mapping: "updated",
style: "text-align: right;"
}];

var grid = new Ext.ux.TouchGridPanel({
store: store,
colModel: colModel
});

documentsPanel.add(grid);
documentsPanel.doLayout();



Dynamic JSON data example...


var documentsPanel = new Ext.form.FormPanel({
items: []
});

var fields = [];
for (var i = 0; i < JSON.DocumentResults.Fields.length; i++) {
fields[i] = JSON.DocumentResults.Fields[i].Name;
}

Ext.regModel("TouchGridPanel", { fields: fields });

var data = [];

for (var i = 0; i < JSON.Count; i++) {
var node = {};

for (var j = 0; j < JSON.DocumentResults.Documents[i].FieldData.length; j++) {
node[JSON.DocumentResults.Fields[j].Name] = JSON.DocumentResults.Documents[i].FieldData[j];
}
data[i] = node;
}

store = new Ext.data.Store({
model: "TouchGridPanel",
data: data
});

var getcolModel = function (JSON) {
var colModel = [];

for (var j = 0; j < JSON.DocumentResults.Fields.length; j++) {
colModel[j] = {
header: JSON.DocumentResults.Fields[j].Name,
mapping: JSON.DocumentResults.Fields[j].Name,
style: "text-align: center;",
flex: 2
};
}
return colModel;
};

var grid = new Ext.ux.TouchGridPanel({
store: store,
colModel: getcolModel(JSON)
});

documentsPanel.add(grid);
documentsPanel.doLayout();