PDA

View Full Version : ArrayColumn subclass to display array values on separate lines



sumit.madan
17 Sep 2010, 5:43 AM
A simple Ext.grid.Column subclass with a renderer to display values of arrays (in store fields) on separate lines in a GridPanel. By default, the grid columns displays array values as comma separated.

This subclass also allows you to limit the no. of values displayed and include a message if values exceed the limit (See the screenshot).



Ext.ux.grid.ArrayColumn = Ext.extend(Ext.grid.Column, {
limit: true,
ceiling: 4,
message: '(and {0} others)',
constructor: function(config) {
Ext.ux.grid.ArrayColumn.superclass.constructor.call(this, config);
this.renderer = function(value, meta, record, rowIndex, colIndex, store) {
var displayVal = '';
if(value instanceof Array) {
for(var i = 0; i < value.length; i++) {
if(this.limit === true && i === this.ceiling - 1 && value.length > this.ceiling) {
displayVal = displayVal + '<div style="font-weight: bold;">' +
String.format(this.message, value.length - i) +
'</div>';
break;
} else {
displayVal = displayVal + '<div>' + value[i] + '</div>';
}
}
} else {
displayVal = value;
}
return displayVal;
}
}
});

Ext.apply(Ext.grid.Column.types, {
arraycolumn: Ext.ux.grid.ArrayColumn
});