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