PDA

View Full Version : Dbl click column header to autosize



wayne_o
12 Jan 2009, 3:29 AM
I remember seeing this somewhere but can't find it!

Anyone know where this ux is?!

:)

w://

jsakalos
12 Jan 2009, 4:50 AM
I'm not aware of such extension/plugin, that doesn't mean it doesn't exist... ;)

Condor
12 Jan 2009, 5:53 AM
Auto-size code can be found here (http://extjs.com/forum/showthread.php?p=269519#post269519). You only need to attach it to the headerdblclick event.

wayne_o
12 Jan 2009, 6:49 AM
And now as a plugin:



Ext.ns('Ext.ux.Grid.AutoSizeColumns');

Ext.ux.Grid.AutoSizeColumns = function(config) {
Ext.apply(this, config);
};

Ext.extend(Ext.ux.Grid.AutoSizeColumns, Ext.util.Observable, {
init: function(grid) {
this.grid = grid;
this.grid.on({
headerdblclick: function(grd, colIndex, evt) {
var tm = Ext.util.TextMetrics.createInstance(grd.id);
var w = tm.getWidth(this.view.getHeaderCell(colIndex).firstChild.innerHTML);
for (var r = 0, len = this.store.getCount(); r < len; r++) {
w = Math.max(w, tm.getWidth(this.view.getCell(r, colIndex).firstChild.innerHTML));
}
w += this.cellPadding;
this.colModel.setColumnWidth(colIndex, w);
}
}, this);
}
});

wayne_o
12 Jan 2009, 6:55 AM
Actually tm.getWidth doesn't exactly work right :s

Any ideas? To get the correct width of the text in a cell?

w://

Scorpie
12 Jan 2009, 6:55 AM
And thats how the forum should work :D
Great job on the plugin!

Condor
12 Jan 2009, 7:40 AM
OK, how about:

Ext.ns('Ext.ux.grid');
Ext.ux.grid.AutoSizeColumns = function(config) {
Ext.apply(this, config);
};
Ext.extend(Ext.ux.grid.AutoSizeColumns, Object, {
cellPadding: 8,
init: function(grid) {
grid.on('headerdblclick', function(grid, colIndex) {
var h = grid.getView().getHeaderCell(colIndex).firstChild;
h.style.width = '0px';
var w = h.scrollWidth;
h.style.width = 'auto';
for (var r = 0, len = grid.getStore().getCount(); r < len; r++) {
var c = grid.getView().getCell(r, colIndex).firstChild;
c.style.width = '0px';
w = Math.max(w, c.scrollWidth);
c.style.width = 'auto';
}
w += this.cellPadding;
grid.getColumnModel().setColumnWidth(colIndex, w);
}, this);
}
});

Condor
12 Jan 2009, 7:56 AM
Or even better:

Ext.ns('Ext.ux.grid');
Ext.ux.grid.AutoSizeColumns = function(config) {
Ext.apply(this, config);
};
Ext.extend(Ext.ux.grid.AutoSizeColumns, Object, {
cellPadding: 8,
init: function(grid) {
grid.on('headerdblclick', function(grid, colIndex, e) {
var h = grid.getView().getHeaderCell(colIndex);
if(h.style.cursor != 'col-resize'){
return;
}
if(e.getXY()[0] - Ext.lib.Dom.getXY(h)[0] <= 5){
colIndex--;
h = grid.getView().getHeaderCell(colIndex);
}
var hi = h.firstChild;
hi.style.width = '0px';
var w = hi.scrollWidth;
hi.style.width = 'auto';
for (var r = 0, len = grid.getStore().getCount(); r < len; r++) {
var ci = grid.getView().getCell(r, colIndex).firstChild;
ci.style.width = '0px';
w = Math.max(w, ci.scrollWidth);
ci.style.width = 'auto';
}
w += this.cellPadding;
grid.getColumnModel().setColumnWidth(colIndex, w);
}, this);
}
});
(only autosize on dblclick on divider)

wayne_o
12 Jan 2009, 8:22 AM
Lush!!

:D

Works a treat...

donssmith
12 Jan 2009, 10:23 AM
This is very cool.

One thing I noticed was that if the columns are sortable they get sorted twice. The grid is capturing the double-click as two single clicks and a double-click.

Condor
13 Jan 2009, 12:03 AM
One thing I noticed was that if the columns are sortable they get sorted twice. The grid is capturing the double-click as two single clicks and a double-click.

How about:

Ext.ns('Ext.ux.grid');
Ext.ux.grid.AutoSizeColumns = function(config) {
Ext.apply(this, config);
};
Ext.extend(Ext.ux.grid.AutoSizeColumns, Object, {
cellPadding: 8,
init: function(grid) {
grid.getView().onHeaderClick = this.onHeaderClick;
grid.on('headerdblclick', function(grid, colIndex, e) {
var h = grid.getView().getHeaderCell(colIndex);
if(h.style.cursor != 'col-resize'){
return;
}
var xy = Ext.lib.Dom.getXY(h);
if(e.getXY()[0] - xy[0] <= 5){
colIndex--;
h = grid.getView().getHeaderCell(colIndex);
}
if(grid.getColumnModel().isFixed(colIndex) || grid.getColumnModel().isHidden(colIndex)){
return;
}
var hi = h.firstChild;
hi.style.width = '0px';
var w = hi.scrollWidth;
hi.style.width = 'auto';
for (var r = 0, len = grid.getStore().getCount(); r < len; r++) {
var ci = grid.getView().getCell(r, colIndex).firstChild;
ci.style.width = '0px';
w = Math.max(w, ci.scrollWidth);
ci.style.width = 'auto';
}
w += this.cellPadding;
grid.getView().onColumnSplitterMoved(colIndex, w);
}, this);
},
onHeaderClick : function(g, index){
if(this.headersDisabled || !this.cm.isSortable(index)){
return;
}
var h = this.getHeaderCell(index);
if(h.style.cursor == 'col-resize'){
return;
}
g.stopEditing(true);
g.store.sort(this.cm.getDataIndex(index));
}
});

wayne_o
13 Jan 2009, 1:43 AM
How about:
[...]


Ledge - end

:D

donssmith
13 Jan 2009, 7:26 AM
Perfect! Thanks @Condor!

donssmith
14 Jan 2009, 11:45 PM
I made a minor change in the init function to enable the appropriate state change event of column resizing to be fired.



// Changed this
grid.getColumnModel().setColumnWidth(colIndex, w);
// to this
grid.getView().onColumnSplitterMoved(colIndex, w);

Lariel
8 Feb 2009, 2:30 AM
Can you tell a newbie where to put the whole code exactly, please? ^^

jsakalos
8 Feb 2009, 3:14 AM
It's a plugin:


var grid = new Ext.grid.GridPanel({
plugins:[new Ext.ux.grid.AutoSizeColumns(a-config-object-if-necessary)]
, // ... the rest of config
});

aleister999
14 May 2009, 10:18 AM
I don't know if this behaviour only happens in IE6, but since I'm limited to it I had no other option ;). (Can anyone verify this?)

When autoresize happens, you can't make the column smaller again because then it won't show the '...' that appears at the end of cropped text. Also, the column name would then overlap with the next one. This happens because of setting the width style to 'auto'. What I did to fix it is obtain the width before setting it to zero. And then setting it back instead of setting it to auto.




var hi = h.firstChild;
var styleH = hi.style;
var tempWidthH = styleH.width;
styleH.width ='0px';
var w = hi.scrollWidth;
styleH.width = tempWidthH;
for(var r =0, len = grid.getStore().getCount(); r < len; r++){
var ci = gView.getCell(r, colIndex).firstChild;
var style = ci.style;
var tempWidth = style.width;
style.width ='0px';
w = Math.max(w, ci.scrollWidth);
style.width = tempWidth;
}






Hope it helps anyone with the same Issue :)

charleshimmer
14 Oct 2009, 2:05 PM
I think this is a great idea but nothing happens for me except that the column sorts twice when I double click on it.

I'm using Extjs 3.0.2. Has anybody else tried this in ExtJS 3.0.x?

Condor
14 Oct 2009, 10:45 PM
I've posted the fix for Ext 3 here (http://www.extjs.com/forum/showthread.php?t=82965).