custom row rendering question

[brumble]

I am currently doing a custom row render using ext 1.0. I actually have the codes done up in before alpha release in the following:


var renderRow = function(dataModel, row, rowIndex, colCount, renderers, dindexes){
switch (dataModel.getValueAt(rowIndex, 2)){
case 1:
YAHOO.util.Dom.setStyle(row, 'display', 'none');
YAHOO.util.Dom.addClass(row, 'thread');
break;
case 0:
if (dataModel.getValueAt(rowIndex, 1) > 1)
YAHOO.util.Dom.addClass(row, 'thread');
break;
}
if (dataModel.getValueAt(rowIndex, 10) === 0)
YAHOO.util.Dom.addClass(row, 'unread');
if (dataModel.getValueAt(rowIndex, 11) === 0)
YAHOO.util.Dom.addClass(row, 'notmine');
YAHOO.ext.grid.GridView.prototype.renderRow.call(this, dataModel, row, rowIndex, colCount, renderers, dindexes);
};

the call that fire the above code:

grid.getView().renderRow = renderRow;

and the current codes that i've done for Ext1.0 :

var renderRows = function(i){
var rowIndex = this.rowIndex;
switch (ds.getAt(rowIndex).data.Thread){
case 1:
YAHOO.util.Dom.setStyle(i, 'display', 'none');
YAHOO.util.Dom.addClass(i, 'thread');
break;
case 0:
if (ds.getAt(rowIndex).data.Blank > 1)
YAHOO.util.Dom.addClass(i, 'thread');
break;
}
if (ds.getAt(rowIndex).data.Read === 0)
YAHOO.util.Dom.addClass(i, 'unread');
if (ds.getAt(rowIndex).data.Mine === 0)
YAHOO.util.Dom.addClass(i, 'notmine');
//Ext.grid.GridView.renderRows.call();
};

the call in Ext 1.0 now:

grid.getView().renderRows = renderRows;

Well, i am doing a check for every row that is going to be displayed on the grid, if a certain criteria is fulfilled, the row's style would be changed and class would be added. What i understand from the previous codes is that the dataModel is passed in and the row together with rowIndex could be retrieved.. now i'm unable to find a way to replicate a similar method in Ext 1.0. I'm sorry for the bad understanding of the whole Ext system. I hope someone could point out my bad or direct me to some example which i couldn't seems to be able to find or search from the forum. Thanks!

with regards!

[KimH]

I think what you are looking for is so much easier (http://www.extjs.com/forum/showthread.php?p=23299#post23299) with 1.0 :)

PS. Change your "YAHOO." to use "Ext." instead.

[brumble]

Ya, i know it should be easier and better in performance in Ext 1.0, however i need to know how do i get the row and rowIndex like the way i did in yui-ext earlier..

[KimH]

...however i need to know how do i get the row and rowIndex...

Did you check the link I provided in previous post? The getRowClass function takes two arguments... the row and the rowIndex.

[brumble]

lol.. :)) i didn't notice that.. sorry was too impluse.. Thanks for the help!

[brumble]

Did you check the link I provided in previous post? The getRowClass function takes two arguments... the row and the rowIndex.

I have checked the link and now i'm able to get the row and index for condition checking but i couldn't seems to be able to set the style.


grid.render();
grid.getView().getRowClass = function(row, index){
switch (ds.getAt(index).data.Thread){
case 1:
Ext.DomHelper.applyStyles(row, {display:'none'});
Ext.DomHelper.append(row, 'thread');
break;
case 0:
if (ds.getAt(index).data.Blank > 1)
Ext.DomHelper.append(row, 'thread');
break;
}
if (ds.getAt(index).data.Read === 0)
Ext.DomHelper.append(row, 'unread');
if (ds.getAt(index).data.Mine === 0)
Ext.DomHelper.append(row, 'notmine');
};

Is there a way to set the style for the row? thanks!

[jack.slocum]

It is designed to use CSS for styling. getRowClass expects you to return a css class. The first parameter is the row's record object, not a DOM node. The dom node doesn't exist yet.

[jack.slocum]

Here is your code edited a little:


grid.getView().getRowClass = function(row, index){
var cls = '', data = row.data;
switch (data.Thread){
case 1:
cls = 'hide-me';
break;
case 0:
if (data.Blank > 1)
cls = 'thread';
break;
}
if (data.Read === 0)
cls += ' unread';
if (data.Mine === 0)
cls += ' notmine';
return cls;
};

You will have to defined the css classes.