PDA

View Full Version : Solved: Help on building a JSONDataGrid Class



Wolfgang
2 Jan 2007, 1:47 AM
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:


// ***************** 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 'admin/public/img/incoming.gif';}
else { return 'admin/public/img/outgoing.gif';}
};

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

Wolfgang
2 Jan 2007, 11:35 AM
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