Dblclick to autosize grid columns

[Condor]

Here is a plugin to make a grid column autosize when you double-click on the column splitter (like MS Excel).


Ext.ns('Ext.ux.grid');
(function () {
var cursorRe = /^(?:col|e|w)-resize$/;
Ext.ux.grid.AutoSizeColumns = Ext.extend(Object, {
cellPadding: 8,
constructor: function (config) {
Ext.apply(this, config);
},
init: function (grid) {
var view = grid.getView();
view.onHeaderClick = view.onHeaderClick.createInterceptor(this.onHeaderClick);
grid.on('headerdblclick', this.onHeaderDblClick.createDelegate(view, [this.cellPadding], 3));
},
onHeaderClick: function (grid, colIndex) {
var el = this.getHeaderCell(colIndex);
if (cursorRe.test(el.style.cursor)) {
return false;
}
},
onHeaderDblClick: function (grid, colIndex, e, cellPadding) {
var el = this.getHeaderCell(colIndex), width, rowIndex, count;
if (!cursorRe.test(el.style.cursor)) {
return;
}
if (e.getXY()[0] - Ext.lib.Dom.getXY(el)[0] <= 5) {
colIndex--;
el = this.getHeaderCell(colIndex);
}
if (this.cm.isFixed(colIndex) || this.cm.isHidden(colIndex)) {
return;
}
el = el.firstChild;
el.style.width = '0px';
width = el.scrollWidth;
el.style.width = 'auto';
for (rowIndex = 0, count = this.ds.getCount(); rowIndex < count; rowIndex++) {
el = this.getCell(rowIndex, colIndex).firstChild;
el.style.width = '0px';
width = Math.max(width, el.scrollWidth);
el.style.width = 'auto';
}
this.onColumnSplitterMoved(colIndex, width + cellPadding);
}
});
})();
Ext.preg('autosizecolumns', Ext.ux.grid.AutoSizeColumns);

Example usage:

new Ext.Viewport({
layout: 'fit',
items: {
xtype: 'grid',
plugins: ['autosizecolumns'],
store: [
['903185-12349058-1239058-12390', '12347895109956-203698-180571'],
['190847-319085-90123456-1934', '19023784-1490-1571293814'],
['189-5123085-1905712348971', '1290587-1578019823017895610'],
['190-908-159812-570298123978502', '123-57-4517598169028374892']],
columns: [
{header: 'Field 1', dataIndex: 'field1', sortable: true},
{header: 'Field 2', dataIndex: 'field2', sortable: true}
]
}
});

[tonedeaf]

Thank you Condor! Works perfectly.
EDIT - I like your solution of modifying the width directly using CSS. Better than incurring the processing load of setColumnWidth().

[charleshimmer]

Thanks for replying Condor.

I get the following error
Ext.ux.grid.AutoSizeColumns.js:37 TypeError: Result of expression 'this.getCell(rowIndex, colIndex)' [undefined] is not an object.

I bulid a test case using a simple array grid from the examples folder and the plugin worked great. So it has to be something with my grid.

Here is the column model of my grid.



this.cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({
width: 40
}), {
id: 'name',
header: "Name",
sortable: true,
dataIndex: 'first_name',
renderer: this.formatName,
width: 120
},
{
header: "Gatekeeper Name",
sortable: true,
dataIndex: 'gate_first_name',
renderer: function (v, params, data) {
return v + ' ' + data.data.gate_last_name;
},
hidden: true
},
{
header: "Phone Number",
sortable: true,
dataIndex: 'phone_number',
width: 110,
hidden: true
},
{
header: "Email",
sortable: true,
dataIndex: 'email',
width: 110,
hidden: true
},
{
header: "Timezone",
sortable: true,
dataIndex: 'timezone',
//renderer:function(v, params, data){return (v) ? (App.mainPanel.timezoneStore.query('value',v).get(0).data.display).replace(/\(|\)/g,''):'';},
scope: this,
width: 180,
hidden: true
},
{
header: "Organization",
sortable: true,
dataIndex: 'organization',
hidden: true
},
{
header: "Job Title",
sortable: true,
dataIndex: 'title',
hidden: true
},
{
header: "Prospect Source",
sortable: true,
dataIndex: 'source',
hidden: true
},
{
header: "Employees",
sortable: true,
dataIndex: 'employees',
hidden: true
},
{
header: "Sales Volume",
sortable: true,
dataIndex: 'sales_volume',
hidden: true
},
{
header: "Address",
sortable: true,
dataIndex: 'address',
hidden: true
},
{
header: "City",
sortable: true,
dataIndex: 'city',
hidden: this.columnHide.city
},
{
header: "State",
sortable: true,
dataIndex: 'state',
hidden: true
},
{
header: "Zip Code",
sortable: true,
dataIndex: 'zip',
hidden: true
},
{
header: "Current Offer",
sortable: true,
dataIndex: 'offer_name',
hidden: this.columnHide.current_offer
},
{
header: "Last Call Result",
id: 'last_result',
sortable: true,
width: 150,
dataIndex: 'last_attempt_result',
renderer: this.callResult,
hidden: this.columnHide.last_result
},
{
header: "Last Call Time",
sortable: true,
dataIndex: 'last_attempt_timestamp',
renderer: this.formatDate,
width: 130,
hidden: this.columnHide.last_attempt_timestamp
},
{
header: "Last Contact",
sortable: true,
dataIndex: 'last_contact_type',
renderer: this.lastContact,
width: 110,
hidden: this.columnHide.last_contact
},
{
header: "Disqualified For",
sortable: true,
dataIndex: 'callback',
renderer: this.callback,
width: 150,
hidden: this.columnHide.callback,
hideable: false
},
{
header: "Priority",
sortable: true,
dataIndex: 'priority',
hidden: true,
fixed: true
},
{
header: "Total Attempts",
sortable: true,
dataIndex: 'total_attempts',
align: 'center',
width: 100,
hidden: this.columnHide.total_attempt
},
{
header: "Total No's",
sortable: true,
dataIndex: 'total_no',
align: 'center',
width: 70,
hidden: this.columnHide.total_no
},
{
header: "Total Unanswered",
sortable: true,
dataIndex: 'total_unanswered',
align: 'center',
width: 100,
hidden: this.columnHide.total_unanswer
},
{
header: "Total Hung-ups",
sortable: true,
dataIndex: 'total_hung_up',
align: 'center',
width: 100,
hidden: true
}]);


The error pointed to line 37 which is in red. Why wouldn't it be able to get the rowIndex or colIndex?

el.style.width = 'auto';
for (rowIndex = 0, count = this.ds.getCount(); rowIndex < count; rowIndex++) {
el = this.getCell(rowIndex, colIndex).firstChild;
el.style.width = '0px';
width = Math.max(width, el.scrollWidth);
el.style.width = 'auto';
}
this.onColumnSplitterMoved(colIndex, width + cellPadding);

[jelt]

Hi,

Thank you condor, it sound great plugin :)
Just a little error.
When you try to autosize a column which have the next column hidden, nothing append
It caused by this :

if (e.getXY()[0] - Ext.lib.Dom.getXY(el)[0] <= 5) {
colIndex--;
el = this.getHeaderCell(colIndex);
}

For example :
column 0 visible,
column 1 visible
column 2 hiden,
column 3 visible.

I try to resize column 1 : i dbl click on the sizer, over the column 3 !
colIndex-- => index become 2 => hidden column : exit process.


if (e.getXY()[0] - Ext.lib.Dom.getXY(el)[0] <= 5) {
do
colIndex--;
while (colIndex>0 && this.cm.isHidden(colIndex));
el = this.getHeaderCell(colIndex);
}
seem to fix the problem