PDA

View Full Version : Ext.ux.grid.plugin.HeaderAutoResizer - adjust column width to content



makana
16 Aug 2011, 11:29 PM
A plugin to adjust a grid column width to its content if you doubleclick on the column's splitter.



/**
* @class Ext.ux.grid.plugin.HeaderAutoResizer
*
* Plugin to add a "Adjust column width to content" functionality to a HeaderContainer.
*
* This only works in conjunction with {@link Ext.grid.plugin.HeaderResizer} that is
* used by default in a HeaderContainer.
*
* Double clicking on a splitter adjusts the width of the column to the left to its
* maximum content width, considering minColWidth and maxColWidth.
*
* ## How to use
*
* Ext.create('Ext.grid.Panel', {
* store: myStore,
* columns: { // setting a headerCtCfg
* plugins: [ // use HeaderAutoResizer plugin
* Ext.create('Ext.ux.grid.plugin.HeaderAutoResizer')
* ],
* items: [ // define columns
* {header: 'Name', dataIndex: 'name'},
* {header: 'Email', dataIndex: 'email'},
* {header: 'Phone', dataIndex: 'phone'}
* ]
* },
* height: 200,
* width: 400,
* renderTo: Ext.getBody()
* });
*
*/
Ext.define('Ext.ux.grid.plugin.HeaderAutoResizer', {
alias: 'plugin.gridheaderautoresizer',

requires: [
'Ext.grid.plugin.HeaderResizer'
],

init: function(headerCt) {
this.headerCt = headerCt;
this.resizer = headerCt.resizer;
if (this.resizer) {
headerCt.on('render', this.afterHeaderRender, this, {single: true});
}
},

afterHeaderRender: function() {
var me = this,
headerCt = me.headerCt,
el = headerCt.el;

// we only listen to dblclick since mousemove is handled by HeaderResizer
headerCt.mon(el, 'dblclick', me.onHeaderCtDblClick, me);

// implement a fake tracker since we need the getOffset method in "doResize"
me.tracker = {
getOffset: function() {
return [me.newWidth - me.origWidth];
}
};
},

onHeaderCtDblClick: function() {
// HeaderResizer has to be enabled to use the auto resizing functionality
if (this.resizer && !this.resizer.disabled && !!this.resizer.activeHd) {
// use the activeHeader from HeaderResizer (there the onLeftEdge/onRightEdge checks are already done)
var hd = this.resizer.activeHd,
view = this.headerCt.view,
// get all headers of the active column, they may be nested if we use grouping etc.
columns = Ext.select('.' + Ext.baseCSSPrefix + 'grid-col-resizer-' + hd.id, false, view.el.dom),
// get all table elements, they may also be nested
tables = Ext.select('.' + Ext.baseCSSPrefix + 'grid-table-resizer', false, view.el.dom),
width = 0;

// these vars are needed within "doResize"
this.origWidth = hd.getWidth();
this.dragHd = hd;

// set all column headers and tables to auto width -> fits to content
columns.setWidth('auto');
tables.setWidth('auto');
// get the maximum absolute width of all headers (max content width)
columns.each(function(c) {
width = Math.max(width, c.getWidth());
});
this.newWidth = width = Ext.Number.constrain(width, this.resizer.minColWidth, this.resizer.maxColWidth);

// header.setWidth only works if the new width differs from the old width
// see Ext.grid.column.Column#setSize
// so we simply have to set the old width back
if (width - this.origWidth === 0) {
columns.setWidth(width);
tables.setWidth(this.headerCt.getFullWidth());
// otherwise resize the column to the new width
} else {
this.doResize();
}
}
}
}, function() {
// use the doResize method of HeaderResizer since it handles
// all the special cases (flex, forceFit, ...)
this.borrow(Ext.grid.plugin.HeaderResizer, 'doResize');
});

ldonofrio
31 Oct 2011, 6:26 PM
Thanks will test it tomorrow

Regards

Leonardo

ldonofrio
1 Nov 2011, 12:17 PM
It work! Thank you for this great 4 plugin!

Regards

Leonardo

Cine
14 Feb 2012, 7:39 PM
This is superb.
Tested in 4.1beta2.
It lacks a small feature though, it does not resize down to size, if the col is too wide.

ldonofrio
26 Apr 2012, 10:48 AM
My updated code to support Webkit browsers


/**
* @class Ext.ux.grid.AutoResizer
*
* Plugin to add a "Adjust column width to content" functionality to a HeaderContainer.
*
* This only works in conjunction with {@link Ext.grid.plugin.HeaderResizer} that is
* used by default in a HeaderContainer.
*
* Double clicking on a splitter adjusts the width of the column to the left to its
* maximum content width, considering minColWidth and maxColWidth.
*
* ## How to use
*
* Ext.create('Ext.grid.Panel', {
* store: myStore,
* columns: { // setting a headerCtCfg
* plugins: [ // use HeaderAutoResizer plugin
* Ext.create('Ext.ux.grid.plugin.HeaderAutoResizer')
* ],
* items: [ // define columns
* {header: 'Name', dataIndex: 'name'},
* {header: 'Email', dataIndex: 'email'},
* {header: 'Phone', dataIndex: 'phone'}
* ]
* },
* height: 200,
* width: 400,
* renderTo: Ext.getBody()
* });
*
* 2012-04-26 By Ing. Leonardo D'onofrio (leonardo_donofrio at hotmail.com)
* Fix for Chrome/Webkit
*/
Ext.define('Ext.ux.grid.AutoResizer', {
alias: 'plugin.gridautoresizer',


requires: [
'Ext.grid.plugin.HeaderResizer'
],


init: function(headerCt) {
this.headerCt = headerCt;
this.resizer = headerCt.resizer;
if (this.resizer) {
headerCt.on('render', this.afterHeaderRender, this, {single: true});
}
},


afterHeaderRender: function() {
var me = this,
headerCt = me.headerCt,
el = headerCt.el;


// we only listen to dblclick since mousemove is handled by HeaderResizer
headerCt.mon(el, 'dblclick', me.onHeaderCtDblClick, me);


// implement a fake tracker since we need the getOffset method in "doResize"
me.tracker = {
getOffset: function() {
return [me.newWidth - me.origWidth];
}
};
},


onHeaderCtDblClick: function() {
// HeaderResizer has to be enabled to use the auto resizing functionality
if (this.resizer && !this.resizer.disabled && !!this.resizer.activeHd) {
// use the activeHeader from HeaderResizer (there the onLeftEdge/onRightEdge checks are already done)
var hd = this.resizer.activeHd,
view = this.headerCt.view,
// get all headers of the active column, they may be nested if we use grouping etc.
columns = Ext.select('.' + Ext.baseCSSPrefix + 'grid-col-resizer-' + hd.id, false, view.el.dom),
// get all table elements, they may also be nested
tables = Ext.select('.' + Ext.baseCSSPrefix + 'grid-table-resizer', false, view.el.dom),
width = 0;


// these vars are needed within "doResize"
this.origWidth = hd.getWidth();
this.dragHd = hd;


// set all column headers and tables to auto width -> fits to content
columns.setWidth('auto');
tables.setWidth('auto');
// get the maximum absolute width of all headers (max content width)
columns.each(function(c) {
width = Math.max(width, c.getWidth());
});
// 2012-04-26 By Ing. Leonardo D'Onofrio (leonardo_donofrio at hotmail.com)
if (width == 0) {
//Chrome fix
var rows = Ext.select('.' + Ext.baseCSSPrefix + 'grid-cell-' + hd.id, false, view.el.dom);
rows.each(function(cell) {
width = Math.max(width, cell.first().getTextWidth());
});
width += 20;
}
// end fix
this.newWidth = width = Ext.Number.constrain(width, this.resizer.minColWidth, this.resizer.maxColWidth);


// header.setWidth only works if the new width differs from the old width
// see Ext.grid.column.Column#setSize
// so we simply have to set the old width back
if (width - this.origWidth === 0) {
columns.setWidth(width);
tables.setWidth(this.headerCt.getFullWidth());
// otherwise resize the column to the new width
} else {
this.doResize();
}
}
}
}, function() {
// use the doResize method of HeaderResizer since it handles
// all the special cases (flex, forceFit, ...)
this.borrow(Ext.grid.plugin.HeaderResizer, 'doResize');
});

webfriend13
14 Jun 2012, 1:03 AM
..

My updated code to support Webkit browsers


/**
* @class Ext.ux.grid.AutoResizer
*
* Plugin to add a "Adjust column width to content" functionality to a HeaderContainer.
*
* This only works in conjunction with {@link Ext.grid.plugin.HeaderResizer} that is
* used by default in a HeaderContainer.
*
* Double clicking on a splitter adjusts the width of the column to the left to its
* maximum content width, considering minColWidth and maxColWidth.
*
* ## How to use
*
* Ext.create('Ext.grid.Panel', {
* store: myStore,
* columns: { // setting a headerCtCfg
* plugins: [ // use HeaderAutoResizer plugin
* Ext.create('Ext.ux.grid.plugin.HeaderAutoResizer')
* ],
* items: [ // define columns
* {header: 'Name', dataIndex: 'name'},
* {header: 'Email', dataIndex: 'email'},
* {header: 'Phone', dataIndex: 'phone'}
* ]
* },
* height: 200,
* width: 400,
* renderTo: Ext.getBody()
* });
*
* 2012-04-26 By Ing. Leonardo D'onofrio (leonardo_donofrio at hotmail.com)
* Fix for Chrome/Webkit
*/
Ext.define('Ext.ux.grid.AutoResizer', {
alias: 'plugin.gridautoresizer',


requires: [
'Ext.grid.plugin.HeaderResizer'
],


init: function(headerCt) {
this.headerCt = headerCt;
this.resizer = headerCt.resizer;
if (this.resizer) {
headerCt.on('render', this.afterHeaderRender, this, {single: true});
}
},


afterHeaderRender: function() {
var me = this,
headerCt = me.headerCt,
el = headerCt.el;


// we only listen to dblclick since mousemove is handled by HeaderResizer
headerCt.mon(el, 'dblclick', me.onHeaderCtDblClick, me);


// implement a fake tracker since we need the getOffset method in "doResize"
me.tracker = {
getOffset: function() {
return [me.newWidth - me.origWidth];
}
};
},


onHeaderCtDblClick: function() {
// HeaderResizer has to be enabled to use the auto resizing functionality
if (this.resizer && !this.resizer.disabled && !!this.resizer.activeHd) {
// use the activeHeader from HeaderResizer (there the onLeftEdge/onRightEdge checks are already done)
var hd = this.resizer.activeHd,
view = this.headerCt.view,
// get all headers of the active column, they may be nested if we use grouping etc.
columns = Ext.select('.' + Ext.baseCSSPrefix + 'grid-col-resizer-' + hd.id, false, view.el.dom),
// get all table elements, they may also be nested
tables = Ext.select('.' + Ext.baseCSSPrefix + 'grid-table-resizer', false, view.el.dom),
width = 0;


// these vars are needed within "doResize"
this.origWidth = hd.getWidth();
this.dragHd = hd;


// set all column headers and tables to auto width -> fits to content
columns.setWidth('auto');
tables.setWidth('auto');
// get the maximum absolute width of all headers (max content width)
columns.each(function(c) {
width = Math.max(width, c.getWidth());
});
// 2012-04-26 By Ing. Leonardo D'Onofrio (leonardo_donofrio at hotmail.com)
if (width == 0) {
//Chrome fix
var rows = Ext.select('.' + Ext.baseCSSPrefix + 'grid-cell-' + hd.id, false, view.el.dom);
rows.each(function(cell) {
width = Math.max(width, cell.first().getTextWidth());
});
width += 20;
}
// end fix
this.newWidth = width = Ext.Number.constrain(width, this.resizer.minColWidth, this.resizer.maxColWidth);


// header.setWidth only works if the new width differs from the old width
// see Ext.grid.column.Column#setSize
// so we simply have to set the old width back
if (width - this.origWidth === 0) {
columns.setWidth(width);
tables.setWidth(this.headerCt.getFullWidth());
// otherwise resize the column to the new width
} else {
this.doResize();
}
}
}
}, function() {
// use the doResize method of HeaderResizer since it handles
// all the special cases (flex, forceFit, ...)
this.borrow(Ext.grid.plugin.HeaderResizer, 'doResize');
});

webfriend13
14 Jun 2012, 1:05 AM
Hey Makana,

Thank you for this great Plugin. Is there any way to modify this plugin to ensure when grid is rendered, its columns are automatically sized based on the content.

webfriend13
14 Jun 2012, 2:05 AM
Hi Makana,

Thank you for this great plugin but it is not working with grouping feature. Do you have any fix available?

madhu.vistex
10 Dec 2013, 3:50 AM
Hey great work Makana we need for render for itself of grid