Sencha Touch Grid Action Column

As you may know the current grid version (2.3.0.2) in the Sencha Touch framework doesn't support the action column at the moment.

I this post, I want you to show how you can add clickable "button" in a column. In fact is it not a real button, but it will allow you to take track which cell is clicked and to take actions then.

First we need a grid with some columns in it. The column which needs action should be a template column so you can style it like you want. Something like this:

Ext.define('SiteCockpit.view.ExampleGrid', {
    extend: 'Ext.grid.Grid',
    alias: 'widget.examplegrid',

    requires: [
        'Ext.grid.column.Template',
        'Ext.XTemplate',
        'Ext.grid.plugin.MultiSelection',
        'Ext.grid.plugin.Editable'
    ],

    config: {
        itemId: 'exampleGrid',
        store: 'dummyStore',
        title: 'Example Grid',
        columns: [
            {
                xtype: 'templatecolumn',
                tpl: [
                    '<tpl>',
                    '    <div class="button1-field"></div>',
                    '<tpl>'
                ],
                width: 50
            },
            {
                xtype: 'templatecolumn',
                tpl: [
                    '<tpl>',
                    '    <div class="button2-field"></div>',
                    '<tpl>'
                ],
                width: 50
            },
            {
                xtype: 'column',
                fdname: 'exidv',
                width: 150,
                align: 'center',
                dataIndex: 'exidv',
                text: 'exidv'
            }
       ]
    }
})

As you can see the first and the second column do not have any text just a class. If you want some text just add by yourself.

Now we need to declare these classes in the sass to get a button like style. It is up to you how you want to style it. I just added 2 icons.

//
//    


//
.button1-field {
    content: "";
    height: 2.5em;
    width: 2.5em;
    background-image: url(data:image/png;base64,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);    background-size: 1.5em;
    background-size: 1.5em;
    display: block;
    background-repeat: no-repeat;
    background-position: bottom;
}

.button2-field {
    content: "";
    height: 2.5em;
    width: 2.5em;
    background-image: url(data:image/png;base64,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);
display: block;
    background-size: 2em;
    background-size: 2em;
    background-repeat: no-repeat;
    background-position: bottom;
}

Next we need to know when and more important which cell was tapped! I took this logic in a separate controller. We use the classes to know which one was tapped. It sounds pretty simple and it even is :)

Ext.define('SiteCockpit.controller.gridController', {
    extend: 'Ext.app.Controller',

    config: {
        control: {
            "grid": {
                itemtap: 'onDetailGridTap'
            }
        }
    },

    onDetailGridTap: function(dataview, index, target, record, e, eOpts) {
        var me = this;

        switch (e.target.className) {

            case 'button1-field':

                // First row was tapped!    
                break;

            case 'button2-field':

                // Second row was tapped!
                break;
        }
    }
})

I hope it is all clear and will help you a bit until the action column is supported :)