Grid appears to be empty

[nick saint]

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' }
]}

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

[nick saint]

any ideas?

[Condor]

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?

[nick saint]

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

[mjlecomte]

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.

[nick saint]

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...

 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