PDA

View Full Version : server side json data is not getting loaded into TouchGridPanel



gxtyas
26 Jan 2011, 10:33 AM
<code>
var jsonStore = new Ext.data.Store({
model: "TestModel",
proxy: {
type: 'ajax',
method:'Post',
url: '/HelloServlet',
reader: {
type: 'json',
// record: 'person'
root: 'data'
}
},
autoLoad: true
});


var grid = new Ext.ux.TouchGridPanel({
fullscreen : true,
// store : store,
store : jsonStore,

dockedItems : [{
xtype : "toolbar",
dock : "top",
title : "Ext.ux.TouchGridPanel Demo"/*,
items : [{
text : "Edit",
ui : "confirm",
handler : function() {
grid.enableEdit(true);
}
},{
xtype : "spacer"
},{
text : "Done",
ui : "action",
handler : function() {
grid.enableEdit(false);
}
}]*/
}],
selModel : {
singleSelect : true
},
colModel : [{
header : "Company",
mapping : "company"
},{
header : "Price",
mapping : "price",
renderer : function(value, record, rowIndex, colIndex, store) {
if (value < 0) {
value *= -1;
value = value.toFixed(2);
return "<span style='color:red;'>$" + value + "</style>";
} else if (value > 0) {
value = value.toFixed(2);
return "<span style='color:green;'>$" + value + "</style>";
}
return "<span style=''>$"+value.toFixed(2)+"</span>";
}
},{
header : "Change",
mapping : "change",
renderer : function(value) {
if (value > 0) {
value = value.toFixed(2);
return '<span style="color:green;">' + value + '</span>';
} else if (value < 0) {
value *= -1;
value = value.toFixed(2);
return '<span style="color:red;">' + value + '</span>';
}
return "<span style='float:right;'>"+value+"</span>";
}
},{
header : "% Change",
mapping : "pct",
renderer : function(value) {
if (value > 0) {
value = value.toFixed(2);
return '<span style="color:green;">' + value + '%</span>';
} else if (value < 0) {
value *= -1;
value = value.toFixed(2);
return '<span style="color:red;">' + value + '%</span>';
}
return "<span style='float:right;'>"+value+"%</span>";
}
},{
header : "Last Updated",
mapping : "updated",
renderer : function(value) {
return Ext.util.Format.date(value, "m-d-Y");
}
}],
listeners: {
rowtap: function(grid, el, rowIndex, e) {
console.log(grid);
console.log(el);
console.log(rowIndex);
console.log(e);
}
}
});
</code>

jsonStore works for the following
<code>
var panel = new Ext.Panel({
fullscreen: true,
items: [
{
xtype: 'list',
store: jsonStore,
itemTpl: '{company}',
singleSelect: true
}
]
});

server response is
String result="{\"data\":[{\"company\":\"3m Co\",\"price\":\"71.72\",\"change\":\"0.02\",\"pct\":\"0.03\",\"updated\":\"9/1/2010\"}]}";
</code>

Please advice , it works fine for simple Panel but not for TouchGridPanel

stevek
30 Jan 2011, 3:16 PM
I have used this code in a prior application - and worked fine for me!


return new Ext.ux.TouchGridPanel({
colModel: [
{
header: 'Date (username)',
mapping: 'when_who'
},
{
header: 'Description',
mapping: 'audit_txt'
}
],
id: 'au-audit-grid',
selModel: {
singleSelect: true
},
store: new Ext.data.Store({
model: 'Audit',
proxy: {
reader: {
root: 'audits',
type: 'json'
},
type: 'ajax',
url: 'audit/load'
}
})
});