PDA

View Full Version : ActionColumn renderer how to call



schoonmoeder
26 Aug 2010, 11:27 PM
hello,

i'm trying to fix a custom renderer for my actioncolumn column in a gridpanel. but some how i can't find the right place where to put the example code. This is from the API documentation 3.3.0



var companyColumn = {
header: 'Company Name',
dataIndex: 'company',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
// provide the logic depending on business rules
// name of your own choosing to manipulate the cell depending upon
// the data in the underlying Record object.
if (value == 'whatever') {
//metaData.css : String : A CSS class name to add to the TD element of the cell.
//metaData.attr : String : An html attribute definition string to apply to
// the data container element within the table
// cell (e.g. 'style="color:red;"').
metaData.css = 'name-of-css-class-you-will-define';
}
return value;
}
}
in my code i tried it to put it into the actionColumn part and even in the items part but it is never called.

Animal
26 Aug 2010, 11:38 PM
ActionColumn has its own renderer. It has configs to allow you to add a class name.

schoonmoeder
26 Aug 2010, 11:44 PM
clear and where do i find these configs? because i can't find them in the api 3.3.0

my end result should be some renderer showing the first or second item in the row depending on a value that is given in the store / record. this showing can be different in every row.

thnx in advanced

Animal
26 Aug 2010, 11:48 PM
http://dev.sencha.com/deploy/ext-3.3-beta2-7080/docs/?class=Ext.grid.ActionColumn

Animal
26 Aug 2010, 11:59 PM
A useful extra for that class might be




constructor: function(cfg) {
var me = this,
items = cfg.items || (me.items = [me]),
l = items.length,
i,
item;

Ext.grid.ActionColumn.superclass.constructor.call(me, cfg);

// Renderer closure iterates through items creating an <img> element for each and tagging with an identifying
// class name x-action-col-{n}
me.renderer = function(v, meta) {
meta.css += ' x-action-col-cell';
v = '';
for (i = 0; i < l; i++) {
item = items[i];
v += '<img src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
'" class="x-action-col-icon x-action-col-' + String(i) + ' ' + (item.iconCls || '') + '"' +
((item.tooltip) ? ' ext:qtip="' + item.tooltip + '"' : '') + '>';
}
// Call any configured renderer passing the proposed cell HTML content with all expected args
if (cfg.renderer) {
v = cfg.renderer.apply(this, arguments);
}
return v;
};
},


But now that Column is Observable, it should probably fire a beforerender event which passes an object as an arg which contains mutable properties.

schoonmoeder
27 Aug 2010, 1:13 AM
some how i can't hook in on any event called beforerender.

will look into the code change you gave me.

schoonmoeder
27 Aug 2010, 2:21 AM
i did make a enhancement for hiding the item's. i wanted to try your way but i don't have XP with that.

the code isn't that clean but this is the basic idea.
hideIndex (like in saki's plugin) that is a boolean for showing the item. it's the ID of data that comes from the store.
hideStyle like hideMode (again saki's plugin). default hide is style="display:none" with the config hideStyle: "visibility:hidden" you set another style.



me.renderer = function(v, meta,data) {
meta.css += ' x-action-col-cell';
v = '';
for (i = 0; i < l; i++) {
item = items[i];
var hide = (item.hideIndex == null ? '' : data.get(item.hideIndex) ? (item.hideStyle == null ? 'display:none' : item.hideStyle ) : '' );
v += '<img src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
'" class="x-action-col-icon x-action-col-' + String(i) + ' ' + (item.iconCls || '') + '"' +
((item.tooltip) ? ' ext:qtip="' + item.tooltip + '"' : '') + ' '+ 'style="' +(hide)+'" >';
}
return v;
};


Is this input the dev team of sencha would like to get and use to enhance Extjs?