A Modern Action Column

Ext JS modern toolkit is great when developing universal application using either classic in the desktop environment and modern in the mobile or using the modern toolkit for both. Unfortunately if your experience is with classic there are some things you may find are more limited in the modern framework. One such limitation is the modern toolkit currently is missing the classic “actioncolumn” for grids. For some this missing component is a deal breaker as they then continue to develop Ext JS apps using the classic toolkit and then try to use a hammer to get the classic toolkit to work in the mobile environment.

Before I present a solution I want to be clear. Modern toolkit is meant for mobile devices and replaced Sencha Touch. Events include those specific to mobile devices such as touch in place of click. Though many things will work in a mobile browser coming from the classic toolkit you will find limitations and even problems when dealing with scrolling. The action in and of itself are completely different on the desktop and mobile device.

Now because you can’t add the classic actioncolumn to a modern toolkit grid doesn’t mean you can’t have an actioncolumn work around solving the very problems you claim are not there like the classic toolkit.

Ext.onReady(function () {
    requires: [
        'Ext.Dialog'
    ],
    Ext.define('myApp.grid.Controller', {
        extend: 'Ext.app.ViewController',
        alias: 'controller.myview',

        control: {
            'grid': {
                itemtap: 'onItemTap'
            }
        },

        onItemTap: function (grid, index, target, record, e) {
            if (e.target.classList.contains("fa-trash") ||
                e.target.children[0] && e.target.children[0].classList.contains("fa-trash")) {
                Ext.Msg.confirm("Confirmation", "Are you sure you want to do that?", function (btn) {
                    if (btn == 'yes') {
                        grid.getStore().removeAt(index);
                    }
                });
            }
            if (e.target.classList.contains("fa-save") ||
                e.target.children[0] && e.target.children[0].classList.contains("fa-save")) {
                Ext.Msg.alert("Save Record", "Are you sure you want to save the record?");
            }
            if (e.target.innerText.indexOf("Edit") != -1) {
                this.EditRecord(record);

                // Ext.Msg.alert("Edit Record", "Are you sure you want to edit the record " + record.get('name') + "? ");
            }
        },

        EditRecord: function (record) {
            Ext.Msg.alert("Edit Record", "Are you sure you want to edit the record " + record.get('name') + "? ");;
        }
    });

    var store = Ext.create('Ext.data.Store', {
        data: [{
            'record': 0,
            'name': 'Lisa Monroe',
            "email": "lisa@simpsons.com",
            "phone": "555-111-1224"
        }, {
            'record': 1,
            'name': 'Betty Boop',
            "email": "bart@simpsons.com",
            "phone": "555-222-1234"
        }, {
            'record': 2,
            'name': 'Homer Simpson',
            "email": "home@simpsons.com",
            "phone": "555-222-1244"
        }]
    });

    Ext.create('Ext.grid.Grid', {
        controller: 'myview',
        title: 'Action Column Work Around',

        store: store,

        columns: [{
            text: 'Name',
            dataIndex: 'name',
            flex: 1
        }, {
            text: 'Email',
            dataIndex: 'email',
            width: 175
        }, {
            text: 'Phone',
            dataIndex: 'phone',
            width: 120
        }, {
            cell: {
                xtype: 'gridcell',
                encodeHtml: false
            },
            tpl: '<i class="fa fa-trash" style="cursor: pointer;"></i>',
            width: 20
        }, {
            cell: {
                xtype: 'gridcell',
                encodeHtml: false
            },
            tpl: '<i class="fa fa-save" style="cursor: pointer;"></i>',
            width: 20
        }, {
            cell: {
                xtype: 'button',
                text: 'Edit',
                iconCls: 'fa fa-edit'
            }
        }],

        height: 300,
        width: 600,
        renderTo: Ext.getBody()
    });
});

Code above creates the following screenshot.

Clicking the trash can, save icon and the edit button create their respective dialog actions.

The first is clicking the delete button, second is saving and third is editing a record.

A caution here is differences between user experience on mobile and desktop environments. This example is intended to be used with the modern toolkit for a desktop environment. Users are used to desktop browsers presenting dialogs for them to interact with while on mobile environments I recommend using completely different views without opening a dialog for their experience. Keep in mind always, mobile devices are not desktop computers and users have come to expect different experiences.

Now you can see the modern toolkit is not limited as a programmer you just have to approach some things differently.

The Sencha Fiddle with the above code so you can see the solution in action.

Share:

Author: aallord

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.