[2.0] grid with locking column [NEW: Update 5]

[digiprosoft]

I fixed that scroll for the left column:

http://demoserver.digiprosoft.com/ex...olumn.html.php

Header resizing still in progress. Please tell me any other bugs.

[Nagiy]

I fixed that scroll for the left column:

http://demoserver.digiprosoft.com/ex...olumn.html.php

Header resizing still in progress. Please tell me any other bugs.

digiprosoft, your demo does not work on IE !

[Nagiy]

I tried adding this line to columnLock.js
afterRender : function() { },
It seems to fix the 2.2 issue !

Has anyone tried this code to fix the 2.2 issue?

[akannu]

Sorting is not working right on the demo you provided. Clicking on any column sorder only sorts the 'company' column in the non-frozen grid.

[sureshraja.crt]

I have found an error in the grid when the column sizes are very large. The total size the column can handle is 10000 (lock column widths + reg column widths). I have attached a jsp file but it can easily be changed for any other languages. i am just using a for loop to create the extra columns. Change the value from 64 to 63 and you will see that the last column header "Last Updated" shows up. But it does not show up with the value being 64. The data grid shows up however.

The math: 63*150 + 500 = 9950 (works fine)
The flipside: 64*150 + 500 = 10100 (does not work)

I have tried changing the width of the grid and it doesn't work. I will dissect the code a little and figure out where this value lies. In the meantime, if anyone has found the solution please let me know. Thanks in advance.

any one help me how to implement column lock in dynamic grid

[redzedi]

Hi All,
I am using LockingGridPanel.js along with LockingColumnModel for my project . Here are some issues I am facing :-

1. Ext.Grid.ColumnModel has a config parameter called "css" which as per the documentation accepts a css class name which is to be applied to all the data cells . But when i use this config parameter while creating an object of LockingColumnModel , it does not work at all as mentioned in API doc is this a bug for this extended class ??.

2.Is there a way to customize the mouse highlight colour for rows ??

Thanking all in anticipation.

[akannu]

It looks like this thread was started for MeDavid's user extension for column locking.

Then I see digiprosoft suggesting his own implementation from scratch.

I think it is confusing as people are reporting issues...which one is being referred to.

[Shmitt]

Is it possible to make that LockColumn plugin to work with groupSummary plugin ?!

Any examples will be great!

Thx in advance!

[surgi]

Hello, I'm reffering to MeDavid's user extension for column locking (Ext.grid.LockingGridPanel and Ext.grid.LockingColumnModel).

I'm trying to get it working together with GroupHeaderPlugin ( http://extjs.com/forum/showthread.php?t=22337 ), using ExtJS 2.1 at the moment.

I can get each of the thingies working, but using both of them together I had no luck so far, I've also searched thru these forums, found noone addressing this issue.

My guess is that locking grid extension will need a lil tweaking in order to work with group headers (basic set up leads to

Error: this.lockedInnerHd.firstChild.firstChild.style has no properties - Line: 293, file columnLock.js

). I've tried some tweaking myself (basically avoiding displayed errors, but it didnt work (result - nonsenses in headers)).

Can anyone please point me to the right direction? At the moment I have no clear idea what feature and where is missing in order to make locked columns work together with group headers.

Thanks in advance..

(Attached test-case-upd.zip contains example case of issue I'm reffering to. Should be placed at /ext-2.1/examples/any-directory/)

EDIT: As I've tried to look deeper into codes of both the plugin and the extension, I should point out that I don't need to have any group headers merging locked and unlocked columns (in another case it would complicate the solution badly due to the style lockingGrid is realized, I guess).

[Condor]

While trying to help surgi with his GroupHeaderPlugin problem I found several problems with the current LockingGridView:

1. updateAllColumnWidths and updateColumnWidth call onAllColumnWidthsUpdated and onColumnWidthUpdated with the wrong column number for non-fixed columns.
2. Row rendering needs to be moved from renderUI to afterRender (for Ext 2.2 compatibility).
3. Row headers get out of sync when changing column width in quirks mode, because borders are included in the width.

Here is the fix:

Ext.override(Ext.grid.LockingGridView, {
	renderUI : function(){
		var header = this.renderHeaders();
		var body = this.templates.body.apply({rows:''});
		var html = this.templates.master.apply({
			body: body,
			header: header[0],
			lockedBody: body,
			lockedHeader: header[1]
		});
		var g = this.grid;
		g.getGridEl().dom.innerHTML = html;
		this.initElements();
		Ext.fly(this.innerHd).on("click", this.handleHdDown, this);
		Ext.fly(this.lockedInnerHd).on("click", this.handleHdDown, this);
		this.mainHd.on("mouseover", this.handleHdOver, this);
		this.mainHd.on("mouseout", this.handleHdOut, this);
		this.mainHd.on("mousemove", this.handleHdMove, this);
		this.lockedHd.on("mouseover", this.handleHdOver, this);
		this.lockedHd.on("mouseout", this.handleHdOut, this);
		this.lockedHd.on("mousemove", this.handleHdMove, this);
		this.mainWrap.dom.style.left= this.cm.getTotalLockedWidth() + 'px';
		this.scroller.on('scroll', this.syncScroll,  this);
		if(g.enableColumnResize !== false){
			this.splitone = new Ext.grid.GridView.SplitDragZone(g, this.lockedHd.dom);
			this.splitone.setOuterHandleElId(Ext.id(this.lockedHd.dom));
			this.splitone.setOuterHandleElId(Ext.id(this.mainHd.dom));
		}
		if(g.enableColumnMove){
			this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);
			this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);
		}
		if(g.enableHdMenu !== false){
			if(g.enableColumnHide !== false){
				this.colMenu = new Ext.menu.Menu({id:g.id + "-hcols-menu"});
				this.colMenu.on("beforeshow", this.beforeColMenuShow, this);
				this.colMenu.on("itemclick", this.handleHdMenuClick, this);
			}
			this.hmenu = new Ext.menu.Menu({id: g.id + "-hctx"});
			this.hmenu.add(
				{id:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
				{id:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"}
			);
			if(this.grid.enableColLock !== false){
				this.hmenu.add('-',
					{id:"lock", text: this.lockText, cls: "xg-hmenu-lock"},
					{id:"unlock", text: this.unlockText, cls: "xg-hmenu-unlock"}
				);
			}
			if(g.enableColumnHide !== false){
				this.hmenu.add('-',
					{id:"columns", text: this.columnsText, menu: this.colMenu, iconCls: 'x-cols-icon'}
				);
			}
			this.hmenu.on("itemclick", this.handleHdMenuClick, this);
		}
		if(g.enableDragDrop || g.enableDrag){
			var dd = new Ext.grid.GridDragZone(g, {
				ddGroup : g.ddGroup || 'GridDD'
			});
		}
		this.updateHeaderSortState();
	},
	afterRender : function(){
		var bd = this.renderRows();
		if (bd == '') bd = ['', ''];
		this.mainBody.dom.innerHTML = bd[0];
		this.lockedBody.dom.innerHTML = bd[1];
		this.processRows(0, true);
		if(this.deferEmptyText !== true){
			this.applyEmptyText();
		}
	},
	updateAllColumnWidths : function(){
		var tw = this.cm.getTotalWidth();
		var lw = this.cm.getTotalLockedWidth();
		var clen = this.cm.getColumnCount();
		var lclen = this.cm.getLockedCount();
		var ws = [];
		for(var i = 0; i < clen; i++){
			ws[i] = this.getColumnWidth(i);
		}
		this.innerHd.firstChild.firstChild.style.width = (tw - lw) + 'px';
		this.mainWrap.dom.style.left = lw + 'px';
		this.lockedInnerHd.firstChild.firstChild.style.width = lw + 'px';
		for(var i = 0; i < clen; i++){
			var hd = this.getHeaderCell(i);
			hd.style.width = ws[i] + 'px';
		}
		var ns = this.getRows();
		var lns = this.getLockedRows();
		for(var i = 0, len = ns.length; i < len; i++){
			ns[i].style.width =(tw - lw) + 'px';
			ns[i].firstChild.style.width = (tw-lw) + 'px';
			lns[i].style.width = lw + 'px';
			lns[i].firstChild.style.width = lw + 'px';
			for(var j = 0; j < lclen; j++){
				var row = lns[i].firstChild.rows[0];
				row.childNodes[j].style.width = ws[j] + 'px';
			}
			for(var j = lclen; j < clen; j++){
				var row = ns[i].firstChild.rows[0];
				row.childNodes[j].style.width = ws[j] + 'px';
			}
		}
		this.onAllColumnWidthsUpdated(ws, tw);
	},
	updateColumnWidth : function(col, width){
		var w = this.getColumnWidth(col);
		var tw = this.cm.getTotalWidth();
		var lclen = this.cm.getLockedCount();
		var lw = this.cm.getTotalLockedWidth();
		var hd = this.getHeaderCell(col);
		hd.style.width = w;
		var ns, gw;
		var ncol = col;
		if(col < lclen) {
			ns = this.getLockedRows();
			gw = lw;
			this.lockedInnerHd.firstChild.firstChild.style.width = gw + 'px';
			this.mainWrap.dom.style.left= this.cm.getTotalLockedWidth() + 'px';
			this.mainWrap.dom.style.display='none';
			this.mainWrap.dom.style.display='';
		}else {
			ns = this.getRows();
			gw = tw - lw;
			ncol -= lclen;
			this.innerHd.firstChild.firstChild.style.width = gw + 'px';
		}
		for(var i = 0, len = ns.length; i < len; i++){
			ns[i].style.width = gw + 'px';
			ns[i].firstChild.style.width = gw + 'px';
			ns[i].firstChild.rows[0].childNodes[ncol].style.width = w;
		}
		this.onColumnWidthUpdated(col, w, tw);
		this.layout();
	}
});