PDA

View Full Version : Programmatically lock a column



charlie17
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?

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

charlie17
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:

http://www.sencha.com/forum/showthread.php?250109-Locking-Grid-column-menu&p=915860&viewfull=1#post915860

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

charlie17
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?

slemmon
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', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ '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
});

pariwartan
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';
},

slemmon
12 Aug 2013, 10:22 AM
Are you seeing the issue when looking at this example:
http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/locking-grid.html

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

pariwartan
12 Aug 2013, 9:25 PM
hi,
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.

slemmon
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?

charlie17
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) {
grid.unlock(column);
} else {
grid.lock(column);
}
}