View Full Version : Floating rowaction column or other ways of achieving similar

18 Feb 2014, 6:40 AM
Due to size constraints for a grid I'm implementing, where I would normally have the row actions plugin providing some little icons in the last column, I'd like to make the thing only appear on hover. Unfortunately not as simple as just configuring row actions to be floatable.

The idea is that on hover of a row, a component (be it row actions plugin or something else) appears aligned to the right of the grid row (I will need to dynamically work out the width of the floating component so it covers the last few rows up nicely).

So, any advice on ways I can achieve this general form of behaviour? I've briefly tried starting with hidden row actions and then using some CSS to force visibility on hover without success so far.

Gary Schlosberg
25 Feb 2014, 6:58 PM
I couldn't get the rowaction functionality to behave that way. If you've gotten it partially working, I'd recommend posting what you have so that others might better assist you. It might be worth contacting our Services (http://www.sencha.com/services/) department to see if they can build you something like that.

26 Feb 2014, 3:35 AM
EDIT: Here's my solution.

// CSS will make sure that the row actions centre themselves vertically even in a variable height row

.grid-row-float-actions { visibility : hidden; }

.x-grid-row-over .grid-row-float-actions { visibility : visible; display : block; }

.grid-row-float-actions .x-grid-cell-inner { height : 100%; }

.grid-row-float-actions .x-grid-cell-inner:before {
display : inline-block;
vertical-align : middle;
height : 100%;
content : '';
margin-right : -0.25em;

.grid-row-float-actions .ux-row-action { vertical-align : middle; display : inline-block; }

Ext.define( 'Ext.my.RowActions', {
extend : 'Ext.ux.grid.RowActions',
alias : 'widget.myrowactions',
constructor: function( config ){

var me = this;

if (me.showOnHover){

Ext.apply( config, {
hidden : true,
tdCls : me.tdCls + ' ' + me.floatCls,
listeners: {
beforeadd: me.initRenderData
} );


me.callParent( arguments );

showOnHover: true,
tdCls : '',
hidden : true,
floatCls : 'grid-row-float-actions',

initRenderData: function(){
var me = this;

me.grid = me.up( 'gridpanel' );
me.grid.addListener( 'itemmouseenter', me.onBeforeShow, me )

return me.callParent( arguments );


getActionWidth: function( view, item ){
var me = this,
viewWidth = view.table.getWidth(),
actionWidth = 0,
cells = Ext.select( item.cells ).elements;

Ext.each( cells, function( cell ){
if (NGXUtils.hasCls( cell, me.floatCls )){
return false;
actionWidth += cell.clientWidth
} );

return (viewWidth - actionWidth)


onBeforeShow: function( view, record, item, index, e, eOpts ){

var me = this,
cells = Ext.select( item.cells ),
floatAction = Ext.select( item.cells ).filter( '.' + me.floatCls ),
actionWidth = me.getActionWidth( view, item );

// set the height to match the row height
floatAction.alignTo( cells.first(), 'tl-tr' );
floatAction.setHeight( cells.first().getHeight() );
floatAction.setWidth( actionWidth );

} )

There's a couple of things to note;

This was designed so the row action would float over the columns to the right of the grid. We're using it in a grid where the number of columns to the right may change so you must place your row action column before the cols you want it to float over. It will then ensure it covers all columns following it automatically. Obviously, this is a pretty custom implementation for our needs but the basic idea is there for someone to improve if required. You could, for example, have a fall back so if your rowaction was the last column, it would just cover the column to it's left.