1. #1
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default Dblclick to autosize grid columns

    Dblclick to autosize grid columns


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

    Code:
    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:
    Code:
    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}
            ]
        }
    });

  2. #2
    Ext User tonedeaf's Avatar
    Join Date
    Dec 2007
    Posts
    137
    Vote Rating
    1
    tonedeaf is on a distinguished road

      0  

    Default


    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().

  3. #3
    Sencha User charleshimmer's Avatar
    Join Date
    Jul 2008
    Location
    Austin, TX
    Posts
    329
    Vote Rating
    0
    charleshimmer is on a distinguished road

      0  

    Default


    Thanks for replying Condor.

    I get the following error
    Code:
    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.

    Code:
    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?
    Code:
           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);

  4. #4
    Sencha User
    Join Date
    Aug 2007
    Posts
    64
    Vote Rating
    0
    jelt is on a distinguished road

      0  

    Default


    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 :
    Code:
                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.

    Code:
                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