EXTJS in XPages #11 – Grids with Locked Column(s)

In this article I will highlight a grid column property which allows the developer to lock the columns on an EXTJS grid in a similar fashion to freezing a frame in excel.

EXTJS in XPages series

Here are links to all of the previous articles in this series

Demonstration

The EXTJS in XPages demonstration database can be found at http://demo.xomino.com/xomino/Extjs.nsf/xGridLocked.xsp

Download

The sample database that will accompany this series is  available from the menu in the live demo database from this link – http://demo.xomino.com/xomino/Extjs.nsf

Introduction

Locking a column (or two or three) is a very useful way of retaining reference information on the left and being able to scroll across multiple pieces of information to the right.

Doing so in an EXTJS grid creates the effect show below whereby a horizontal scrollbar is added to the grid to the right of the locked column.

lock1

How does it work?

It is a column property ‘locked = true’. The example code below uses the REST example as demonstrated before and I added the locked property to the first column. You do not have to use the REST service example, that was the just the one I chose.

    var grid = Ext.create('Ext.grid.Panel', {
        renderTo: 'gridHere',
        frame: true,
        features: [filters],
        height: 400,
        title: 'Users',
        store: store,
        iconCls: 'icon-user',
        columns: [{
            header: 'First123',
            sortable: true,
            dataIndex: 'firstname',
            filterable: true
        }, {
            text: 'Last',
            sortable: true,
            dataIndex: 'lastname',
            locked: true,         //this is the new property
            field: {
                xtype: 'textfield'
            },
            filterable: true
        }, {.....

That’s all you need to do. the caveat is that you must have at least one scrolling column on the right – which makes sense because if they were all locked – then there would not be a need to have any locked🙂

Interesting side note – you will notice that I locked the Last Name column which is not the first column listed in the view – but it moved to the left. You cannot lock columns 1, 3, 5 and have everything scroll around them, locked columns move to the left. I would guess there could be a performance issue in not putting them into the grid in the right order so I would suggest you always list your locked columns first🙂

2 thoughts on “EXTJS in XPages #11 – Grids with Locked Column(s)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s