Hi...
So I've been playing with ext the last few days, but not really making too much headway. I finally decided to simplify life....:D So I'm trying to start with the grid example in the intro to ext:
http://extjs.com/learn/Tutorial:Introduction_to_Ext_2.0
and modify it as little as possible to make it grab the data using JSON from my webserver.
But unfortunately it won't display any of my data.
Here's my code:
Ext.onReady(function() {
var myReader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]);
var grid = new Ext.grid.GridPanel({
store: new Ext.data.JsonStore({
url: '/robotjson',
root: 'x',
reader: myReader
}),
columns: [
{header: 'Company', width: 120, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 90, sortable: true, dataIndex: 'price'},
{header: 'Change', width: 90, sortable: true, dataIndex: 'change'},
{header: '% Change', width: 90, sortable: true, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 120, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'}
],
viewConfig: {
forceFit: true
},
renderTo: 'content',
title: 'My First Grid',
width: 500,
frame: true
});
grid.getSelectionModel().selectFirstRow();
});
And here's what /robotjson returns when called:
{"tg_flash": null, "x": [["E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am"], ["Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am"], ["General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am"], ["General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am"], ["Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am"]]}
Turbogears seems to insist on putting the tg_flash variable in there, but I don't think that's the problem, because the root: 'x' line as I understand it should tell it where to look.
Thanks for any help!
Catacaustic..
Thank you for the response! I totally appreciate it.
I've gone ahead and changed how I output my Json based on your suggestion. To keep things simple I'm now only outputing one company. Here's the json:
{"x": [{"pctChange": 1.28, "lastChange": "9/1 12:00am", "price": 40.48, "company": "duPont", "change": 0.51}]}
And for reference here's how I generate it in Turbogears:
@expose(format="json")
Tine 2.0 - Wiki::
Oct 27, 2008 All examples presume that you have installed the Zend Framework and ExtJS 2.0 on your . defining the grid var media_grid = new Ext.grid.
http://www.tine20.org/wiki/index.php/Developers/Getting_Started/Getting_started_with_ExtJS_and_Zend_FrameworkHOME |
def robotjson(self, **kw):
comp =
comp.append(dict(company="duPont", price=40.48, change=0.51, pctChange=1.28, lastChange='9/1 12:00am'))
comp = dict(x=comp)
return simplejson.dumps(comp)
And here's what I ended up modifying my javascript to:
Ext.onReady(function() {
var grid = new Ext.grid.GridPanel({
store: new Ext.data.JsonStore({
//data: myData,
url: '/robotjson',
root: 'x',
fields: [{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
//reader: myReader
}),
columns: [
{header: 'Company', width: 120, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 90, sortable: true, dataIndex: 'price'},
{header: 'Change', width: 90, sortable: true, dataIndex: 'change'},
{header: '% Change', width: 90, sortable: true, dataIndex: 'pctChange'},
Welcome to terracoder.com::
I don't wish to get into this big discussion of what is better to use XML or JSON, but I will give you an example where using xmlObjectifier will seem
http://www.terracoder.com/HOME |
Appirio Tech Blog::
In this posting we're going to use the Ext JS library to build out a custom In future postings we'll build on this with examples using JSON and other
http://www.appirio.com/new/techblog/archive/2008_07_01_archive.phpHOME |
{header: 'Last Updated', width: 120, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'}
],
viewConfig: {
forceFit: true
},
renderTo: 'content',
title: 'My First Grid',
width: 500,
frame: true
});
grid.getSelectionModel().selectFirstRow();
});
I still have the same results. My grid headers render, but not the data for my grid!
Also, I tried searching the forum and googling for success: true and extjs and I did get some hits. But I can't figure out exactly where to put it in this code. Can you please let me know?
Thanks!
Hi everybody. I'm develop a web application based on Turbogears, and I want to include the ExtJS library, because it has awesome components for make professional applications, I was reading about ExtJS and I watch the screencast (http://extjs.com/learn/Screencast:Grid_Component) about the Grid component, and I have the same problem of SamList, I only see the headers of the grid, but I can't see the data :s, I knew that I have to get the data from a JSON resource and I obtain in this way:
This is my Controller:
@expose(template="sga.templates.planes.principalareas")
@expose(allow_json=True)
def areas(self):
areas = Area.query.all() #Get all the records from the database
return dict(areas = areas) #Return a dictionary for the Grid component
The controller gave me this dictionary:
{"tg_flash": null, "areas": [{"nombre": "Area de Energu00eda, Industria y Recursos Naturales No Renovables", "siglas": "AEIRNNR"}, {"nombre": "Area Juru00eddica, Social y Administrativa", "siglas": "AJSA"}, {"nombre": "Area Agropecuaria y de Recursos Naturales Renovables", "siglas": "AARNR"}, {"nombre": "Area de la Educaciu00f3n, el Arte y la Comunicaciu00f3n", "siglas": "AEAC"}, {"nombre": "Area de la Salud Humana", "siglas": "ASH"}, {"nombre": "PREUNIVERSITARIO", "siglas": "PREUNIVERSITARIO"}]}
This is my JavaScript:
var GridUI = function() {
var ds; //hold our data
var grid; //component
var columnModel; // definition of the columns
function setupDataSource() {
ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({url:'http://localhost:8080/planes/areas?tg_format=json'}),
reader: new Ext.data.JsonReader(
{root: 'areas'},
[
{name: 'nombre'},
{name: 'siglas'}
]
)
}
);
ds.load();
}
function getColumnModel() {
if(!columnModel) {
columnModel = new Ext.grid.ColumnModel(
[
{
header: 'Nombre',
width: 500,
sortable: true,
dataIndex: 'nombre'
},
{
header: 'Siglas',
width:100,
sortable: true,
dataIndex: 'siglas'
}
]
);
}
return columnModel;
}
function buildGrid() {
grid = new Ext.grid.Grid(
'gridAreas',
{
ds: ds,
cm: getColumnModel(),
autoSizeColumns: true
}
);
grid.render();
}
return {
init : function() {
setupDataSource();
buildGrid();
},
getDataSource: function() {
return ds;
}
}
}();
Ext.onReady(GridUI.init, GridUI, true);
I hope you could help me with these, I'm new in extjs it would be cool if I can do my application with this library..
Juan Carlos
PS: Sorry for the english...
From what I can see, it doesn't look like your server-side is encoding the JSON in the right way. The array of data after the 'x' is the right way to do it, but it should be an array of object values, not an array of arrays. Also, the values need to have names as references, or else the JS doesn't know what value goes with what.{"tg_flash": null, "x": [{company: "E.I. du Pont de Nemours and Company", price: 40.48, change: 0.51, pctChange: 1.28, lastChange: "9/1 12:00am"}, {company:"Exxon Mobil Corp", price: 68.1, change: -0.43, pctChange: -0.64, lastChange: "9/1 12:00am"}]}And, if you want to be sure, you should also always try to include a "success: true" in there as well to indicate that there were no errors in the back-end processing.
The "success: true" goes at the start (normally) but can probably be included anywhere.{success: true, x: [{...}, {...}], ...}
Have a read of the Grid FAQ. The first one is suggestions for debugging grids.
Suggest you add a 'loadexception' listener to see if it fires.
 I Am a Sinner – What About You?
 Global Sourcing and Supplier Online by Dylan
|
Modifying grid example from the Introduction to EXT so it uses JSON.