PDA

View Full Version : ActionColumn override (hideIndex, actionclick event and more)



ldonofrio
30 Jun 2011, 1:02 PM
This is an override of Ext.grid.column.Action (easy to convert to a Component)


Features:

Supports hideIndex config option (saki stuff:D)
Tooltip disabled on hidden actions
actionclick event (with this you can catch events working with MVC - arguments: grid, store, record, action (iconCls)), event doesn't fire if the action is hidden (record.hideIndex is true)
draggable=false, hideable=false, menuDisabled=true, fixed=false by default
autoWidth config option
JS


Ext.override(Ext.grid.column.Action, {
draggable: false,
hideable: false,
menuDisabled: true,
fixed: true,
hideIndex: null,
hiddenCls: Ext.baseCSSPrefix + 'action-col-img-noaction',
autoWidth: true,
iconWidth: 22,

constructor: function(config) {
var cfg = Ext.apply({}, config),
items = cfg.items || [this];

for (var index = 0; index < items.length; index++){
var item = items[index];
if (Ext.isDefined(item.hideIndex)) {
var cls = item.iconCls || '';
var tip = item.tooltip || '';
delete item.iconCls;
delete item.tooltip;
Ext.apply(item, {
getClass: function(v, meta, record) {
var i = v.match(/<img/g).length;
if (!record.get(this.items[i].hideIndex)) {
this.items[i].tooltip = tip;
return cls;
} else {
this.items[i].tooltip = '';
return this.hiddenCls;
}
}
});
}
}
cfg.itemCount = items.length;
this.callOverridden([cfg]);
},

initComponent: function(){
if (this.autoWidth) {
this.width = (this.iconWidth * this.itemCount);
}
this.callOverridden();
this.addEvents(
'actionclick'
);
},

processEvent: function(type, view, cell, recordIndex, cellIndex, e){
if (type == 'click') {
var match = e.getTarget().className.match(this.actionIdRe);
if (match) {
var tmp = Ext.String.trim(e.getTarget().className).split(' ');
var action = tmp[tmp.length - 1];
if (action != '' && action != this.hiddenCls) {
this.fireEvent('actionclick', view.ownerCt, view.getStore(), view.getStore().getAt(recordIndex), action);
}
}
}
return this.callOverridden(arguments);
}
});



SASS


.#{$prefix}action-col-cell {
img {
height: 16px;
width: 16px;
cursor: pointer;
}
}
.#{$prefix}action-col-img-noaction {
cursor: default !important;
}