PDA

View Full Version : best practice for combined/cumulative/multiple cell renderers in a grid



jonnycattt
23 Aug 2007, 3:14 AM
greetings All. I'm just looking for the preferred method or best practice of having multiple renderers for a given grid cell. Let's say I have 6 columns total. 1 requires date formatting; 1 requires money formatting. Potentially all 6 (but maybe, maybe not...it's all dynamic based on what the DB tells me) require "validation" formatting, i.e. different colors and quicktips and whatnot.

Independently it all works great. But if i have a date-formatting renderer and also need the validation renderer, I'm looking for how to best accomplish this. i basically just don't want to duplicate all the validation code inside the money and date renderers; instead, i need to "chain" them.

thanks for advice, pointers to documentation, examples, etc.

Best,

Marc E.

BernardChhun
23 Aug 2007, 5:12 AM
I had to do it just for the fun of it :)) :


var multipleRenderer = function(){
return {
init: function(value, config){
this.config = config; // {black: true, bold:true, italic: true}
this.initialValue = value;
this.renderedValue = "";
}
, makeItBlack : function(){
this.renderedValue = "<span style='color:black;'>" + this.getValue() + "</span>";
}
, makeItBold : function(){
this.renderedValue = "<span style='font-weight:bold;'>" + this.getValue() + "</span>";
}
, makeItItalic : function(){
this.renderedValue = "<span style='font-style:italic;'>" + this.getValue() + "</span>";
}

, getValue : function(){
if (this.renderedValue != ""){
return this.renderedValue;
}else{
return this.initialValue;
}
}
, render : function(){
for (key in this.config){
if (this.config[key]){
switch(key){
case "black": this.makeItBlack(); break;
case "bold" : this.makeItBold(); break;
case "italic" : this.makeItItalic(); break;
}
}
}
return this.renderedValue;
}
}
}();

make the magic happen by doing the following:


multipleRenderer.init("foo", {black: true, bold:true, italic: true});
multipleRenderer.render();

this is a simple solution I came up with :"> but I think you'll figure out how to apply this code to your own problem.

jonnycattt
23 Aug 2007, 5:51 AM
Bernard, you're a prince of the city. Exactly the kind of smart stuff I was looking for.

Thanks a lot.

Marc

jonnycattt
24 Aug 2007, 3:15 AM
Actually, Bernard, I do have a question. And bear with me, this is like day 2 of working with ExtJS so I'm sure I'm missing something basic.

If my column model looks like this:



{ dataIndex:'SomeColumn',
header: 'SomeHeader',
id:'SomeID',
renderer:multipleRenderer
}

How do I get the init in there for each row, since the grid itself is going to call the renderer with the data,cell,record,rowIndex,columnIndex,store params?

Thanks Bernard.

Marc

BernardChhun
24 Aug 2007, 3:45 AM
make single renderer function that you will pass in the config option:
the code is based on the "black, bold, italic" multipleRenderer I've coded yesterday.


function myRenderer(value, cell, row, index){
// the config you are going to give to multipleRenderer :)
var renderConfig = {bold: false, black: false, italic: false};
// use an if sentence to check the status of your data row.
// this could be done for every renderers
if (row.data.someProperty == "bold"){
renderConfig.bold = true;
}
// wrap the value with your renderers
multipleRenderer.init(value, renderConfig);
// return it!
return multipleRenderer.render();
}

then



{ dataIndex:'SomeColumn',
header: 'SomeHeader',
id:'SomeID',
renderer: myRenderer
}

there ya go dude!

jonnycattt
24 Aug 2007, 4:02 AM
perfect man. that's what i was getting toward in the meantime and i'm glad to see i was working toward the correct approach. thanks a million Bernard.