Monday 7 April 2014

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

No comments:

Post a Comment