IE Error with Paging Grid [Archive]

nation-x

3 May 2007, 1:19 PM

Ok... I adapted the paging grid example in an effort to learn how to use the grid widget. I have it working great in FF but it totally dies in IE with the error "Expected Identifier, string or number".

I have looked for extra commas or anything else that could cause the error but I am at a loss. The code is pretty much exactly the same as the example. I am using the Jquery Adapter... any ideas? It's dying in the ColumnModel config { id: 'site_title', <-- right here

My adaption:

Ext.onReady(function(){

// create the Data Store
var ds = new Ext.data.Store({
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.HttpProxy({
url: '/admin/listsites/'
}),

// create reader that reads the Topic records
reader: new Ext.data.JsonReader({
root: 'sites',
totalProperty: 'total',
id: 'site_id'
}, [
{name: 'site_id', mapping: 'site_id', type: 'int'},
{name: 'site_url', mapping: 'site_url'},
{name: 'site_title', mapping: 'site_title'},
{name: 'feat_id', mapping: 'feat_id', type: 'int'},
{name: 'name', mapping: 'name'}
]),

// turn on remote sorting
remoteSort: false
});
ds.setDefaultSort('site_title', 'asc');

// pluggable renders
function renderId(value, p, record){
return String.format('{0}{1}', value, record.data['site_id']);
}
function renderIdPlain(value){
return String.format('{0}', value);
}
function renderTitle(value, p, r){
return String.format('{0} by {1}', value, r.data['site_title']);
}
function renderTitlePlain(value){
return value;
}
function renderEdit(value){
return '<a href="/admin/editsite/id/'+value+'">EDIT</a>';
}

// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store
var cm = new Ext.grid.ColumnModel([{
id: 'class_id', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "ID",
dataIndex: 'site_id',
width: 25,
css: 'white-space:normal;'
},
{
id: 'site_title',
header: "Title",
dataIndex: 'site_title',
width: 250,
},
{
id: 'site_url',
header: "URL",
dataIndex: 'site_url',
width: 245,
},
{
id: 'feat_id',
header: "Featured ID",
dataIndex: 'feat_id',
width: 68,
align: 'right'
},
{
header: "OPERATIONS",
dataIndex: 'site_id',
renderer: renderEdit,
sortable: false,
width: 75,
}]);

// by default columns are sortable
cm.defaultSortable = true;

// create the editor grid
var grid = new Ext.grid.Grid('sites-grid', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:false,
loadMask: true
});

// make the grid resizable, do before render for better performance
var rz = new Ext.Resizable('sites-grid', {
wrap:true,
minHeight:100,
pinned:true,
handles: 's'
});
rz.on('resize', grid.autoSize, grid);

// render it
grid.render();

var gridFoot = grid.getView().getFooterPanel(true);

// add a paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying sites {0} - {1} of {2}',
emptyMsg: "No sites to display"
});
// add the detailed view button
paging.add('-', {
pressed: true,
enableToggle:true,
text: 'Detailed View',
cls: 'x-btn-text-icon details',
toggleHandler: toggleDetails
});

// trigger the data store load
ds.load({params:{start:0, limit:25}});

function toggleDetails(btn, pressed){
cm.getColumnById('site_id').renderer = pressed ? renderId : renderIdPlain;
cm.getColumnById('site_title').renderer = pressed ? renderTitle : renderTitlePlain;
grid.getView().refresh();
}
});