1. #1
    Sencha Developer
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    482
    Vote Rating
    1
    Wolfgang is on a distinguished road

      0  

    Default Solved: Help on building a JSONDataGrid Class

    Solved: Help on building a JSONDataGrid Class


    Hello,

    following the example of PropsGrid, i tried to build my own JSONDataGrid Class.

    Basically the Class should get the JSONdata via a php script and render it.

    The code:
    Code:
    // ***************** DM *****************************************
    // create new DM class. Will be extended later
    YAHOO.ext.grid.CallerListDM = function(schema, source, pageSize){
        YAHOO.ext.grid.CallerListDM.superclass.constructor.call(this, []);
    
        this.schema = {
            root: 'data',
            totalProperty: 'totalCount',
            id: 'nothing',
            fields: ['received','dialed', 'entity', 'calldate', 'duration']
        };
    
        this.initPaging(source, pageSize);
        this.remoteSort = true;
        // Make all paging/sorting requests pass "pageNum" instead of "page"
        this.paramMap['page'] = 'pageNum';
        this.loadPage(1);
    };
    
    
    
    
    // extend new DM class to be used with the default DM and add/redefine functions.
    YAHOO.extendX(YAHOO.ext.grid.CallerListDM, YAHOO.ext.grid.JSONDataModel, {
        setSource : function(o){
            this.source = o;
        },
    
        getRowId: function(rowIndex){
            return this.data[rowIndex].key;
        },
    
        getSource : function(){
            return this.source;
        }
    });
    
    
    
    // ***************** CM *****************************************
    YAHOO.ext.grid.CallerListCM = function(dataModel){
        // sortTypes provide support for custom sorting comparison functions
        var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;
    
        YAHOO.ext.grid.CallerListCM.superclass.constructor.call(this, [
            {header: "Calldate", width: 120, sortable: true, sortType: sort.asUCString, renderer: this.renDate},
            {header: "From", width: 150, sortable: true, sortType: sort.asUCString},
            {header: "To", width: 100, sortable: true, sortType: sort.asUCString},
            {header: "Entity", width: 50, sortable: true, renderer: this.renDirection},
            //{header: "Calldate", width: 120, sortable: true, sortType: sort.asUCString, renderer: renDdate},
            {header: "Duration", width: 75, sortable: true, sortType: sort.asUCString, renderer: this.renDuration}
        ]);
        // the JSON data are not in the order we need, so we reorder the columns
        //setDataIndex(Number col, Number dataIndex) : void
        // move Calldate to the 1. position
        this.setDataIndex(0, 3);
        this.setDataIndex(1, 0);
        this.setDataIndex(2, 1);
        this.setDataIndex(3, 2);
        this.setDataIndex(4, 4);
    
    };
    
    
    // extend new CM model with the default CM model and add/redefine functions
    YAHOO.extendX(YAHOO.ext.grid.CallerListCM, YAHOO.ext.grid.DefaultColumnModel, {}
    );
    
    
    
    
    // render italic
    YAHOO.ext.grid.CallerListCM.prototype.renItalic = function (value){
            return '' + value + '';
    };
    
    // render direction using images depending on in/out
    YAHOO.ext.grid.CallerListCM.prototype.renDirection = function (bIncoming) {
            var img;
            if (bIncoming) { return '[img]admin/public/img/incoming.gif[/img]';}
            else { return '[img]admin/public/img/outgoing.gif[/img]';}
    };
    
    // render duration xx:yy:zz
    YAHOO.ext.grid.CallerListCM.prototype.renDuration= function (dur) {
            var seconds = parseInt(dur)%60;
            var minutes = Math.floor((parseInt(dur)/60)%60);
            var hours = Math.floor(parseInt(dur)/3600);
            var ret;
            // padding
            if (seconds < 10 ) {seconds = '0' + seconds;}
            if (minutes < 10 ) {minutes = '0' + minutes;}
            ret = minutes + ":" + seconds;
            if (hours>0) {ret = hours + ":" + ret;}
            return ret;
    };
    
    // render date with bold dd:mm:yy
    YAHOO.ext.grid.CallerListCM.prototype.renDate = function (date) {
            // sep. date and time
            var dd = date.split(" ");
            var ar = dd[0].split("-");
            return "" + ar[2] + "-" + ar[1] + "-" + ar[0] + " [" + dd[1] + "]";
    };
    
    
    
    
    // create the new grid class
    YAHOO.ext.grid.CallerListGrid = function(container, schema, source, pageSize){
        var dm = new YAHOO.ext.grid.CallerListDM(schema, source, pageSize);
        var cm =new YAHOO.ext.grid.CallerListCM(dm);
        dm.sort(cm, 0, 'DESC');
        YAHOO.ext.grid.CallerListGrid.superclass.constructor.call(this, container, dm, cm);
    };
    
    
    // extend the new grid class with the editor grid
    YAHOO.extendX(YAHOO.ext.grid.CallerListGrid, YAHOO.ext.grid.Grid, {}
    );
    
    // build and show the grid
    var callerList = new YAHOO.ext.grid.CallerListGrid(
        'callerList',
        {
            root: 'data',
            totalProperty: 'totalCount',
            id: 'nothing',
            fields: ['received','dialed', 'entity', 'calldate', 'duration']
        },
        'calls/resp_mycalls.php',
        20
    );
    callerList.render();
    callerList.getSelectionModel().selectFirstRow();

    Wolfgang

  2. #2
    Sencha Developer
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    482
    Vote Rating
    1
    Wolfgang is on a distinguished road

      0  

    Default


    well i fixed some bugs and updated the code / errormessages. Still not working...

    //Update
    seems to work now. Once i get it, i'll update the code above.

    //Update
    I updated the code above to the working version and added a post to the example section:
    http://www.yui-ext.com/forum/viewtopic.php?p=7661#7661

Similar Threads

  1. Ext.BorderLayout, inside of a Tab [Solved]
    By Saeven in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 23 Mar 2007, 4:25 AM
  2. Building a Custom Grid Class using the JSONDataModel
    By Wolfgang in forum Community Discussion
    Replies: 38
    Last Post: 16 Feb 2007, 2:19 AM
  3. Building a custom Grid Class based on defaultDataModel (Log)
    By Wolfgang in forum Community Discussion
    Replies: 0
    Last Post: 13 Jan 2007, 9:24 AM
  4. Building YUI-ext from SVN
    By hunkybill in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 24 Nov 2006, 5:03 PM
  5. [solved] how to use the dom helper ???
    By cobalt in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 14 Nov 2006, 9:05 AM