View Full Version : Programmatically lock a column

9 Jul 2013, 4:24 PM
I have column locking in my grid working successfully within my code with locked: true. And at runtime I can lock/unlock columns manually via the grid interface.

However I want a certain column to lock when a button is pressed. How do I lock a column dynamically/programmaticaly? I was expecting/hoping for a "setLocked" method, but that does not seem to exist?

11 Jul 2013, 1:47 PM
There is not currently a public lock / unlock method I'm afraid.

11 Jul 2013, 1:51 PM
Slemmon - thanks for circling back on this.

I was doing some additional digging and came across this post from Animal:


Do you know what he might have been referring to? Is there some 'back-door' way to lock programmatically?

30 Jul 2013, 2:46 PM
I dug further into Animal's post (link above), and it looks like the (private) lock method (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.locking.Lockable-method-lock) within the (private) locakable grid (Ext.grid.locking.Lockable) can be used to unlock columns that are in that locking grid.

But is there no way to lock a column from the "main" grid? ExtJS is executing something when the user clicks Lock on the column menu at runtime, right? Is that also available as a private method somewhere?

Could the unlocked column in the main grid be moved to the locking grid?

31 Jul 2013, 12:10 PM
There will be a way to to lock an originally unlocked column. In the example below enableLocking is set to true to allow for locking form the header menu. You can lock and unlock any of the columns starting from their unlocked position. I haven't tried locking the column programmatically, but you should be able to - you may need to trace the code used in locking from the header menu to see how it's doing it currently.

Ext.create('Ext.data.Store', {
fields:['name', 'email', 'phone'],
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
height: 200,
width: 400,
renderTo: Ext.getBody(),
enableLocking: true

11 Aug 2013, 9:27 PM
User is not able to Unlock the column after Locking it becuase Drop down menu is biend disappear after it .After unlocking some other column, the drop down then appears on the first locked column.

currently we are using 3.x and this is happening only in chrome and IE10.

if i remove 'px' from getLockedWidth() function then its working.
please let me know the issue nad how to correct it.

getLockedWidth : function() {
return this.cm.getTotalLockedWidth();

getTotalWidth : function() {
if (!this.isLocked) {
return Ext.ux.grid.LockingGridView.superclass.getTotalWidth.apply(this,arguments);
return (this.cm.getTotalWidth() - this.cm.getTotalLockedWidth()) + 'px';

12 Aug 2013, 10:22 AM
Are you seeing the issue when looking at this example:

I tested in Chrome and didn't see the issue myself.

12 Aug 2013, 9:25 PM
could you please try to lock unlock 6th column onward in the grid.
in my case its happening in chrome only and also if i do it on 6th column onward in the grid.
till 5th column locking/unlocking of column is working fine.

please let me know is there any issue with 'px' in chrome because if i remove it from getLockedWidth() function then its working fine.

13 Aug 2013, 8:31 AM
I haven't been able to reproduce the issue. Can you provide a test case that demonstrates the issue you're seeing?

16 Aug 2013, 4:12 PM
With regard to my original question, here is the answer. Seems the grid has .lock(column) and .unlock(column) methods. Simple enough but was tough to find!

onClick: function(button) {
var grid = button.up('grid');
var column = grid.down('gridcolumn[text=column1]');
if (column.locked) {
} else {