Action Column Bug

Sencha

Another bug surfaces in Ext JS. This time it is in the Classic toolkit. Discovery was specific to the xtype: actioncolumn and assigning iconCls to a class other than one starting with x-fa. Example is iconCls: ‘fas fa-pencil’ compared to iconCls: ‘x-fa fa-pencil’. The latter will throw the error

The error is Uncaught TypeError: target.className.match is not a function.

This error is generated from the following code, specifically in the action column definition. (You can see the full code, including the controller at the bottom of this post).

{
                xtype: 'actioncolumn',
                align: 'center',
                width: 75,
                items: [{
                    iconCls: 'fas fa-edit',
                    tooltip: 'Edit User',
                    handler: 'editUser'
                }, {
                    iconCls: 'fas fa-eye',
                    tooltip: 'View User',
                    handler: 'viewUser'
                }, {
                    iconCls: 'fas fa-trash',
                    tooltip: 'Delete User'
                }

The problem is created by iconCls being set to ‘fas fa-edit’. This class displays correctly as I am using Font awesome 5.x. The error is generated by Ext JS not recognizing this class. Changing it from ‘fas fa-edit’ to ‘x-fa fa-edit’ from the Font Awesome 4.7 included in Ext JS and there is no error. The handler is called correctly and no generated error.

{
                xtype: 'actioncolumn',
                align: 'center',
                width: 75,
                items: [{
                    iconCls: 'x-fa fa-edit',
                    tooltip: 'Edit User',
                    handler: 'editUser'
                }, {
                    iconCls: 'x-fa fa-eye',
                    tooltip: 'View User',
                    handler: 'viewUser'
                }, {
                    iconCls: 'x-fa fa-trash',
                    tooltip: 'Delete User'
                }

Ext.define('neweco.view.admin.super.SuperAdminMain',{
    extend: 'Ext.panel.Panel',
    xtype: 'superAdminMainPnl',
    bodyPadding: '5 0 0 0',
    width: 980,
    border: false,
    title: 'Administration - Company',

    requires: [
        'neweco.view.admin.super.SuperAdminMainController',
        'neweco.view.admin.super.SuperAdminMainModel'
    ],

    controller: 'admin-super-superadminmain',
    viewModel: {
        type: 'admin-super-superadminmain'
    },

    listeners: {
        added: 'loadView'
    },

    items: [{
        xtype: 'container',
        layout: {
            type: 'hbox'
        },
        items: [{
            xtype: 'grid',
            title: 'Companies',
            margin: '0 5 0 0',
            listeners: {
                select: 'getUsers'
            },
            bind: {
                store: '{companies}'
            },
            dockedItems: [{
                xtype: 'pagingtoolbar',
                dock: 'bottom'
            }, {
                xtype: 'toolbar',
                items: [{
                    xtype: 'tbspacer',
                    flex: 1
                }, {
                    xtype: 'button',
                    text: 'Add Company',
                    iconCls: 'fas fa-plus'
                }]
            }],
            flex: 1,
            height: Ext.getBody().getViewSize().height - 300,
            columns: [{
                text: 'Company Name',
                dataIndex: 'CompanyName',
                width: 200
            }, {
                text: 'Support',
                dataIndex: 'supportemail',
                flex: 1
            }, {
                text: 'Active',
                width: 70,
                dataIndex: 'active',
                renderer: function (value) {
                    if (value) {
                        return 'Active';
                    }
                    return 'Disabled'
                }
            }, {
                xtype: 'actioncolumn',
                width: 75,
                items: [{
                    iconCls: 'fas fa-edit'
                }, {
                    iconCls: 'fas fa-eye'
                }, {
                    iconCls: 'fas fa-trash'
                }]
            }]
        }, {
            xtype: 'grid',
            title: 'Users',
            flex: 1, 
            bind: {
                store: '{users}'
            },
            dockedItems: [{
                xtype: 'pagingtoolbar',
                dock: 'bottom'
            }, {
                xtype: 'toolbar',
                items: [{
                    xtype: 'tbspacer',
                    flex: 1
                }, {
                    xtype: 'button',
                    text: 'Add User',
                    iconCls: 'fas fa-plus',
                    handler: 'addUser'
                }]
            }],
            height: Ext.getBody().getViewSize().height - 300,
            columns: [{
                text: 'Name',
                dataIndex: 'fullName',
                width: 150
            }, {
                text: 'Email',
                dataIndex: 'useremail',
                flex: 1
            }, {
                text: 'Active',
                dataIndex: 'active',
                width: 70,
                renderer: function (value) {
                    if (value) {
                        return 'Active';
                    }
                    return 'Disabled'
                }
            }, {
                xtype: 'actioncolumn',
                align: 'center',
                width: 75,
                items: [{
                    iconCls: 'fas fa-edit',
                    tooltip: 'Edit User',
                    handler: 'editUser'
                }, {
                    iconCls: 'faa fa-eye',
                    tooltip: 'View User',
                    handler: 'viewUser'
                }, {
                    iconCls: 'fas fa-trash',
                    tooltip: 'Delete User'
                }]
            }]
        }]
    }]
});

The full code of the controller is

Ext.define('neweco.view.admin.super.SuperAdminMainController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.admin-super-superadminmain',

    addUser: function (grid, rowIndex, colIndex) {
    	let wdw = Ext.create('neweco.view.admin.users.UserView');
    	wdw.getViewModel().data.viewAdd = true;
    	wdw.getViewModel().data.viewEdit = false;
    	wdw.setActiveItem(1);
    	wdw.show();
    },

    editUser: function (grid, rowIndex, colIndex) {
    	let wdw = Ext.create('neweco.view.admin.users.UserView');
    	wdw.getViewModel().data.viewAdd = false;
    	wdw.getViewModel().data.viewEdit = true;
    	wdw.setActiveItem(1);
    	wdw.show();
    },

    getUsers: function (grid, record, index, eOpts) {
    	let store = this.getViewModel().get('users');
    	store.getProxy().extraParams = {
    		companyId: record.get('companyId'),
    		sessId: localStorage.getItem('sid'),
    		permId: localStorage.getItem('pid')
    	}
    	store.load();
    },

    loadView: function () {
    	let store = this.getViewModel().get('companies');
    	store.getProxy().extraParams = {
    		sessId: localStorage.getItem('sid'),
    		permId: localStorage.getItem('pid')
    	}
    	store.load();
    },

    viewUser: function (grid, rowIndex, colIndex) {
    	let wdw = Ext.create('neweco.view.admin.users.UserView');
    	wdw.getViewModel().data.viewAdd = false;
    	wdw.getViewModel().data.viewEdit = false;
    	wdw.setActiveItem(0);
    	wdw.show();
    }
});

For some reason in the action column the class of the icon is tightly integrated when calling the handler function. I can not understand the purpose of such a tight integration of a class to call a function in the controller. Since it is an icon, not a button there is not pressed/selected state to update or change teh look of the icon.

I have however reported the bug to Sencha Support. We will see what they come up with as to why this is happening.

For now this post is informational for other users experiencing the same thing. Often these types of issues aren’t documented anywhere and one spends hours trying to find a solution to something as simple as changing an icon class.

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.