PDA

View Full Version : [HowTo] Grid row strikethrough effect



uniring
6 Nov 2009, 8:51 AM
I just implemented this effect and, searching the forums I don't found any solution to do this how I've done (creating a line that really strikethrough all the row).

I can make an extension that do this better (or cleany), but this way is simple and doesn't need any extension.

I've done this using a simple renderer at the first column of the grid (the first column where you want the line to start). There are some variables that you need to tune up to make this work well with your grid, but it's easy.



function renderStrike(value,p,rec,row) {
var roffs = 30;
var grid = Ext.getCmp('grid_id');
var w = grid.getColumnModel().getTotalWidth() - roffs;
var posY = (row*21)+11;
if (rec.data.field > 3) // Condition to strikethrough
value = '<div style="position:absolute; top:'+posY+'px; width:'+w+'px; height:1px; background-color:#000000;"></div>'+value
return value;
}


Theorically, the only thing that must be tuned is the roffs (right offset) variable, this is because if you have a checkboxes column, a row expander column or some other column that must not be strikethroughted, the width of the line need to be adjusted (30 is working in my grid with a rowexpander column).

If you're using a different theme for the grid, you should change the 21 (row height) and 11 (distance from top of the grid).

Obviously, the condition and the grid_id must be changed.

Also, if your grid is not using forceFit, you should add an event handler to refresh the view if some column is resized.



grid.on('columnresize', function() { this.getView().refresh(); });


And if you have your grid in a container that can be resized, you need to add another event handler:



grid.on('resize', function() { this.getView().refresh(); });


I tested this on FF3.5 and Chrome, i don't know if this works well in IE but i think it should.

I know that code can be improved and if you want to improve it, please, do it and share the result with us.

I dont know if the Help forum is the correct forum for this, but as this isn't an extension or a plugin i writed it here, feel free to move it if i'm wrong.

Here is an screen of the result: