1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    5
    Vote Rating
    0
    donaldscott is on a distinguished road

      0  

    Default GridPanel using JsonStore - data loads in Architect but not in browser

    GridPanel using JsonStore - data loads in Architect but not in browser


    Hi -

    I used Architect to create an ExtJS 4.1.x project which includes a GridPanel using a JsonStore.

    In Architect, the data loads into the JsonStore and displays in the GridPanel.

    But in the browser, only the GridPanel's title and column names (sortable/draggable) display.
    No rows of data display in the GridPanel when using the browser. (I tried Chrome and Firefox.)

    I am testing this using a local browser on Windows7, written in Node.js, based on the (first) gist here:

    http://stackoverflow.com/questions/6...35318#13635318

    The project is attached in a ZIP file.

    The JSON URL used by the GridPanel's JsonStore is:

    http://bitcoincharts.com/t/markets.json

    Thanks!
    Attached Files

  2. #2
    Sencha User
    Join Date
    Nov 2011
    Posts
    5
    Vote Rating
    0
    donaldscott is on a distinguished road

      0  

    Default Screenshot in Sencha Architect

    Screenshot in Sencha Architect


    Here is a screenshot showing that the data does indeed load in Sencha Architect:

    http://i5.minus.com/j083L7PPhesvx.jpg



  3. #3
    Ext JS Premium Member tangix's Avatar
    Join Date
    Mar 2010
    Location
    Stockholm, Sweden
    Posts
    550
    Vote Rating
    50
    tangix is a jewel in the rough tangix is a jewel in the rough tangix is a jewel in the rough

      0  

    Default


    Just a quick stab at this - my guess is that this is a cross-domain problem. Data is loaded using Ext.Ajax and this is not possible between domains (you host your Sencha project on one domain but requests data from another domain). For this to work you must use JSONP or get your server to act as a proxy for the data from another domain, see for example http://stackoverflow.com/questions/5...main-json-call

    This is not a limitation in Ext JS, simply a security measure in all browsers.

    Hope this points you in the right direction.
    /Mattias

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    5
    Vote Rating
    0
    donaldscott is on a distinguished road

      0  

    Default Thanks

    Thanks


    I had a feeling it had something to do with a cross-domain problem, I will check this out.

  5. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    5
    Vote Rating
    0
    donaldscott is on a distinguished road

      0  

    Default It's still not working

    It's still not working


    Here is the site I'm trying to pull JSON from:

    As you can see, the JSON being used is at "top-level", so there does not seem to be any need to set the 'root' property of the JsonReader. Meanwhile, I have set the 'autoload' property of the JsonPStore to 'true', and I have set the 'url' property of the JsonPProxy to 'http://bitcoincharts.com/t/markets.json'. And the JsonPStore has a model associated with it.

    This is my first attempt to use Sencha Architect. I thought I would try this simple example to get started using Sencha Architect - just pull some data in with JSON and display it in a GridPanel. You can't get much simpler than that.

    But I keep getting this error message when I attempt to do 'Load Data' on the JsonPStore in Sencha Architect:
    Unable to load data using the supplied configuration.
    It is unfortunate that the documentation for Sencha Architect does not provide an example of how to do this simple task.

    There is some documentation for doing this manually using in Sencha ExtJS (without Sencha Architect):

    http://docs.sencha.com/ext-js/4-1/#!...ta.proxy.JsonP
    http://dev.sencha.com/playpen/ext-core-latest/examples/jsonp/
    http://goo.gl/ZBG9f

    But the reason I purchased Sencha Architect is so that I could have a WYSIWIG drag-and-drop IDE to generate the correct code, so I could avoid making these kind of coding errors.

    I am attaching a ZIP of my entire project in Sencha Architect (revised to use a JsonPStore) in case anyone can take a look at it in their copy of Sencha Architect and see what I am doing wrong.

    Thanks.
    Attached Files

  6. #6
    Ext JS Premium Member tangix's Avatar
    Join Date
    Mar 2010
    Location
    Stockholm, Sweden
    Posts
    550
    Vote Rating
    50
    tangix is a jewel in the rough tangix is a jewel in the rough tangix is a jewel in the rough

      0  

    Default


    I have a working copy of your project, just give me a sec to convert it to SA 2.2 version and I will post the details.

  7. #7
    Ext JS Premium Member tangix's Avatar
    Join Date
    Mar 2010
    Location
    Stockholm, Sweden
    Posts
    550
    Vote Rating
    50
    tangix is a jewel in the rough tangix is a jewel in the rough tangix is a jewel in the rough

      0  

    Default


    OK - no major modifications needed. I will stubbornly claim that the problem is in fact a cross-domain issue and to prove my point I have created a json-to-jsonp proxy that I will PM you the link for.

    To show that it is working - in SA do the following:
    1) Assign a Store to the Grid - select the Store you have in the project
    2) In the JSONP proxy of the store, change the URL to the link for my proxy
    3) Change the MyJsonReader to have a root property with the value "root"
    4) Right-click the store and select Load Data

    sa bcdata.jpg

    The code for the PHP proxy I wrote is (crude with lots of error-checking missing, but the point is that the server hosting your Ext JS application polls the data from the BC trading server and converts it to JSONP - actually normal JSON would have been OK as well).
    As the BC trading server is not producing JSONP, the cross-domain issue is encountered.

    Code:
    <?php
    define('CACHE_FILE', '/tmp/bcproxy.tmp');
    $cb = $_GET['callback']; // Ext.Ajax callback parameter
    $get_data = false;
    // Check if cached version exists and is younger than 5 minutes
    if (!file_exists(CACHE_FILE)) {
       $get_data = true;
    }
    else {
         if (filemtime(CACHE_FILE) < (time() - 5*60)) {
            $get_data = true;
            }
    }
    
    // Prepare the answer
    $result = array('success' => true);
    
    // Read cache or request new data and write to cache
    if ($get_data) {
       $bcdata_raw = file_get_contents('http://bitcoincharts.com/t/markets.json');
       $fp = fopen(CACHE_FILE, 'w+');
       fwrite($fp, $bcdata_raw);
       fclose($fp);
       $result['cache_info'] = 'fetch';
    }
    else {
         $bcdata_raw = file_get_contents(CACHE_FILE);
         $result['cache_info'] = 'hit-' . (int)(time()-filemtime(CACHE_FILE)) . '-secs-old';
    }
    
    // Decode the answer from trading server and re-pack
    $btdata = json_decode($bcdata_raw);
    $result['root'] = $btdata;
    
    // Send it!
    header('Content-Type: text/javascript; charset=utf8');
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
    echo $cb . '(' . json_encode($result) . ');';
    Hope this helps you somehow.
    /Mattias

Thread Participants: 1

Tags for this Thread