Results 1 to 9 of 9

Thread: JsonReader and metaData

  1. #1
    Sencha User
    Join Date
    Oct 2009
    Posts
    21

    Default JsonReader and metaData

    Greetings all:

    I am rather new to ExtJS and am having a terrible time trying to utilize the metaData properties for the JsonReader.

    I have seen many examples leading in all different directions. I am simply attempting to let the data dictate the fields and column model. It is straight forward for the fields, but how does one create a columnModel through the metaData property?

  2. #2
    Sencha User BitPoet's Avatar
    Join Date
    Sep 2008
    Location
    Bavaria
    Posts
    277

    Default

    Supposed you are delivering an array of column configs in a property 'colConfig' of your metadata back to your json reader, then it should be as simple as (assuming an existing grid):
    Code:
    var jstore = new Ext.data.JsonStore({
      url: '/path/to/your/store/backend',
      baseParams: { ...whatever... },
      listeners: {
        metachange: function(store, meta) {
          Ext.getCmp('id-of-your-grid').getColumnModel().setConfig(meta.colConfig);
        }
      }
    });

  3. #3
    Sencha User
    Join Date
    Oct 2009
    Posts
    21

    Default

    Here is the data returned from the server:

    Code:
    {
        "metaData":{
            "root":"data",
            "fields":["k","19SEP2009","17OCT2009","15JAN2010","17APR2010","22JAN2011","21JAN2012"],
            "colModel":[
                {"dataIndex":"k","header":"Strikes","width":50},
                {"dataIndex":"19SEP2009","header":"SEP 19, 2009"},
                {"dataIndex":"17OCT2009","header":"OCT 17, 2009"},
                {"dataIndex":"15JAN2010","header":"JAN 15, 2010"},
                {"dataIndex":"17APR2010","header":"APR 17, 2010"},
                {"dataIndex":"22JAN2011","header":"JAN 22, 2011"},
                {"dataIndex":"21JAN2012","header":"JAN 21, 2012"}
            ]
        },
        "data":[
            {"k":"170.00","19SEP2009":"a","17OCT2009":"a","15JAN2010":"a","17APR2010":"a","22JAN2011":"a"},
            {"k":"175.00","19SEP2009":"a","17OCT2009":"a","15JAN2010":"a","17APR2010":"a","22JAN2011":"a"},
            {"k":"180.00","19SEP2009":"a","17OCT2009":"a","15JAN2010":"a","17APR2010":"a","22JAN2011":"a"},
            {"k":"185.00","19SEP2009":"a","17OCT2009":"a","15JAN2010":"a","17APR2010":"a","22JAN2011":"a"}
        ]
    }
    This is the JsonStore:

    Code:
            callsStore = new Ext.data.JsonStore({
                url: '/bin/php/do/optionsmatrix.do.php',
                storeId: 'myStore',
                root: 'data',
                reader: new Ext.data.JsonReader(),
                autoLoad: true,
                listeners: {
                    metachange: function(store, meta) {
                        alert('a');
                        Ext.getCmp('calls').getColumnModel().setConfig(meta.colModel);
                    }
                }
            });
    This is the GridPanel:

    Code:
        var callsGrid = new Ext.grid.GridPanel({
                height: 400,
                width: 800,
                frame: true,
                border: true,
                title: 'Call Options for SYMBOL',
                store: callsStore,
                colModel: colModel,
                loadMask: false,
                //stripeRows: true,
                listeners: {
                    render: {
                        fn: function(){
                            callsStore.load({
                                params: {
                                    // calls or puts
                                    r: 'c',
                                    // ticker
                                    t: 'GS',
                                    // low ticker
                                    srl: 170,
                                    // high ticker
                                    srh: 185
                                }
                            });
                        }
                    }
                },
                tbar: ['-', {
                        text:'Analyze Trade',
                        tooltip:'Analyze trade with selected positions',
                        handler: analyzeTrade
                        //iconCls:'add'
                    }, '-', {
                        text:'Clear All Trades',
                        tooltip:'Blah blah blah blaht',
                        handler: clearTrades
                        //iconCls:'option'
                    }, '-', {
                        text:'Volatility Skew',
                        tooltip:'Blah blah blah blaht',
                        handler: buttonPress
                        //iconCls:'option'
                    }, '-', {
                        text:'Sentiment Charts',
                        tooltip:'Blah blah blah blaht'
                        //iconCls:'option'
                    }, '-', {
                        text:'Volatility Charts',
                        tooltip:'Blah blah blah blaht'
                        //iconCls:'option'
                    }, '-', {
                        text:'Trade Breakeven and ROI',
                        tooltip:'Blah blah blah blaht'
                        //iconCls:'option'
                    }, '-']
                /*
                bbar: new Ext.PagingToolbar({
                    store: store,
                    pageSize: 50,
                    //plugins: [filters]
                })
                */
            });
    When the metaChange event fires, the alert pops up so I know that works. However, the columnModel does not change. How do I define the column model in the grid to begin with?

  4. #4
    Sencha User BitPoet's Avatar
    Join Date
    Sep 2008
    Location
    Bavaria
    Posts
    277

    Default

    Assing your callsGrid an id of 'calls' and it should work like a charm, it does here with the code above (and taking out unavailable things like the button handlers). Btw., you don't need to explicitely assign a JsonReader to your store, JsonStore creates it by default.

  5. #5
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    Just missing one final step
    Code:
    listeners: {
     metachange: function(store, meta) {
       alert('a');
       var G = Ext.getCmp('calls'), CM = G.getColumnModel();
       CM.setConfig(meta.colModel);
       G.reconfigure(store,CM);
     }
    }
    "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.


  6. #6
    Sencha User
    Join Date
    Oct 2009
    Posts
    21

    Default

    It works, thanks a ton. Given it took me about three weeks, I'll post the code for others.

    JsonStore:
    Code:
            callsStore = new Ext.data.JsonStore({
                url: '/bin/php/do/optionsmatrix.do.php',
                storeId: 'myStore',
                root: 'data',
                listeners: {
                    metachange: function(store, meta) {
                        var g = Ext.getCmp('callsGrid')
                        var cm = g.getColumnModel();
                        cm.setConfig(meta.colModel);
                        g.reconfigure(store, cm);
                    }
                }
            });
    ColumnModel:
    Code:
            colModel = new Ext.grid.ColumnModel({
                defaults: {
                    align: 'left',
                    risizable: false,
                    sortable: false,
                    width: 150
                }
            });
    GridPanel:
    Code:
            var callsGrid = new Ext.grid.GridPanel({
                id: 'callsGrid',
                height: 400,
                width: 800,
                frame: true,
                border: true,
                title: 'Call Options for SYMBOL',
                store: callsStore,
                colModel: colModel,
                loadMask: false,
                //stripeRows: true,
                listeners: {
                    render: {
                        fn: function(){
                            callsStore.load({
                                params: {
                                    // calls or puts
                                    r: 'c',
                                    // ticker
                                    t: 'GS',
                                    // low ticker
                                    srl: 170,
                                    // high ticker
                                    srh: 185
                                }
                            });
                        }
                    }
                }
            });
    Then of course I have a DIV element with id="calls" and I call the following to render:
    Code:
    callsGrid.render('calls');
    The JSON from the server looks like this:

    Code:
    {
        "metaData":{
            "root":"data",
            "fields":["k","19SEP2009","17OCT2009","15JAN2010","17APR2010","22JAN2011","21JAN2012"],
            "colModel":[
                          {"dataIndex":"k","header":"<strong>Strikes<\/strong>","width":50},
                {"dataIndex":"19SEP2009","header":"SEP 19, 2009"},
                {"dataIndex":"17OCT2009","header":"OCT 17, 2009"},
                {"dataIndex":"15JAN2010","header":"JAN 15, 2010"},
                {"dataIndex":"17APR2010","header":"APR 17, 2010"},
                {"dataIndex":"22JAN2011","header":"JAN 22, 2011"},
                {"dataIndex":"21JAN2012","header":"JAN 21, 2012"}
            ]
        },
        "data":[
            {
                "k":"<div class=\"matrixCell strike\"><strong>170.00<\/strong><\/div>",
                "19SEP2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "17OCT2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "15JAN2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "17APR2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "22JAN2011":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>"
            },{
                "k":"<div class=\"matrixCell strike\"><strong>175.00<\/strong><\/div>",
                "19SEP2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "17OCT2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "15JAN2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "17APR2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "22JAN2011":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>"
            },{
                "k":"<div class=\"matrixCell strike\"><strong>180.00<\/strong><\/div>",
                "19SEP2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "17OCT2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "15JAN2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "17APR2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "22JAN2011":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>"
            },{
                "k":"<div class=\"matrixCell strike\"><strong>185.00<\/strong><\/div>",
                "19SEP2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "17OCT2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "15JAN2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "17APR2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "22JAN2011":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>"
            }
        ]
    }
    Thanks again.

  7. #7

    Default

    Hi,

    I tried this but the grid does not render anything.

    I put the grid in a Panel.

    Thanks,

    Edit:

    Nvm, Got it to work
    Thanks for the codes.

  8. #8
    Sencha User
    Join Date
    Nov 2009
    Posts
    127

    Default

    This is driving me crazy I have tried about 4 different threads examples removed all clutter and still nothing works, please help me figure out what I am missing:

    This is the index.php page that loade ExtJS:

    Code:
    new Ext.Viewport({
                  layout: 'border',
                  renderTo: Ext.getBody(),
                  items:
                  [
                    {
                      region: 'center',
                      layout: 'fit',
                      items: showGridResults()
                    }
                  ]
                });
    I define the showGridResults() in a grid.js file shown below:

    Code:
    function showGridResults()
    {
      var callsStore = new Ext.data.JsonStore({
        url: 'test.php',
        //storeId: 'myStore',
        root: 'data',
        listeners: {
          metachange: function(store, meta) {
            var g = Ext.getCmp('callsGrid')
            var cm = g.getColumnModel();
            cm.setConfig(meta.colModel);
            g.reconfigure(store, cm);
          }
        }
      });
      var colModel = new Ext.grid.ColumnModel({
        defaults: {align: 'left', resizable: false, sortable: false, width: 150}
      });
      var callsGrid = new Ext.grid.GridPanel({
        id: 'callsGrid',
        height: 400,
        width: 800,
        store: callsStore,
        colModel: colModel,
        loadMask: true,
        listeners: {
          render: {
            fn: function(){
              callsStore.load({params: {r: 'c', t: 'GS', srl: 170, srh: 185}});
            }
          }
        }
      });
      return callsGrid;
    }
    Finally I have the data file which I copied directly from the above example:

    PHP Code:
    <?php
    $buff 
    '{
        "metaData":{
            "root":"data",
            "fields":["k","19SEP2009","17OCT2009","15JAN2010","17APR2010","22JAN2011","21JAN2012"],
            "colModel":[
                          {"dataIndex":"k","header":"<strong>Strikes<\/strong>","width":50},
                {"dataIndex":"19SEP2009","header":"SEP 19, 2009"},
                {"dataIndex":"17OCT2009","header":"OCT 17, 2009"},
                {"dataIndex":"15JAN2010","header":"JAN 15, 2010"},
                {"dataIndex":"17APR2010","header":"APR 17, 2010"},
                {"dataIndex":"22JAN2011","header":"JAN 22, 2011"},
                {"dataIndex":"21JAN2012","header":"JAN 21, 2012"}
            ]
        },
        "data":[
            {
                "k":"<div class=\"matrixCell strike\"><strong>170.00<\/strong><\/div>",
                "19SEP2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "17OCT2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "15JAN2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "17APR2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "22JAN2011":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>"
            },{
                "k":"<div class=\"matrixCell strike\"><strong>175.00<\/strong><\/div>",
                "19SEP2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "17OCT2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "15JAN2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "17APR2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "22JAN2011":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>"
            },{
                "k":"<div class=\"matrixCell strike\"><strong>180.00<\/strong><\/div>",
                "19SEP2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "17OCT2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "15JAN2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "17APR2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "22JAN2011":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>"
            },{
                "k":"<div class=\"matrixCell strike\"><strong>185.00<\/strong><\/div>",
                "19SEP2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "17OCT2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "15JAN2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "17APR2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
                "22JAN2011":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>"
            }
        ]
    }'
    ;
    header('Content-Type: application/json');
    echo 
    $buff;
    I am getting nothing in my result window except for the quick flash of the loadMask

    I am running Ext 3.2.1

    Cheers,
    Alex

  9. #9
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750

    Default

    Alex,

    I've just tried your code with Ext JS 3.2.1 (and 3.3.1) on IE 8 and FF 3.6.15 (with IIS 7) and it works fine. Are you sure that your PHP is configured correctly? What does Firebug report?

Posting Permissions

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