Sencha Touch Grid Action Column

Montag, 3. Februar 2014
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 :)