Results 1 to 7 of 7

Thread: Populate complex JSON to a store and map it to a grid

  1. #1
    Sencha User dimebag's Avatar
    Join Date
    Aug 2009
    Posts
    53

    Default Populate complex JSON to a store and map it to a grid

    Hi,

    I have a little problem using a grid like in this example: http://dev.sencha.com/deploy/dev/exa.../grouping.html

    I have data in this format:

    Code:
    [ {group1:{col1:val1,col2:val2}},
    {group2:{col1:val1,col2:val2}} ]
    group is the grouping and the cols are the grid-columns. How can I declare the fields and map it to the grid? I only saw examples with flat data. Do I have to flat my data?

    Many thanks in advance!

  2. #2
    Sencha User dimebag's Avatar
    Join Date
    Aug 2009
    Posts
    53

    Default

    Even the information if its possible at all would be helpful ....

    I only see examples with data in basic arrays

  3. #3
    Sencha Premium Member rivarecords's Avatar
    Join Date
    Apr 2010
    Location
    Fredrock, MD
    Posts
    24

    Default

    Would it be that difficult to re format your json?

  4. #4
    Sencha User conorarmstrong's Avatar
    Join Date
    Mar 2008
    Location
    Northern Ireland
    Posts
    224

    Default

    don't just come on here and expect other users to do the work for you. have you even TRIED doing this yourself? if so, show us what you have done.

    we need to see your store, column model, grid definition and the full JSON (to identify the root).
    ------------------------------------------
    Conor Armstrong
    tw: @evathedog
    web: rockstown.com

    Ext.ux.form.AutoCombo
    Ext.ux.SimpleIFrame
    Ext.ux.form.ToolFieldSet

    Knowledge is realising that the street is one-way, wisdom is looking both directions anyway.

  5. #5
    Sencha User dimebag's Avatar
    Join Date
    Aug 2009
    Posts
    53

    Default

    @rivarecords: Would not be difficult, but if there is a JsonStore I would expect that it can parse Json.

    Here is a very simplified example (which doesnt work):
    Code:
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Insert title here</title>
        
        <link rel="stylesheet" type="text/css" href="js/ext-3.3.2/resources/css/ext-all.css" />
        <script type="text/javascript" src="js/ext-3.3.2/adapter/ext/ext-base-debug.js"></script>
        <script type="text/javascript" src="js/ext-3.3.2/ext-all-debug.js"></script>
    
        <script type="text/javascript">
        Ext.onReady(function(){
    
    
            myClass = function (cfg) {
    
                var myData = [
                    {'groupname1':[{'col1':'Data1','col2':'Data2'},{'col1':'Data3','col2':'Data4'}]},
                    {'groupname2':[{'col1':'Data5','col2':'Data6'},{'col1':'Data7','col2':'Data8'}]},
                    {'groupname3':[{'col1':'Data9','col2':'Data10'},{'col1':'Data11','col2':'Data12'}]}
                ];
    
                this.store = new Ext.data.ArrayStore({
    
                    storeId: 'EntryStore',
                    fields: [
                        'col1','col2'
                    ]
                });    
                this.store.loadData(myData);
    
    /*
                this.store = new Ext.data.JsonStore({
    
                    storeId: 'EntryStore',
                    fields: [
                        'col1','col2'
                    ]
                });    
                this.store.loadData(myData);
    */
                
    
                this.gridPanelEntries = new Ext.grid.EditorGridPanel({
                    
                    title: 'Entries',
                    store: this.store,
                    autoExpandColumn: 'col1',
                    frame: true,
                    autoHeight: true,
                    layout: 'fit',
                    selModel: new Ext.grid.RowSelectionModel({
                        singleSelect: true
                    }),
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            header: 'Column 1',
                            sortable: true,
                            resizable: true,
    //                        width: 100,
                            dataIndex: 'col1'
                        }
                        ,{
                            xtype: 'gridcolumn',
                            header: 'Column 2',
                            sortable: true,
                            resizable: true,
    //                        width: 100,
                            dataIndex: 'col2'
                        }
                    ]
                });
    
    
    
                Ext.apply (cfg, {
    
                    //title: 'Dummy',
                    //border: false,
                    autoShow: false,
                    frame: true,
                    items: [
                                this.gridPanelEntries
                            ]
                }, {});
                
                myClass.superclass.constructor.call (this, cfg);
            }
    
    
            
            Ext.extend (myClass, Ext.Panel, {});
    
    
            // Draw the panel
            new myClass({
    
                renderTo: Ext.getBody(),
                width: 400,
                height: 350
            });
        });
    
    
        </script>
        
    </head>
    
    <body>
    
    </body>
    </html>

  6. #6
    Sencha Premium Member rivarecords's Avatar
    Join Date
    Apr 2010
    Location
    Fredrock, MD
    Posts
    24

    Default

    Hi dimebag, I'm a fan and your wha pedal is the bomb.

    For your grouping grid view, you need a grouping store with a json reader. The json reader expects a root; your json has 3 roots. Take a look at the grouping store and the json reader in the API. In the grouping example, the reader is an array reader and I think thats whats throwing you off.

    Oh, and your not using the grouping view in your grid; you'll need that.

  7. #7
    Sencha User dimebag's Avatar
    Join Date
    Aug 2009
    Posts
    53

    Default

    I like my whammy (digitech) most, or lets say I did!

    I know about the example, I just thought I could do it without reformatting my Json!

    Many thanks!

Similar Threads

  1. populate comboBox using remote JSON store
    By zohaib in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 26 Nov 2009, 6:21 AM
  2. JSON store does not populate with remote data
    By Musical Shore in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 29 Oct 2009, 5:56 AM
  3. [solved] populate comboBox using remote JSON store
    By marcvs in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 14 Sep 2009, 3:59 AM
  4. Grid+Store reading JSON complex Data
    By WLiCPSC in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 10 Mar 2009, 11:16 AM
  5. Populate a multi-tab form with a complex JSON structure
    By jstockton in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 8 Oct 2008, 7:05 AM

Posting Permissions

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