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

• EXTJS in XPages #10 – Grid Row Expander plugin
• EXTJS in XPages #9 – Infinite scrolling rebooted and reborn – v4.2 BufferedRenderer
• EXTJS in XPages #8 – Selecting data from the grid and opening a document
• EXTJS in XPages #7 – Doing an @Unique(@DbColumn) equivalent in the grid
• EXTJS in XPages #6 – remote sorting using the REST service
• EXTJS in XPages #5 – Infinite scroller
  
• EXTJS in XPages #4 – Adding a Pager
• EXTJS in XPages #3 – Creating a basic grid from a Custom Control
• EXTJS in XPages #2 – Basic Grid capabilities
• EXTJS in XPages #1 – Starting from scratch (the first grid)

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.

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 🙂