View Full Version : Ext.ux.grid.column.ActionButtonColumn

5 Jun 2011, 5:58 AM
Simple Ext4 plugin to render button(s) inside a grid cell.

Github: https://github.com/lucianlature/Ext.plugin.extjs4.ActionButtonColumn
Demo: http://lucian.lature.net/extjs/demo/ActionButton/

Any contributions of testing, improvements or other constructive feedback are greatly appreciated.

- 12/06/2011: two options added: iconIndex (field name of the field of the grid store record that contains css class of the iconCls to show.) and hideIndex (field name of the field of the grid store record that contains hide flag).

6 Jun 2011, 9:43 PM
good job.

could be better if support hideIndex, iconIndex just like RowActions

12 Jun 2011, 5:19 AM
@atian25: Plugin updated. Hope this helps.

12 Jun 2011, 12:33 PM
why don't add the ability to load the action button via ajax call.

Any action has an ID, the ajax call get all buttons that should be display (only!).


12 Jun 2011, 7:43 PM
good job.

some issues:
1. support global handler,not only item.handler
2. i got an error "Uncaught TypeError: Cannot call method 'apply' of undefined" when listen to click event
3.sometime hideIndex is not enough, hideFunction(record) could be better
4.should copy item's cfg to button's cfg, cause need more feature of btn, such as tooltip, menu...
5.i wonder why me.renderer is an anonymous function?

23 Jun 2011, 1:13 PM

noticed that the buttons were being left behind after destruction, so have added in a track for them.
Also needed/wanted an additional class on the buttons so added option to pass that through. I have issued a pull request on git hub with the changes.

Small question in regards to using this within an Ext MVC app where the grid is a view. How can i bind to the buttons after the fact since the buttons aren't actually children of the grid.
I've tried using the selector:
gridpanel button but this fails to get an actual buttons to bind on. Is there any way to achieve this?


30 Jun 2011, 9:25 AM
Hi, Not sure if/when will get a reply to this.

Will investigate the issues and see what i can come up with and post it to my github account which can be found here: http://github.com/BinaryKitten/Ext.plugin.extjs4.ActionButtonColumn (https://github.com/BinaryKitten/Ext.plugin.extjs4.ActionButtonColumn)

Have added the following to Monkee's Version:

list of buttons so that we can clean up after grid destruction
buttons can now have contexts attached to their handlers, pass context as config item

Last Update: June 24, 2011

3 Jul 2011, 5:59 AM
If you ever wanted to use local storage for whatsoever reason (e.g. offline fallback, code examples without need for server-side middleware and database, etc), chances are you're familiar with the diversity of options. WebSQL database being ditched from HTML5 draft in favor to IndexedDB highly suggest the IDB is the option for offline storage.

Usage cases for local (client side) databases and this proxy are:
- caching infrequently changed data (ComboBox entries, settings, localization, etc.)
- fast and easy code samples that don't require server round trips and the whole server side architecture
- offline fallback (although sencha.io is actually a preferred way of doing this)

I was initially uncertain to try something non-SQL-like, but then learned that IndexedDB is so cool and JavaScript oriented that I couldn't just close my eyes on it. Also, it's asynchronous, therefore have your callbacks and events at hand.

To make things even easier I created a proxy for IDB so that you can use all that goodness in your Ext JS 4 models and stores without extra effort.
designer software (http://businesscard.gteksoft.com/businesscarddesigner.htm)

4 Jul 2011, 12:59 AM
Thanks for your comment sureshsk, but it is off the topic of this thread.

17 Jul 2011, 6:09 AM
@kreeve_ctisn: Your pull requests were merged. Thanks for your contribution!...

28 Jul 2011, 4:39 AM
Worked on a new version that now works within an mvc style app without breaking existing workings.

Have updated my github with the new code.
Basically when the 1st render is called it attaches events to the gridview for each button and 1 all encompassing "actionbuttonclick" event

for actionbuttonclick you have the following

actionbuttonclick: function(button, gridview, rowindex, colindex)

if the button definition passed through has an eventName property or a cls property set it will use these to create the events required
eg 1) button has eventName, this eventname will be triggered

text: 'Load',
this will set up loadrecord event on the gridview.

loadrecord: function(gridview, rowindex, colindex)

similarly the cls property will be used to interpret to an event with all non alpha chars will be removed and suffixed with "click"

text: 'Load',
wlll create the event btnloadrecordclick as follows

btnloadrecordclick: function(gridview, rowindex, colindex)

Finally, I added in the showIndex. This is exactly the same as hideIndex but in reverse, eg a truthy value to showIndex will show the button and a falsey value will cause it to hide.

GitHub Link: https://github.com/BinaryKitten/Ext.plugin.extjs4.ActionButtonColumn

25 Aug 2011, 12:25 AM

Thanks for this great plug in :)

Only one little problem I have. The height of the button is about 2 pixel higher than my grid cell and it push everything upward a little bit. And when the grid refresh the whole grid is jumping until everything settle.

Tried to overwrite the .x-btn-x-action-col-button css but seems to be no effect.

Any pointer how to change the size of the button is highly appreciated. Thanks.

10 Apr 2012, 2:35 AM
Hi joelchu,

just had the same problem with the height of the buttons. But editing the css class worked for me.

I simply added into my custom.css file:

.x-action-col-button {
padding:0px 0px 0px 0px;

Now the buttons fit perfectly into my cells.

Many thanks to the authors of this nice contribution! :-)

11 Jun 2012, 4:20 AM
How can I add the current scope of the application so that when I'm in the handler I can access any functions/variables I've established previously?


16 Apr 2015, 5:10 AM
hi @kreeve_ctisn,
can you provide a working example that uses
actionbuttoncolumn in MVC architecture?

I attached
eventName property for my buttons; but I could not catch events in controller.

Thanks in advance.

5 Jun 2015, 8:56 PM
My version for Ext 5.++ http://github.com/wemersonjanuario/Ext.ux.grid.column.ActionButton