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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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?

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar