Results 1 to 1 of 1

Thread: Load json data by GridPanel's tbar.

  1. #1

    Question Load json data by GridPanel's tbar.

    hi all,

    i am a new extjs user 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.
    Last edited by renzcalayag; 31 Oct 2010 at 6:35 PM. Reason: I make my script readable and added my script error.

Similar Threads

  1. How to load JSON object into GridPanel locally?
    By heikan in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 11 Aug 2014, 3:53 AM
  2. GridPanel with tbar - tbar has display issues
    By froggman2k in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 16 Feb 2010, 2:44 PM
  3. Cannot load JSON into GridPanel
    By ebaggg in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 24 Jun 2009, 7:44 AM
  4. how to make tbar in the GridPanel dynamically by json?
    By holala in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 22 Jul 2008, 12:49 AM
  5. help, load new data into gridpanel.
    By pokeepers in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 22 Jan 2008, 1:19 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •