Hybrid View

  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
    94
    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
    6
    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