PDA

View Full Version : Building a custom Grid Class based on defaultDataModel (Log)



Wolfgang
13 Jan 2007, 9:24 AM
Hello,

find attached an example that builds a custom Grid Class (in this example a syslog stlye logger).
The class does the following:
- Provide a simple grid based on the defaultDatamodel
- Define a custom ColumnModel
- Define custom renderer
- Define an eventhandler for doubleclick on a column (just an alert, that picks the data)
- Define a function "log" to add log messages

(save this code as LoggerListGrid.js)


// ***************** DM *****************************************
// no need to override, we can use the default

// ***************** CM *****************************************
YAHOO.ext.grid.LoggerListCM = function(dataModel){
// sortTypes provide support for custom sorting comparison functions
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;
YAHOO.ext.grid.LoggerListCM.superclass.constructor.call(this, [
{header: "Date", sortable: true, sortType: sort.asUCString, width: 120, renderer: this.renDate},
{header: "Type", sortable: true, sortType: sort.asUCString, width: 50, renderer: this.renState},
{header: "Source", sortable: true, sortType: sort.asUCString, width: 120, renderer: this.renItalic},
{header: "Message", sortable: true, sortType: sort.asUCString, width: 300}
]);
};

// extend new CM model with the default CM model and add/redefine functions
YAHOO.extendX(YAHOO.ext.grid.LoggerListCM, YAHOO.ext.grid.DefaultColumnModel, {}
);


// ****** RENDERER via prototype
// render italic
YAHOO.ext.grid.LoggerListCM.prototype.renItalic = function (value){
return '' + value + '';
};

// render direction using images depending on in/out
YAHOO.ext.grid.LoggerListCM.prototype.renState = function (state) {
var img;
var imgPath = 'admin/public/img/';
if (state == "Info") { img = 'info.gif';}
else if (state == "Warning") { img = 'warning.gif';}
else if (state == "Error") { img = 'error.gif';}
else if (state == 'Debug') { img = 'debug.gif';}

return '' + imgPath + img + '';
};

// render date with bold dd:mm:yy
YAHOO.ext.grid.LoggerListCM.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 logger grid class ***********
YAHOO.ext.grid.LoggerListGrid = function(container){
// DM
// schema: date, type, source, message
var curDate = (new Date()).dateFormat('Y-m-j G:i:s');
var dmData = [
[curDate, "Info", "Logger", "Logger started"]
];
var dm = new YAHOO.ext.grid.DefaultDataModel(dmData);

var cm = new YAHOO.ext.grid.LoggerListCM();
// sort col and order
dm.setDefaultSort(cm, 0, 'DESC');

YAHOO.ext.grid.LoggerListGrid.superclass.constructor.call(this, container, dm, cm);
this.on('celldblclick', this.onCellDblClick, this, true);
dm.on('rowsinserted', this.onRowsInserted, this, true);
};


// extend the new grid class with the editor grid
YAHOO.extendX(YAHOO.ext.grid.LoggerListGrid, YAHOO.ext.grid.Grid, {

onRowsInserted : function(){
// resizing is not suitable because it touches all cols
//this.getView().autoSizeColumns();
},

log : function(date, type, source, msg) {this.dataModel.addRow([date, type, source, msg]);},

onCellDblClick : function(grid, rowIndex, colIndex, e){
var aRowData = this.getRow(rowIndex);
alert('row:' + rowIndex + ' col:' + colIndex + ' - aRowData.textContent:' + aRowData.textContent);
}
});


/*
// build and show the grid, 'loogerGrid' is the id of the DIV where the logger is rendered
var loggerGrid = new YAHOO.ext.grid.LoggerListGrid('loggerGrid');
loggerGrid.render();
*/


in my environment i use borderlayout and have the logger in the "south" region.
To get access to it i added the function "log". (I post only the relevant parts for readability):


...
<script type="text/javascript" src="LoggerListGrid.js"></script>
...
NGGui = function(){
var layout;
var loggerGrid;
return {
init : function(){
layout = new YAHOO.ext.BorderLayout(document.body, {
hideOnLayout: true,
north: {
split:false,
initialSize: 56,
titlebar: false
},
south: {
split:true,
initialSize: 110,
minSize: 110,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true,
autoScroll:true
},
...
...
}); // end Borderlayout

// create the log window
loggerGrid = new YAHOO.ext.grid.LoggerListGrid('loggerGrid', {autoSizeColumns: true});
loggerGrid.render();
layout.add('south', new YAHOO.ext.GridPanel(loggerGrid, {title: 'Status', closable: false}));
...
...
}, // end init
log : function(type, source, msg) {
var curDate = (new Date()).dateFormat('Y-m-j G:i:s');
loggerGrid.log(curDate, type, source, msg);
}, // end log
...
...
} // end return NGGui


}(); // end NGGui

YAHOO.ext.EventManager.onDocumentReady(NGGui.init, NGGui, true);

...
...
<div id="loggerGrid></div>
...


now call the logger like this:


NGGui.log('Info', 'Client', 'Webservice is available')


Although it is quite simple, i hope that helps someone :wink:

Wolfgang