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
Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi