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

    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
    3
    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 - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,965
    Vote Rating
    12
    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.