1. #1
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar