EXTJS Grid Buttons

This topic is something I have been thinking about for a while and not had the chance to do anything about it. Basic problem that needed to be solved was how do you get an EXTJS button into a Grid? Why would you want to place a button in a Grid instead of simply using EXTJS action column? Well I don't like Action columns when they have more than two options; some of my grid need several options; certainly more than two. If you have five options hanging of a column, then Action columns look pretty awful. Hence; placing a button in a grid and then using the split button. So I want to be able to place a split button into my grid as in first and second  images below.

Gid Button One

Grid button Two

When you select on the button you get a list of options. So basically that's the challenge. Their is an existing extension written by Lucian Lature & Kathrn Reeve you can find details here. This concept uses the excellent EXTJS class system, if your an EXTJS convert and have yet to look at EXTJS class system, I strongly recommend you getting up to speed. It seriously makes your life easier and allows you merge the traditional object orientation concepts into JavaScript prototypical concepts especially if you are Java, .Net or C++ class inheritance developer.

While that version is excellent it was not exactly what I needed, so I decided to build my own. Example code for above is listed below.

myGrid = Ext.define("Core.myGrid",{
extend  : "Ext.grid.Panel",
 alias  : "widget.mygrid",
renderTo : Ext.getBody(),
title   : "Grid Button example",
store   : gridStore,
width   : 400,
height  : 250,
columns : [
 {header : "First", dataIndex : "firstName", flex: 1},
 {header : "Last", dataIndex : "lastName", flex: 1},
 {xtype     : "gridbutton", // note 1
 flex   : .5,
     width: 200,
     header : "Actions",
     scope : me, //note 2
     items :[{
         icon   : 'setting-9.png',
         menu : [ //Note 3
            {text   : "First Name",
            icon    : "setting-7.png",
            handler : function (theRecord, context){ //note 4
                    Ext.Msg.alert("", theRecord.data.firstName);
                }
            },
            {text : "Last Name",
            icon    : "setting-5.png",
            handler : function (theRecord, context) {
                    Ext.Msg.alert("",theRecord.data.lastName);
                    console.dir(context);
                }
             },
            {text : "Full Name"} //Note 5
        ]}
        ]
     }
 ]
});

Lets go the highlights of using this new gridbutton | notes 1 - note 5.

Note 1 -

The xtype is called gridbutton and it extends the standard column class, so you have all the options of the standard column class.

Note 2 -

This is a new option allowing you to pass in an object that will be returned to you once the button is clicked, you will see this in note 4. This allows you a handler to some other object as the this object in the handler references the button selected.

Note 3 -

You must pass in a menu array, these are the buttons within the split button, each option can have its  icon, text and handler.

Note 4 -

this is the main handler i.e. the function called when the button is clicked. Note the Record is returned, this is effectively the row you have selected with all the columns in the store. In addition a context is returned which is the scope value passed in via note 2. the "this" object is the button itself.

Note 5 -

This is the simplest option but does nothing, select this option will return "Opps No Handler Set Up" as my Class monitors for blank menu items.