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:


Code:
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:

Code:
{
    "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.