[1.0] Grid RowActions Plugin

[NoahK17]

RowActions are built into 4.0. Look up the xtype "ActionColumn".

Here's the API URL: http://docs.sencha.com/ext-js/4-0/#/....column.Action

[oeginc]

Wow, very cool... I suppose I should have looked into the docs more before posting such a silly question.

[boldt]

Hi,

We have upgraded extjs from 3.3.0 to 3.3.2 and in that process we lost the tooltips that were shown when the mouse pointer hovered over the icons using for row actions.

The tooltip does never get shown, but markup is the same.

I'm unsure what mechanics actually displays the tooltip, so could any one suggest a way to start debugging the problem.

Best Regards
Niels

[NoahK17]

Hi,

We have upgraded extjs from 3.3.0 to 3.3.2 and in that process we lost the tooltips that were shown when the mouse pointer hovered over the icons using for row actions.

The tooltip does never get shown, but markup is the same.

I'm unsure what mechanics actually displays the tooltip, so could any one suggest a way to start debugging the problem.

Best Regards
Niels

Open up your Ext.ux.RowActions.js file and find the tplGroup/tplRow definition section and change it to this:

    tplGroup:
         '<tpl for="actions">'
        +'<div class="ux-grow-action-item<tpl if="\'right\'===align"> ux-action-right</tpl> '
        +'{cls}" style="{style}" ext:qtip="{qtip}">{text}</div>'
        +'</tpl>'

    ,tplRow:
         '<div class="ux-row-action">'
        +'<tpl for="actions">'
        +'<div class="ux-row-action-item {cls} <tpl if="text">'
        +'ux-row-action-text</tpl>" style="{hide}{style}" ext:qtip="{qtip}">'
        +'<tpl if="text"><span ext:qtip="{qtip}">{text}</span></tpl></div>'
        +'</tpl>'
        +'</div>'

Note the change of qtip to ext:qtip.

[schusco]

Can you provide some sample code on how you would bind the icon in the column to the data?

[NoahK17]

Can you provide some sample code on how you would bind the icon in the column to the data?

Do you mean how to show specific icons based on the data contained elsewhere on the row?

[schusco]

More or less. I'm not actually displaying the true or false value in the row, i just want to display a one icon if the field is true, and another if false instead of the field saying true or false.

[NoahK17]

More or less. I'm not actually displaying the true or false value in the row, i just want to display a one icon if the field is true, and another if false instead of the field saying true or false.

The attribute you're looking for is called "hideIndex".

What you can do is when you send back the JSON array which is populating your grid rows, you'll have something called "abc: true" or "abc: false" (where abc can be anything), depending on whether you want to show or hide the RowAction icon. With me so far? Then, you'll take abc variable and map it to the "hideIndex" attribute for the icon you want to show or hide, so it'd look like... hideIndex: abc (abc being either true or false).

Does that make sense? I can whip up an example if truly necessary, but that's the jist of how to show or hide specific icons.

[schusco]

so if i'm understanding you, I would then need two items in my action column definition, one with each icon. And then show or hide them based on the value using the hideIndex? An example would help if it's not too much trouble.

[NoahK17]

so if i'm understanding you, I would then need two items in my action column definition, one with each icon. And then show or hide them based on the value using the hideIndex? An example would help if it's not too much trouble.

That's exactly what you'd be doing.

var store = new Ext.data.JsonStore({
	root: 'data',
	totalProperty: 'totalCount',
	idProperty: 'id',
	remoteSort: true,
	
	fields: [
		'id',
		'hidePdf',
		'hideEmail',
		'hidePrint'
	]
	// more code
});

var action = new Ext.ux.grid.RowActions({
	header:'Export',
	width: 120,
	sortable: false,
	actions:[
	    {
                    iconCls:'icon-pdf',
                    tooltip:'Download PDF',
                    hideIndex: hidePdf
	    },
	    {
                    iconCls:'icon-email-go',
                    tooltip:'Email to Me',
                    hideIndex: hideEmail
	    },
	    {
                    iconCls:'icon-print',
                    tooltip:'Printable View',
                    hideIndex: hidePrint
	    }
	],
			
	callbacks:{
		/* DOWNLOAD PDF ITEM */
            	'icon-pdf':function(grid, record, action, row, col) {
			// code
		},
				
		/* EMAIL TO ME */
            	'icon-email-go':function(grid, record, action, row, col) {
			//code
		},	
				
		/* PRINTABLE VIEW */
		'icon-print':function(grid, record, action, row, col) {
			// code
		}
	} // end callbacks
});

Your JSON store (generated from the server) would then contain the values for hidePdf, hideEmail, and hidePrint as either "true" or "false".

Got it?