Page 2 of 2 FirstFirst 12
Results 11 to 15 of 15

Thread: Reading and displaying data in extjs from a Json file

  1. #11
    Sencha User
    Join Date
    May 2013
    Location
    Bangalore,Karnataka,India
    Posts
    1
    Vote Rating
    0
      0  

    Default Reading data and displaying graph in extjs from a Json file

    I have fetched the values from json file and the same values i am displying through grid in EXTJS

    Now i want to display the graph in extjs through same values from json file.
    Can you please help me in this ..
    Thanks in advance...

  2. #12
    Sencha User
    Join Date
    Feb 2014
    Posts
    4
    Vote Rating
    0
      0  

    Default

    Hi. Glad you found the solution.
    Can you specify exactly how you got the path correct ?
    ie where was the file, and what path did you use to access it (relative to which directory) ?
    Paths are something I can find very little info on from Sencha.

  3. #13
    Sencha User
    Join Date
    Dec 2011
    Posts
    4
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by scottmartin View Post
    This works fine for me:<br>
    <br>
    Is the path to your json file correct?<br>
    <br>
    Code:
    <br>
    Ext.define('User', {<br>
    &nbsp;&nbsp; &nbsp;extend: 'Ext.data.Model',<br>
    &nbsp;&nbsp; &nbsp;fields: [{<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;name: 'id',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;type: 'int'<br>
    &nbsp;&nbsp; &nbsp;}, {<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;name: 'name',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;type: 'string'<br>
    &nbsp;&nbsp; &nbsp;}, {<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;name: 'email',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;type: 'string'<br>
    &nbsp;&nbsp; &nbsp;}]<br>
    });<br>
    <br>
    <br>
    Ext.onReady(function() {<br>
    <br>
    &nbsp;&nbsp; &nbsp;var user = Ext.create('Ext.data.Store', {<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;storeId: 'user',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;model: 'User',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;autoLoad: 'true',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;proxy: {<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type: 'ajax',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <strong> url: 'example.json',</strong><br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;reader: {<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type: 'json',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;root: 'blah'<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;}<br>
    &nbsp;&nbsp; &nbsp;});<br>
    <br>
    &nbsp;&nbsp; &nbsp;Ext.create('Ext.grid.Panel', {<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;store: user,<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;id: 'user',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;title: 'Users',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;columns: [{<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;header: 'ID',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;dataIndex: 'id'<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;}, {<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;header: 'NAME',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;dataIndex: 'name'<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;}, {<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;header: 'Email',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;dataIndex: 'email'<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;}],<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;height: 300,<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;width: 400,<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;renderTo: Ext.getBody()<br>
    &nbsp;&nbsp; &nbsp;});<br>
    <br>
    });<br>
    <br>
    <br>
    // example.json<br>
    Code:
    <br>
    { "blah": <br>
    &nbsp;&nbsp; [{<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"id": 1,<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"name": "Ed Spencer",<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"email": "ed@sencha.com"<br>
    &nbsp;&nbsp; &nbsp;},<br>
    &nbsp;&nbsp; &nbsp;{<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"id": 2,<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"name": "Abe Elias",<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"email": "abe@sencha.com"<br>
    &nbsp;&nbsp; &nbsp;}]<br>
    }<br>
    <br>
    <br>
    <img src="http://www.sencha.com/forum/attachment.php?attachmentid=36045&amp;stc=1" attachmentid="36045" alt="" id="vbattach_36045" class="previewthumb"><br>
    <br>
    Regards,<br>
    Scott.
    <br><br>Hi, someone can help me? i can't make it work, probably the json path?<br>thanks

  4. #14
    Sencha User
    Join Date
    Jun 2016
    Posts
    1
    Vote Rating
    0
      0  

    Default Please explain what did you do

    Quote Originally Posted by cahello View Post
    Thanks for the suggestions. I was able to figure out the the reason as to why the data was not displaying from a json file. It was because the path was not properly set. Now that I have saved the .json file in a proper folder within the project, I have given the absolute path correctly. The data shows up correctly. Thanks a lot, once again
    I am facing the same issue till now. Below is my code. The Grid file I am calling in a separate view file. You can see an inline data, when I uncomment it and comment my proxy then it works fine. But with proxy the issue still persists. I tried a lot of things with the json file i.e. changed path location but in vain. Please help !

    Inline data loads in the Grid fine but json file does not work and my main aim is to load it via an api in proxy, which obivously is also not working.

    Ext.define('MortgageProducts',{
    extend: 'Ext.data.Model',
    fields: [
    {
    name:'id',
    type: 'int'
    },
    {
    name: 'Name',
    type: 'string'
    },
    {
    name:'Category',
    type: 'string'
    },
    {
    name: 'Price',
    type: 'int'
    }

    ]
    });

    Ext.define('ProductsStore',{
    extend: 'Ext.data.Store',
    model: 'MortgageProducts',
    autload: true,
    proxy:{
    type: 'ajax',
    url: 'view/dummy.json',
    reader:{
    type: 'json'
    }
    }

    /*data: [

    {Id : '1', Name : 'MortgageProduct1', Category : 'Save2Buy', Price : '10' },
    {Id : '2', Name : 'MortgageProduct2', Category : 'BIR', Price : '50000' },
    {Id : '3', Name : 'MortgageProduct3', Category : 'Flexclusive', Price : '90000' }
    ]
    */

    });

    Ext.define('Earthquakes.view.Grid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.earthquakesgrid',
    store: Ext.create('ProductsStore'),
    title: 'Mortgage Products',
    columns: [
    {
    text: 'id',
    dataIndex: 'id'
    },
    {
    text: 'Name',
    dataIndex: 'Name'
    },
    {
    text: 'Category',
    dataIndex: 'Category'
    },
    {
    text: 'Price',
    dataIndex: 'Price'
    }
    ]
    });

    Here is the main view js file where I call the grid file.
    Ext.define('Earthquakes.view.main.Main', {
    extend: 'Ext.panel.Panel',
    xtype: 'main',
    requires: [
    'Earthquakes.view.Grid',
    'Ext.plugin.Viewport'
    ],
    layout: 'border',
    items: [{

    xtype: 'earthquakesgrid',
    region: 'center'
    }]
    });

  5. #15
    Sencha User
    Join Date
    Apr 2017
    Posts
    1
    Vote Rating
    0
      0  

    Default

    hey,
    what path you have given in the url.

Page 2 of 2 FirstFirst 12

Tags for this Thread

Posting Permissions

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