ExtJS grids with Locking Columns

There may be grids where in two or more columns are required to be shown at all times even if there are many columns available. In such a scenario, we can lock a few columns which will prevent them from getting hidden when attempting to scroll sideways along the grid. A similar functionality is present in MS Excel where in a column can be locked from scrolling away.

Here’s what we will build in this post.

To use locking functionality we must explicitly specify the LockingColumnModel and the LockingGridView.

NOTE: Two imports need to be added for the locking grid to work.

<link rel="stylesheet" type="text/css" href="../ux/css/LockingGridView.css" />

<script type="text/javascript" src="../ux/LockingGridView.js"></script>

The modified grid,

var grid = new Ext.grid.GridPanel({

                store: empStore,

                colModel: new Ext.ux.grid.LockingColumnModel([

                                {header: 'Emp No.', width: 100, sortable: true, dataIndex: 'emp_no', align:'center', renderer: showEmpDetails, locked: true},

                                {header: 'Last Name', width: 100, sortable: true, dataIndex: 'last_name', locked: true},

                                {header: 'First Name', width: 100, sortable: true, dataIndex: 'first_name'},

                                {header: 'Age', width: 75, sortable: true, dataIndex: 'age'},

                                {header: 'Date of Joining', width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'doj'},

                                {header: 'Address', width: 400, dataIndex: 'address'}

                ]),

                stripeRows: true,

                height: 350,

                width: 400,

                title: 'Employee Details',

                view: new Ext.ux.grid.LockingGridView(),

                renderTo: Ext.getBody()

});

Setting ‘locked’ to “true” for a column would prevent it from getting hidden on scrolling.

The user would also be allowed to decide on which columns to lock, unlock. Clicking on the column header would show up two mutually exclusive options, Lock and Unlock.

Columns already locked can be unlocked by the user and vice versa.

Here’s the JSFiddle -> JSFiddle Locking Grid

ExtJS grids with cell & row renderers

In this post I will focus on cell and row renderers. It is often desired to provide external references to the data present on the grid. One simple way is to present the user with a hyperlink on selected columns. This is made possible using a cell renderer.

Here’s the modified columns array definition.

columns: [

{header: 'Emp No.', width: 100, sortable: true, dataIndex: 'emp_no', align:'center', renderer:  showEmpDetails},

{header: 'Last Name', width: 100, sortable: true, dataIndex: 'last_name'},

{header: 'First Name', width: 100, sortable: true, dataIndex: 'first_name'},

{header: 'Age', width: 75, sortable: true, dataIndex: 'age'},

{header: 'Date of Joining', width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'doj'}

]

The renderer function is defined as,

function showEmpDetails(val, meta, rec, rIndex, cIndex, store) {

return "<a href='#'>" + val + "</a>";

//or apply any css class of your choice using

//meta.css = ‘awesome-header-style’

//return val;

}

Here's the JSFiddle -> JSFiddle Row renderer

NOTE: The renderer function should return only ‘html’ content.

Similarly, Rows on the grid can be made to appear in colors other than white/grey.

Consider the employee grid. We could indicate senior employees (age >=27) with a yellow background.

Here’s the modified grid definition,

var grid = new Ext.grid.GridPanel({

store: empStore,

            columns: [

                                {header: 'Emp No.', width: 100, sortable: true, dataIndex: 'emp_no', align:'center', renderer: showEmpDetails},

                                {header: 'Last Name', width: 100, sortable: true, dataIndex: 'last_name'},

                                {header: 'First Name', width: 100, sortable: true, dataIndex: 'first_name'},

                                {header: 'Age', width: 75, sortable: true, dataIndex: 'age'},

                                {header: 'Date of Joining', width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'doj'}

                ],

                viewConfig: {

                                //Return CSS class to apply to rows depending upon data values

                                getRowClass: function(record, index) {

                                                var c = record.get('age');

                                                if (c >= 27) {

                                                                return 'senior';

                                                }

                                }

                },

                stripeRows: true,

                height: 350,

                width: 530,

                title: 'Employee Details',

                renderTo: Ext.getBody()

});

The CSS class ‘senior’ is defined as,

<style>

        .senior {

               background-color: #FFFF00

        }

</style> 

Here's the fiddle -> JSFiddle Row renderer