1. #1
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    89
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi