...

View Full Version : Other Ext JS: Load json data by GridPanel's tbar.



renz1211
11-01-2010, 04:22 AM
hi all,

i'm new extjs development and i've encountered a problem in loading json data in GridPanel by clicking one of the items in its tbar.

Here's my script:




Ext.onReady(function() {

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());


function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}


function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// create the data store
var store = new Ext.data.JsonStore({
fields: [
{ name: 'Id', type: 'string' },
{ name: 'FirstName', type: 'string' },
{ name: 'LastName', type: 'string' },
{ name: 'Age', type: 'string' },
{ name: 'Sex', type: 'string' }
]
});


// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{ id: 'Id', header: 'Id', width: 160, sortable: true, dataIndex: 'Id' },
{ header: 'FirstName', width: 75, sortable: true, dataIndex: 'FirstName' },
{ header: 'LastName', width: 75, sortable: true, dataIndex: 'LastName' },
{ header: 'Age', width: 75, sortable: true, dataIndex: 'Age' },
{ header: 'Sex', width: 85, sortable: true, dataIndex: 'Sex' }
],
tbar: [{
text: 'Load Record',
handler: function(b, evt) {
// access the Record constructor through the grid's store

// ExtJS
Ext.Ajax.request({
url: 'data/EmployeeRecords.json'
,method: 'GET'
,success: function(conn, response, options) {
data = Ext.util.JSON.decode(conn.responseText);
emp = data.results;

store.loadData(emp);

}
});
}
}],
stripeRows: true,
autoExpandColumn: 'Id',
height: 350,
width: 600,
title: 'Employee Records',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});

// render the grid to the specified div in the page
grid.render('grid-example');
});



here's the json file:



{
"success": true
,"results": [{
"Id": 17
,"FirstName": "Renz"
,"LastName": "Calayag"
,"Age": "25"
,"Sex": "M"
}]
}


When I preview the page in browser, then i clicked the Load Record label in Tbar, I get a script error: Access to restricted URI denied" Code: "1012.

Is there any way to recode the script to make the label in Tbar dynamically load the json data in GridPanel when clicked?

Hope for a quick solution response to solve this.

Thanks in advance,
Renz.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum