oracio
27 May 2007, 9:09 AM
Hello,
I'm very new to Ext and im trying to figure it out, but from the little that i saw it is really powerful :D
I saw the beautiful ScreenCast by Scott Walter, and I tried to make what he did there:
a grid that takes it's data from a json file that was generated by the server.
It works great in FireFox but for some reason I get nothing in IE7.
should it work in IE7 or did I do something wrong?
here is my code:
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.HttpProxy({url:'ajaxasp3.asp'}), //a script that generates json
reader: new Ext.data.JsonReader(
{root: 'data', id: 'itemid'},
[
{name: 'itemid'},
{name: 'itemname'},
{name: 'itempath'},
{name: 'itemprice'},
{name: 'itemwidth'},
{name: 'itemheight'}
]
)
}
);
ds.load();
}
function getColumnModel() {
if(!columnModel) {
columnModel = new Ext.grid.ColumnModel(
[
{
header: 'Item ID',
width: 250,
sortable: true,
dataIndex: 'itemid'
},
{
header: 'Item Name',
width:100,
sortable: true,
dataIndex: 'itemname'
},
{
header: 'Item Path',
width:100,
sortable:true,
dataIndex: 'itempath',
},
{
header: 'Item Price',
width:100,
sortable: true,
dataIndex: 'itemprice',
},
{
header: 'Item Width',
width:100,
sortable:true,
dataIndex:'itemwidth',
},
{
header: 'Item Height',
width:100,
sortable:true,
dataIndex:'itemheight',
}
]
);
}
return columnModel;
}
function buildGrid() {
grid = new Ext.grid.Grid(
'mygrid',
{
ds: ds,
cm: getColumnModel(),
autoSizeColumns: true
}
);
grid.getView().getRowClass = function(record, index) {
if(record.data.completed) {
return "greenrow";
}
}
grid.on("rowdblclick", function(grid) {
alert(grid.getSelectionModel().getSelected().data.description);
});
grid.render();
}
return {
init : function() {
setupDataSource();
buildGrid();
},
getDataSource: function() {
return ds;
}
}
}();
Ext.onReady(GridUI.init, GridUI, true);
the json looks like this:
{data: [{itemid: 5,itemname: 'Strong Winds from Nowhere',itempath: 'books\u002Fb-strong.gif',itemprice: 80,itemwidth: 151,itemheight: 216}]}
Thank you in advanced!
- Uri
I'm very new to Ext and im trying to figure it out, but from the little that i saw it is really powerful :D
I saw the beautiful ScreenCast by Scott Walter, and I tried to make what he did there:
a grid that takes it's data from a json file that was generated by the server.
It works great in FireFox but for some reason I get nothing in IE7.
should it work in IE7 or did I do something wrong?
here is my code:
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.HttpProxy({url:'ajaxasp3.asp'}), //a script that generates json
reader: new Ext.data.JsonReader(
{root: 'data', id: 'itemid'},
[
{name: 'itemid'},
{name: 'itemname'},
{name: 'itempath'},
{name: 'itemprice'},
{name: 'itemwidth'},
{name: 'itemheight'}
]
)
}
);
ds.load();
}
function getColumnModel() {
if(!columnModel) {
columnModel = new Ext.grid.ColumnModel(
[
{
header: 'Item ID',
width: 250,
sortable: true,
dataIndex: 'itemid'
},
{
header: 'Item Name',
width:100,
sortable: true,
dataIndex: 'itemname'
},
{
header: 'Item Path',
width:100,
sortable:true,
dataIndex: 'itempath',
},
{
header: 'Item Price',
width:100,
sortable: true,
dataIndex: 'itemprice',
},
{
header: 'Item Width',
width:100,
sortable:true,
dataIndex:'itemwidth',
},
{
header: 'Item Height',
width:100,
sortable:true,
dataIndex:'itemheight',
}
]
);
}
return columnModel;
}
function buildGrid() {
grid = new Ext.grid.Grid(
'mygrid',
{
ds: ds,
cm: getColumnModel(),
autoSizeColumns: true
}
);
grid.getView().getRowClass = function(record, index) {
if(record.data.completed) {
return "greenrow";
}
}
grid.on("rowdblclick", function(grid) {
alert(grid.getSelectionModel().getSelected().data.description);
});
grid.render();
}
return {
init : function() {
setupDataSource();
buildGrid();
},
getDataSource: function() {
return ds;
}
}
}();
Ext.onReady(GridUI.init, GridUI, true);
the json looks like this:
{data: [{itemid: 5,itemname: 'Strong Winds from Nowhere',itempath: 'books\u002Fb-strong.gif',itemprice: 80,itemwidth: 151,itemheight: 216}]}
Thank you in advanced!
- Uri