Results 1 to 4 of 4

Thread: Using JsonStore to populate data to a grid.

  1. #1
    Sencha User
    Join Date
    Dec 2015
    Location
    Norther Virginia
    Posts
    15

    Default Answered: Using JsonStore to populate data to a grid.

    Good Morning All,

    First let me say thanks for your assistance in advance, i am a newbie with CF/ExtJS.

    I am attempting to populate a grid with json data. If I declare the data inline, the grid works but I need to be able to read the data. I am sure my code is awry somewhere so please lead me in the right direction. I dont want anyone to post my code with the answer, because I learn by doing. Anyways here is my code:



    Ext.require([
    'Ext.data.*',
    'Ext.data.JsonStore',
    'Ext.grid.*'
    ]);
    Ext.onReady(function(){
    Ext.define('Customer',{
    extend: 'Ext.data.Model',
    fields: [
    'Name', 'Email', 'Customer ID'
    ]
    });
    var customers = new Ext.data.JsonStore({
    model: 'Customer',
    url: 'getCustomers.cfm',
    autoload: true
    });

    Ext.create('Ext.grid.Panel', {
    store: customers,
    columns: [
    { header: 'Name', dataIndex: 'name', mapping: 'LASTNAME'},
    { header: 'Email', dataIndex: 'email', mapping: 'EMAIL', flex: 1},
    { header: 'Phone', dataIndex: 'phone', mapping: 'CUSTOMER_ID',flex: 1 }
    ],
    width: 850,
    renderTo: Ext.getBody()
    });
    });

    My Json output

    {"ROWCOUNT":100,"COLUMNS":["LASTNAME","EMAIL","CUSTOMER_ID"],"DATA":{"lastname":["Faulkner","Dillard","Davidson"...... I dont want to post the entire output because its too much but you can see the format with the above.

    Thanks for your help.

  2. Hi--

    The issue is that the default "reader" for the data model is expecting the data in a specific format for the JSON data which does not match the data you are giving it.

    http://docs.sencha.com/extjs/6.0/6.0....reader.Reader

    There are a few options. You could create a custom reader that would deal with the output that CF creates when converting a query to JSON. This has been done before for Ext JS 4.2, so you might check it out and either use the custom reader provided, or use it for inspiration for creating your own:

    https://github.com/cutterbl/CFQueryReader

    Alternatively, you could manipulate the data coming from ColdFusion before return it in the response in order to make the format something friendlier that the JSON reader can more easily deal with. For example, converting the query to a format like this:

    Code:
    {
        total: 10,
        data: [{
            id: 1,
            title: 'A title'
        }, {
            id: 2,
            title: 'Another title'
        }]
    }
    Would let you define a simple reader like so:

    Code:
    proxy: {
        type: 'ajax',
        url: 'someurl',
        reader: {
            type: 'json',
            rootProperty: 'data',
            totalProperty: 'total'
        }
    }
    In a previous life, when I did ColdFusion development, I opted for the second approach. I had a global utility function that I could pass my query to and convert it to a nice array of structs before returning it to the client.

    I hope this gives you a good place to start--thanks!
    Joel

  3. #2
    Sencha User
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Hi--

    The issue is that the default "reader" for the data model is expecting the data in a specific format for the JSON data which does not match the data you are giving it.

    http://docs.sencha.com/extjs/6.0/6.0....reader.Reader

    There are a few options. You could create a custom reader that would deal with the output that CF creates when converting a query to JSON. This has been done before for Ext JS 4.2, so you might check it out and either use the custom reader provided, or use it for inspiration for creating your own:

    https://github.com/cutterbl/CFQueryReader

    Alternatively, you could manipulate the data coming from ColdFusion before return it in the response in order to make the format something friendlier that the JSON reader can more easily deal with. For example, converting the query to a format like this:

    Code:
    {
        total: 10,
        data: [{
            id: 1,
            title: 'A title'
        }, {
            id: 2,
            title: 'Another title'
        }]
    }
    Would let you define a simple reader like so:

    Code:
    proxy: {
        type: 'ajax',
        url: 'someurl',
        reader: {
            type: 'json',
            rootProperty: 'data',
            totalProperty: 'total'
        }
    }
    In a previous life, when I did ColdFusion development, I opted for the second approach. I had a global utility function that I could pass my query to and convert it to a nice array of structs before returning it to the client.

    I hope this gives you a good place to start--thanks!
    Joel

  4. #3
    Sencha User
    Join Date
    Dec 2015
    Location
    Norther Virginia
    Posts
    15

    Default

    Thank you so much! I was able to make it work with that information. I output my json in a new format using

    Code:
    <cfquery name="custData" datasource="emp">    
    select lastname, email, customer_id
    from mytable 
    </cfquery>
    
    <cfquery name="custData" datasource="emp">
        select lastname, email, customer_id
        from mytable 
    </cfquery>
    
    <cfset record=0>
    <cfoutput>{total:#custData.recordcount#, data: [</cfoutput>
    <cfloop query="custData">
    <cfset record++>
    <cfoutput>{name: '#custData.lastname#', email: '#custData.email#', customer_id: '#custData.customer_id#'}</cfoutput>
    <cfif record NEQ custData.recordcount> <cfoutput>,</cfoutput> </cfif>
    </cfloop>
    <cfoutput>]}</cfoutput>
    I got the correct format for the json reader, and was able to get it working. Now I feel like im on my way to actually getting something done with these two languages.

    Code:
    Ext.onReady(function(){
        
        Ext.define('Customer',{
            extend: 'Ext.data.Model',
            proxy: {
              type: 'ajax',
              reader: {
                  type: 'json',
              }
            },
            fields: [
                {name: 'Name', mapping: 'name'},
                {name: 'Email', mapping: 'email' },
                {name: 'Customer_ID', mapping: 'customer_id'}
            ]
        });
        
          var customers = new Ext.data.JsonStore({
            model: 'Customer',
            proxy: {
              type: 'ajax',
              url: 'getCustomers.cfm',
              reader: {
                  type: 'json',
                  rootProperty: 'data',
                  totalProperty: 'total' },
              autoload: true
            }
          });
                
        Ext.create('Ext.grid.Panel', {
            store: customers,
            columns: [
                { header: 'Name', dataIndex: 'Name', sortable: true },
                { header: 'Email', dataIndex: 'Email', flex: 1, sortable: true},
                { header: 'Customer_ID', dataIndex: 'Customer_ID', flex: 1, sortable: true }
            ],
            width: 850,
            renderTo: Ext.getBody()
        });
     customers.load();
    });
     </script>
    Last edited by almcaffee; 4 Jan 2016 at 10:30 AM. Reason: Added more of the code i used

  5. #4
    Sencha User
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Cool, glad it was helpful!

    Thanks
    Joel

Similar Threads

  1. Grid does not populate with data on some devices
    By DerekBrennan20 in forum Sencha Touch 2.x: Bugs
    Replies: 1
    Last Post: 3 Aug 2015, 4:33 AM
  2. Populate Grid with Data from XML
    By alessalessio in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 31 Mar 2011, 4:58 AM
  3. Populate html select list with JsonStore?
    By davide.menoni in forum Sencha Ext JS Q&A
    Replies: 6
    Last Post: 2 Aug 2010, 5:31 AM
  4. Populate data from a grid to a form
    By defcon1 in forum Ext 3.x: Help & Discussion
    Replies: 7
    Last Post: 24 Jun 2010, 4:28 AM
  5. How to populate a form with data from jsonstore
    By wickass in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 1 Oct 2008, 12:56 PM

Posting Permissions

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