1. #1
    Ext User
    Join Date
    Dec 2007
    Posts
    8
    Vote Rating
    0
    bean is on a distinguished road

      0  

    Default Importing JSON into GridPanel

    Importing JSON into GridPanel


    Hello. New to ExtJS and am having a bit of trouble importing simple JSON from server to clientside. The alert(ds.getCount()); always returns 0. The grid renders, but there is no data.

    Client
    Code:
        var ds = new Ext.data.JsonStore({
            url: 'webform1.aspx?action=getOrders',
            method : 'GET',                                                                    
            root: 'order',                
            fields: ['orderID', 'orderDate'],
            id: 'orderID'
        });
            
        ds.on('load', loadGrid());                                                
        
        function loadGrid(){
            alert(ds.getCount());
            var grid = new Ext.grid.GridPanel
            ({
                store: ds,
                columns: 
                [
                    {header: 'Order ID', width: 120, sortable: true, dataIndex: 'orderID'},
                    {header: 'Order Date', width: 90, sortable: true, dataIndex: 'orderDate'}			            
                ],
                renderTo: 'content',
                title: 'Order Detail',
                width: 500,
                frame: true
            });	            
        };
    });
    Server
    Code:
     string jsonResp = @"
                        {
                            order: 
                            [
                                {
                                    orderID"":'3242323', 
                                    orderDate"":'10/15/2007'
                                }
                                {
                                    orderID"":'5554455', 
                                    orderDate"":'10/20/2007'
                                }
                                {
                                    orderID:'10210210', 
                                    orderDate:'10/01/2007'
                                }
                            ]
                        }
                    ";
    Response.Write(jsonResp);
    Response.End();

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    What are those mysterious double quotes in your json? Use firebug to see what actually came back - not everyone reads (I assume C#) so post what actually is sent. Add a listener to the store's loadexception event to see if you're getting an error.

  3. #3
    Ext User
    Join Date
    Oct 2007
    Posts
    16
    Vote Rating
    0
    radio1 is on a distinguished road

      0  

    Default


    Two problems strike me right away:

    1- I think you want to change:
    Code:
    ...        
        ds.on('load', loadGrid());
    ...
    to:
    Code:
    ...        
        ds.on('load', loadGrid);
    ...
    2- The array elements in your server response should be separated by commas:
    Code:
    ...
                                {
                                    orderID"":'3242323', 
                                    orderDate"":'10/15/2007'
                                },
                                {
                                    orderID"":'5554455', 
                                    orderDate"":'10/20/2007'
                                }
    ...
    Good luck,
    -radio1

  4. #4
    Ext User
    Join Date
    Dec 2007
    Posts
    8
    Vote Rating
    0
    bean is on a distinguished road

      0  

    Thumbs up


    This is the raw json being returned from the server (those double quotes were a typo)
    Code:
    { order: [ { orderID:'3242323', orderDate:'10/15/2007' } { orderID:'5554455', orderDate:'10/20/2007' } { orderID:'10210210', orderDate:'10/01/2007' } ] }
    Firebug does not report any errors, but handling the loadexception event DOES result in an exception being thrown.

    Code:
    ds.on('loadexception', catchExcp());      
    
    function catchExcp(){
        alert('loadexception occured');
    };
    How can I get more detailed info about the loadexception?

  5. #5
    Ext User
    Join Date
    Jul 2007
    Posts
    3,128
    Vote Rating
    1
    devnull is an unknown quantity at this point

      0  

    Default


    do not include parens after you function call, this causes it to fire immediately when it reaches the 'ds.on...' line! you want to just pass a reference to the function, which you do by providing only the function name.

  6. #6
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,963
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    You JSON is invalid, arrays need commas for members:
    Code:
    { order: [ { orderID:'3242323', orderDate:'10/15/2007' } , { orderID:'5554455', orderDate:'10/20/2007' } ,{ orderID:'10210210', orderDate:'10/01/2007' } ] }
    How can I get more detailed info about the loadexception?
    Code:
    
    function catchExcp(){
        console.log(arguments);  //the last one is the exception object raised on error.
        alert('loadexception occured');
    };
    ds.on('loadexception', catchExcp());
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  7. #7
    Ext User
    Join Date
    Dec 2007
    Posts
    8
    Vote Rating
    0
    bean is on a distinguished road

      0  

    Default


    Thankyou all for your responses -- fixed the problem by replacing the open parens in the event handler definition, and learned to debug through firebug, which pointed me to my malformed json. Parameter 4 of the loadexception event for a JsonStore object contains the details of the exception.