1. #1
    Ext User
    Join Date
    May 2009
    Posts
    1
    Vote Rating
    0
    chethanar is on a distinguished road

      0  

    Default How to display the data in grid

    How to display the data in grid




    Hi,
    I am new to EXTJS, I want to display the data in the Grid with Store using JSP.When I execute the JSP, I get the response data from backend servlet in JSON format but somehow it does not get mapped to the page as my grid is empty.
    Ext.onReady(function(){

    Ext.QuickTips.init();

    var bd = Ext.getBody();

    var store = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({
    url: 'http://localhost:9080/ExtJsServlet/servlet/extjs.servlet.ComboBoxServlet'

    }),

    reader: new Ext.data.JsonReader({
    root:'gridData'
    },
    ['lastChange', 'company' ,
    'price' ,
    'change',
    'pctChange'
    ]
    )

    });


    var grid = new Ext.grid.GridPanel({
    renderTo:document.body,
    frame:true,
    title:'Movie DB',
    height:200,
    width:500,
    storetore,
    columns:[
    {header: "Last Updated", width: 85, sortable: true, dataIndex: 'lastChange'},
    {header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
    {header: "Price", width: 75, sortable: true, dataIndex: 'price'},
    {header: "Change", width: 75, sortable: true, dataIndex: 'change'},
    {header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'}

    ]


    //stripeRows:true

    });


    store.on({
    'load':{
    fn: function(store, records, options){
    console.log('01 - Data Store listener fired (load), arguments:',store.reader);
    console.log(' this:',this);

    }
    ,scope:this
    }
    ,'loadexception':{
    fn: function(httpProxy, dataObject, arguments, exception){
    console.info('store loadexception, arguments:', arguments);
    console.info('error = ', exception);
    console.info('response = ', dataObject);

    }
    ,scope:this
    }
    });




    grid.render(document.body);
    store.load();
    });


    The JSON Response as it is received from the server :
    {"gridData":{"lastChange":"XX","company":"XX","pctChange":"333.00","price":"100.00","change":"34.00"}}


    Kindly Help


  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You have to really read the documentation as well as copy/paste example code.

    http://extjs.com/deploy/ext-3.0-rc1....ata.JsonReader

  3. #3
    Sencha User carol.ext's Avatar
    Join Date
    Jun 2007
    Location
    Littleton, Colorado, USA
    Posts
    671
    Vote Rating
    20
    carol.ext will become famous soon enough carol.ext will become famous soon enough

      0  

    Default


    Is the load handler or the loadexception handler called?

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Look at the JSON.

    Does it look like the example?

    What if you require to send multiple rows?

  5. #5
    Sencha User carol.ext's Avatar
    Join Date
    Jun 2007
    Location
    Littleton, Colorado, USA
    Posts
    671
    Vote Rating
    20
    carol.ext will become famous soon enough carol.ext will become famous soon enough

      0  

    Default


    Your code would be easier to read if it were formatted. See the help guide for how to use code tags.

    The JSON format does not appear to be your only problem. I don't see that the reader is configured on the store. Oh no, my bad...I couldn't see that it is because of the lack of formatting.

Thread Participants: 2