ListView - Row styling plugin

[ChrisLeM]

Based on Animal's suggestion of post-load DOM manipulation in this thread http://www.sencha.com/forum/showthread.php?74408 this plugin allows you to simply add a cls to each row in a list


Ext.ns('Ext.ux.plugins');
Ext.ux.plugins.FormattedListView = function(config){

// config should contain a cls attribute
Ext.apply(this, config);

this.init = function(listview){

this.listview = listview;

// Reformat on listview store updates
listview.mon(listview.store, {
load: this.formatRows,
datachanged: this.formatRows,
remove: this.formatRows,
loadexception: this.formatRows,
add: this.formatRows,
buffer: 50,
scope: this
});

// Need to reformat the rows after resizing columns
listview.on({
afterrender: function(t){
if (t.colResizer && t.colResizer.tracker) {
t.mon(t.colResizer.tracker, {
dragend: this.formatRows,
buffer: 50,
scope: this
});
}
},
scope: this
});
}
}

Ext.ux.plugins.FormattedListView.prototype.formatRows = function(){

var aryRows = Ext.DomQuery.jsSelect('div dl', this.listview.getEl().dom);

Ext.each(aryRows, function(i, ix, l){
var e = new Ext.Element(i);
e.addClass(Ext.value(this.cls, ''));
}, this);
}

Example usage:


var listView = new Ext.list.ListView({
plugins: new Ext.ux.plugins.FormattedListView({
cls: 'mylistrowcls'
}),
store: ...
columns:...
etc
});

Tested with Ext3.3.1, IE8/Chrome7/FF3.6. Could be used to provide alternating coloured rows, performance will likely become an issue for very large lists.

Works well for me, hope it can be useful to someone else too. Still quite new to this, any constructive criticism gratefully accepted :)

Chris

[Condor]

Wouldn't it be much easier to use:

var listView = new Ext.list.ListView({
tpl: new Ext.XTemplate(
'<tpl for="rows">',
'<dl<tpl if="xindex % 2"> class="lv-row-odd"</tpl>>',
'<tpl for="parent.columns">',
'<dt style="width:{[values.width*100]}%;text-align:{align};">',
'<em unselectable="on"<tpl if="cls"> class="{cls}</tpl>">',
'{[values.tpl.apply(parent)]}',
'</em></dt>',
'</tpl>',
'<div class="x-clear"></div>',
'</dl>',
'</tpl>'),
store: ...
columns: ...
...
});
(this should do alternating row colors based on the lv-row-odd class)

[ChrisLeM]

Yes it appears so!

Guess the tpl syntax was putting me off, but it makes sense once you delve into it. Was also unsure if it would reapply the striping after filtering the store, but it appears to do so.

Thanks Condor

[Condor]

Correct, but it does not restripe when adding or removing records.