1. #1
    Ext User
    Join Date
    Oct 2008
    Posts
    78
    Vote Rating
    0
    nick saint is on a distinguished road

      0  

    Default Grid appears to be empty

    Grid appears to be empty


    Hi,
    I do not why but the grid appears to be empty. In the debugger I can see that rows are formed but no data gets into it.
    Looks like it's very small....

    This is an example JSON data I use:

    {
    data: [
    { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
    { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' }
    ]}

    Code:
    Ext.onReady(function(){
    
        Ext.data.DynamicJsonReader = function(config){
            Ext.data.DynamicJsonReader.superclass.constructor.call(this, config, []);
            };
    
        Ext.extend(Ext.data.DynamicJsonReader, Ext.data.JsonReader, {
            getRecordType : function(data) {
                var i = 0,
                arr = [];
                for (var name in data[0]){
                    arr[i++] = name;
                    } // is there a built-in to do this?
                this.recordType = Ext.data.Record.create(arr);
                return this.recordType;
                },
                readRecords : function(o){ // this is just the same as base class, with call to getRecordType injected
                this.jsonData = o;
                var s = this.meta;
                var sid = s.id;
                var totalRecords = 0;
                if(s.totalProperty){
                    var v = parseInt(eval("o." + s.totalProperty), 10);
                    if(!isNaN(v)){
                        totalRecords = v;
                        }
                    }
    
                    var root = s.root ? eval("o." + s.root) : o;
                    var recordType = this.getRecordType(root);
                    var fields = recordType.prototype.fields;
                    var records = [];
                    for(var i = 0; i < root.length; i++){
                        var n = root[i];
                        var values = {};
                        var id = (n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
                        for(var j = 0, jlen = fields.length; j < jlen; j++){
                            var f = fields.items[j];
                            var map = f.mapping || f.name;
                            var v = n[map] !== undefined ? n[map] : f.defaultValue;
                            v = f.convert(v);
                            values[f.name] = v;
                            }
                            var record = new recordType(values, id);
                            record.json = n;
                            records[records.length] = record;
                            }
                            return {
                                records : records,
                                totalRecords : totalRecords || records.length
                                };
                                }
                                });
    
        Ext.grid.DynamicColumnModel = function(store){
            var cols = [];
            var recordType = store.recordType;
            var fields = recordType.prototype.fields;
            for (var i = 0; i < fields.keys.length; i++){
                var fieldName = fields.keys[i];
                var field = recordType.getField(fieldName);
                cols[i] = {header: field.name, dataIndex: field.name, width:'100px'};
                }
          Ext.grid.DynamicColumnModel.superclass.constructor.call(this, cols);
        };
    
        Ext.extend(Ext.grid.DynamicColumnModel, Ext.grid.ColumnModel, {});
    
        var ds = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({url: 'http://localhost/gridlink.php'}),
            reader: new Ext.data.DynamicJsonReader({root: 'data'}),
            remoteSort: true
            });
    
           ds.on('load', function() { // Reset the Store's recordType
           ds.recordType = ds.reader.recordType;
           ds.fields = ds.recordType.prototype.fields;
           });
    
        ds.load();
    
    // Create the grid
       var mygrid = new Ext.grid.EditorGridPanel({
           //title: 'test',
           //id: 'test',
           width: 600,
           height: 200,
           ds: ds,
           cm: new Ext.grid.DynamicColumnModel(ds),
           selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
           enableColLock:true,
           renderTo: Ext.getBody()
           });
    });
    Thank you for help
    Nick

  2. #2
    Ext User
    Join Date
    Oct 2008
    Posts
    78
    Vote Rating
    0
    nick saint is on a distinguished road

      0  

    Default


    any ideas?

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    If DynamicJsonReader/DynamicColumnModel is your own code then you should really debug yourself...

    Could you also post some example data so I can test this?

  4. #4
    Ext User
    Join Date
    Oct 2008
    Posts
    78
    Vote Rating
    0
    nick saint is on a distinguished road

      0  

    Default


    I have posted it

    {
    data: [
    { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
    { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' }
    ]}

    Thank you for helping. I am just starting and really want to get into it.
    Thanks

  5. #5
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    You may be rendering your grid too late.

    Try moving the store.load call after you create the gridPanel.

    I generally take that a step farther and put store.load() calls inside the render event for the grid, just to make sure the grid's ready to go.

    So:
    1. render grid
    2. load store

    And 2. should preferably be inside the render event of grid.

  6. #6
    Ext User
    Join Date
    Oct 2008
    Posts
    78
    Vote Rating
    0
    nick saint is on a distinguished road

      0  

    Default


    Thank you for suggestions but still nope.
    The result is the same.
    I tried to make the other way but ...
    The sample JSON data is the same (only 2 items)
    Even the bbar says there is something ut nothing goes out...

    Code:
     Ext.ns('RESGRID');
     RESGRID = Ext.extend(Ext.grid.GridPanel, {
        title: 'Title',
        initComponent:function() {
            Ext.apply(this, {
                 ds: ds,
                 cm: new Ext.grid.DynamicColumnModel(ds),
                 viewConfig:{forceFit:true},
                 loadMask:true
            });
    
            this.bbar = new Ext.PagingToolbar({
                 store:this.ds,
                 displayInfo:true,
                 pageSize:10
            });
            RESGRID.superclass.initComponent.apply(this, arguments);
            this.on({
                afterlayout:{
                scope:this,
                    single:true,
                    fn:function() {
                    ds.load();
                }}
            });
        }
        ,onRender:function() {
    
            RESGRID.superclass.onRender.apply(this, arguments);
            ds.load({params:{start:0, limit:10}});
        }
    });
    Ext.reg('grid', RESGRID);
    May be there is something i still cannot get right? ...
    Thank you
    Nick
    Attached Images

  7. #7
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Are you sure you want this?
    Code:
    Ext.reg('grid', RESGRID);
    Do you realize you're changing the xtype universally at that point so anytime you use a grid xtype you'll be using that Class?

    I didn't mean to imply that you had to use the onRender event.

    I just meant you could use:

    Code:
        var ds = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({url: 'http://localhost/gridlink.php'}),
            reader: new Ext.data.DynamicJsonReader({root: 'data'}),
            remoteSort: true
        });
    
        ds.on('load', function() { // Reset the Store's recordType
            ds.recordType = ds.reader.recordType;
            ds.fields = ds.recordType.prototype.fields;
        });
    
        ds.load();
    
    // Create the grid
       var mygrid = new Ext.grid.EditorGridPanel({
           //title: 'test',
           //id: 'test',
           width: 600,
           height: 200,
           ds: ds,
           cm: new Ext.grid.DynamicColumnModel(ds),
           selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
           enableColLock:true,
           renderTo: Ext.getBody()
           });
    });
    mygrid.on({
        render: {
            fn: function () {
                mygrid.getStore().load();//don't forget to put in any paging params, etc.
            }
        }
    });

  8. #8
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Set some breakpoints inside your initComponent and see what's going on, what is defined, etc. You use this.ds, but I don't think that is defined is it?

  9. #9
    Ext User
    Join Date
    Oct 2008
    Posts
    78
    Vote Rating
    0
    nick saint is on a distinguished road

      0  

    Default


    Thank you for help. The grid remained to be the same, nothing goes out. I will start all over tomorrow. Have to get to know how it works.
    Thank you all
    Nick

  10. #10
    Ext User
    Join Date
    Oct 2008
    Posts
    78
    Vote Rating
    0
    nick saint is on a distinguished road

      0  

    Default


    Is JSON data i am using ok?