1. #1
    Sencha User makana's Avatar
    Join Date
    Apr 2008
    Location
    Dresden, Germany
    Posts
    527
    Vote Rating
    20
    makana has a spectacular aura about makana has a spectacular aura about

      0  

    Default Ext.ux.grid.plugin.HeaderAutoResizer - adjust column width to content

    Ext.ux.grid.plugin.HeaderAutoResizer - adjust column width to content


    A plugin to adjust a grid column width to its content if you doubleclick on the column's splitter.

    Code:
    /**
     * @class Ext.ux.grid.plugin.HeaderAutoResizer
     * 
     * Plugin to add a "Adjust column width to content" functionality to a HeaderContainer.
     *  
     * This only works in conjunction with {@link Ext.grid.plugin.HeaderResizer} that is
     * used by default in a HeaderContainer.
     *  
     * Double clicking on a splitter adjusts the width of the column to the left to its
     * maximum content width, considering minColWidth and maxColWidth.
     *
     * ## How to use
     *  
     *     Ext.create('Ext.grid.Panel', {
     *         store: myStore,
     *         columns: { // setting a headerCtCfg
     *             plugins: [ // use HeaderAutoResizer plugin
     *                 Ext.create('Ext.ux.grid.plugin.HeaderAutoResizer')
     *             ],
     *             items: [ // define columns
     *                 {header: 'Name', dataIndex: 'name'},
     *                 {header: 'Email', dataIndex: 'email'},
     *                 {header: 'Phone', dataIndex: 'phone'}
     *             ]
     *         },
     *         height: 200,
     *         width: 400,
     *         renderTo: Ext.getBody()
     *     });
     *
     */  
    Ext.define('Ext.ux.grid.plugin.HeaderAutoResizer', {
    	alias: 'plugin.gridheaderautoresizer',
    	
    	requires: [
    		'Ext.grid.plugin.HeaderResizer'
    	],
    	
    	init: function(headerCt) {
    		this.headerCt = headerCt;
    		this.resizer = headerCt.resizer;
    		if (this.resizer) {
    			headerCt.on('render', this.afterHeaderRender, this, {single: true});
    		}
    	},
    	
    	afterHeaderRender: function() {
    		var me = this,
    			headerCt = me.headerCt,
    			el = headerCt.el;
    		
    		// we only listen to dblclick since mousemove is handled by HeaderResizer
    		headerCt.mon(el, 'dblclick', me.onHeaderCtDblClick, me);
    		
    		// implement a fake tracker since we need the getOffset method in "doResize"
    		me.tracker = {
    			getOffset: function() {
    				return [me.newWidth - me.origWidth];
    			}
    		};
    	},
    	
    	onHeaderCtDblClick: function() {
    		// HeaderResizer has to be enabled to use the auto resizing functionality
    		if (this.resizer && !this.resizer.disabled && !!this.resizer.activeHd) {
    			// use the activeHeader from HeaderResizer (there the onLeftEdge/onRightEdge checks are already done)
    			var hd = this.resizer.activeHd,
    				view = this.headerCt.view,
    				// get all headers of the active column, they may be nested if we use grouping etc.
    				columns = Ext.select('.' + Ext.baseCSSPrefix + 'grid-col-resizer-' + hd.id, false, view.el.dom),
    				// get all table elements, they may also be nested
    				tables = Ext.select('.' + Ext.baseCSSPrefix + 'grid-table-resizer', false, view.el.dom),
    				width = 0;
    			
    			// these vars are needed within "doResize"
    			this.origWidth = hd.getWidth();
    			this.dragHd = hd;
    			
    			// set all column headers and tables to auto width -> fits to content
    			columns.setWidth('auto');
    			tables.setWidth('auto');
    			// get the maximum absolute width of all headers (max content width)
    			columns.each(function(c) {
    				width = Math.max(width, c.getWidth());
    			});
    			this.newWidth = width = Ext.Number.constrain(width, this.resizer.minColWidth, this.resizer.maxColWidth);
    			
    			// header.setWidth only works if the new width differs from the old width
    			// see Ext.grid.column.Column#setSize
    			// so we simply have to set the old width back
    			if (width - this.origWidth === 0) {
    				columns.setWidth(width);
    				tables.setWidth(this.headerCt.getFullWidth());
    			// otherwise resize the column to the new width
    			} else {
    				this.doResize();
    			}
    		}
    	}
    }, function() {
    	// use the doResize method of HeaderResizer since it handles
    	// all the special cases (flex, forceFit, ...)
    	this.borrow(Ext.grid.plugin.HeaderResizer, 'doResize');
    });
    Programming today is a race between software engineers striving to build bigger and better Ń–diot-proof programs, and the universe striving to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)

    Enhanced ExtJS adapter for Adobe AIR

  2. #2
    Sencha User
    Join Date
    Jun 2010
    Location
    Buenos Aires, Argentina
    Posts
    213
    Vote Rating
    9
    ldonofrio will become famous soon enough

      0  

    Default


    Thanks will test it tomorrow

    Regards

    Leonardo

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Location
    Buenos Aires, Argentina
    Posts
    213
    Vote Rating
    9
    ldonofrio will become famous soon enough

      0  

    Default


    It work! Thank you for this great 4 plugin!

    Regards

    Leonardo

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    24
    Vote Rating
    1
    Cine is on a distinguished road

      0  

    Default


    This is superb.
    Tested in 4.1beta2.
    It lacks a small feature though, it does not resize down to size, if the col is too wide.

  5. #5
    Sencha User
    Join Date
    Jun 2010
    Location
    Buenos Aires, Argentina
    Posts
    213
    Vote Rating
    9
    ldonofrio will become famous soon enough

      0  

    Default


    My updated code to support Webkit browsers
    Code:
    /**
     * @class Ext.ux.grid.AutoResizer
     *
     * Plugin to add a "Adjust column width to content" functionality to a HeaderContainer.
     *
     * This only works in conjunction with {@link Ext.grid.plugin.HeaderResizer} that is
     * used by default in a HeaderContainer.
     *
     * Double clicking on a splitter adjusts the width of the column to the left to its
     * maximum content width, considering minColWidth and maxColWidth.
     *
     * ## How to use
     *
     *     Ext.create('Ext.grid.Panel', {
     *         store: myStore,
     *         columns: { // setting a headerCtCfg
     *             plugins: [ // use HeaderAutoResizer plugin
     *                 Ext.create('Ext.ux.grid.plugin.HeaderAutoResizer')
     *             ],
     *             items: [ // define columns
     *                 {header: 'Name', dataIndex: 'name'},
     *                 {header: 'Email', dataIndex: 'email'},
     *                 {header: 'Phone', dataIndex: 'phone'}
     *             ]
     *         },
     *         height: 200,
     *         width: 400,
     *         renderTo: Ext.getBody()
     *     });
     *
     * 2012-04-26 By Ing. Leonardo D'onofrio (leonardo_donofrio at hotmail.com)
     * Fix for Chrome/Webkit
     */
    Ext.define('Ext.ux.grid.AutoResizer', {
    	alias: 'plugin.gridautoresizer',
    
    
    	requires: [
    		'Ext.grid.plugin.HeaderResizer'
    	],
    
    
    	init: function(headerCt) {
    		this.headerCt = headerCt;
    		this.resizer = headerCt.resizer;
    		if (this.resizer) {
    			headerCt.on('render', this.afterHeaderRender, this, {single: true});
    		}
    	},
    
    
    	afterHeaderRender: function() {
    		var me = this,
    			headerCt = me.headerCt,
    			el = headerCt.el;
    
    
    		// we only listen to dblclick since mousemove is handled by HeaderResizer
    		headerCt.mon(el, 'dblclick', me.onHeaderCtDblClick, me);
    
    
    		// implement a fake tracker since we need the getOffset method in "doResize"
    		me.tracker = {
    			getOffset: function() {
    				return [me.newWidth - me.origWidth];
    			}
    		};
    	},
    
    
    	onHeaderCtDblClick: function() {
    		// HeaderResizer has to be enabled to use the auto resizing functionality
    		if (this.resizer && !this.resizer.disabled && !!this.resizer.activeHd) {
    			// use the activeHeader from HeaderResizer (there the onLeftEdge/onRightEdge checks are already done)
    			var hd = this.resizer.activeHd,
    				view = this.headerCt.view,
    				// get all headers of the active column, they may be nested if we use grouping etc.
    				columns = Ext.select('.' + Ext.baseCSSPrefix + 'grid-col-resizer-' + hd.id, false, view.el.dom),
    				// get all table elements, they may also be nested
    				tables = Ext.select('.' + Ext.baseCSSPrefix + 'grid-table-resizer', false, view.el.dom),
    				width = 0;
    
    
    			// these vars are needed within "doResize"
    			this.origWidth = hd.getWidth();
    			this.dragHd = hd;
    
    
    			// set all column headers and tables to auto width -> fits to content
    			columns.setWidth('auto');
    			tables.setWidth('auto');
    			// get the maximum absolute width of all headers (max content width)
    			columns.each(function(c) {
    				width = Math.max(width, c.getWidth());
    			});
    			// 2012-04-26 By Ing. Leonardo D'Onofrio (leonardo_donofrio at hotmail.com)
    			if (width == 0) {
    				//Chrome fix
    				var rows = Ext.select('.' + Ext.baseCSSPrefix + 'grid-cell-' + hd.id, false, view.el.dom);
    				rows.each(function(cell) {
    					width = Math.max(width, cell.first().getTextWidth());
    				});
    				width += 20;
    			}
    			// end fix
    			this.newWidth = width = Ext.Number.constrain(width, this.resizer.minColWidth, this.resizer.maxColWidth);
    
    
    			// header.setWidth only works if the new width differs from the old width
    			// see Ext.grid.column.Column#setSize
    			// so we simply have to set the old width back
    			if (width - this.origWidth === 0) {
    				columns.setWidth(width);
    				tables.setWidth(this.headerCt.getFullWidth());
    			// otherwise resize the column to the new width
    			} else {
    				this.doResize();
    			}
    		}
    	}
    }, function() {
    	// use the doResize method of HeaderResizer since it handles
    	// all the special cases (flex, forceFit, ...)
    	this.borrow(Ext.grid.plugin.HeaderResizer, 'doResize');
    });

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Vote Rating
    5
    webfriend13 is on a distinguished road

      0  

    Default


    ..
    Quote Originally Posted by ldonofrio View Post
    My updated code to support Webkit browsers
    Code:
    /**
     * @class Ext.ux.grid.AutoResizer
     *
     * Plugin to add a "Adjust column width to content" functionality to a HeaderContainer.
     *
     * This only works in conjunction with {@link Ext.grid.plugin.HeaderResizer} that is
     * used by default in a HeaderContainer.
     *
     * Double clicking on a splitter adjusts the width of the column to the left to its
     * maximum content width, considering minColWidth and maxColWidth.
     *
     * ## How to use
     *
     *     Ext.create('Ext.grid.Panel', {
     *         store: myStore,
     *         columns: { // setting a headerCtCfg
     *             plugins: [ // use HeaderAutoResizer plugin
     *                 Ext.create('Ext.ux.grid.plugin.HeaderAutoResizer')
     *             ],
     *             items: [ // define columns
     *                 {header: 'Name', dataIndex: 'name'},
     *                 {header: 'Email', dataIndex: 'email'},
     *                 {header: 'Phone', dataIndex: 'phone'}
     *             ]
     *         },
     *         height: 200,
     *         width: 400,
     *         renderTo: Ext.getBody()
     *     });
     *
     * 2012-04-26 By Ing. Leonardo D'onofrio (leonardo_donofrio at hotmail.com)
     * Fix for Chrome/Webkit
     */
    Ext.define('Ext.ux.grid.AutoResizer', {
        alias: 'plugin.gridautoresizer',
    
    
        requires: [
            'Ext.grid.plugin.HeaderResizer'
        ],
    
    
        init: function(headerCt) {
            this.headerCt = headerCt;
            this.resizer = headerCt.resizer;
            if (this.resizer) {
                headerCt.on('render', this.afterHeaderRender, this, {single: true});
            }
        },
    
    
        afterHeaderRender: function() {
            var me = this,
                headerCt = me.headerCt,
                el = headerCt.el;
    
    
            // we only listen to dblclick since mousemove is handled by HeaderResizer
            headerCt.mon(el, 'dblclick', me.onHeaderCtDblClick, me);
    
    
            // implement a fake tracker since we need the getOffset method in "doResize"
            me.tracker = {
                getOffset: function() {
                    return [me.newWidth - me.origWidth];
                }
            };
        },
    
    
        onHeaderCtDblClick: function() {
            // HeaderResizer has to be enabled to use the auto resizing functionality
            if (this.resizer && !this.resizer.disabled && !!this.resizer.activeHd) {
                // use the activeHeader from HeaderResizer (there the onLeftEdge/onRightEdge checks are already done)
                var hd = this.resizer.activeHd,
                    view = this.headerCt.view,
                    // get all headers of the active column, they may be nested if we use grouping etc.
                    columns = Ext.select('.' + Ext.baseCSSPrefix + 'grid-col-resizer-' + hd.id, false, view.el.dom),
                    // get all table elements, they may also be nested
                    tables = Ext.select('.' + Ext.baseCSSPrefix + 'grid-table-resizer', false, view.el.dom),
                    width = 0;
    
    
                // these vars are needed within "doResize"
                this.origWidth = hd.getWidth();
                this.dragHd = hd;
    
    
                // set all column headers and tables to auto width -> fits to content
                columns.setWidth('auto');
                tables.setWidth('auto');
                // get the maximum absolute width of all headers (max content width)
                columns.each(function(c) {
                    width = Math.max(width, c.getWidth());
                });
                // 2012-04-26 By Ing. Leonardo D'Onofrio (leonardo_donofrio at hotmail.com)
                if (width == 0) {
                    //Chrome fix
                    var rows = Ext.select('.' + Ext.baseCSSPrefix + 'grid-cell-' + hd.id, false, view.el.dom);
                    rows.each(function(cell) {
                        width = Math.max(width, cell.first().getTextWidth());
                    });
                    width += 20;
                }
                // end fix
                this.newWidth = width = Ext.Number.constrain(width, this.resizer.minColWidth, this.resizer.maxColWidth);
    
    
                // header.setWidth only works if the new width differs from the old width
                // see Ext.grid.column.Column#setSize
                // so we simply have to set the old width back
                if (width - this.origWidth === 0) {
                    columns.setWidth(width);
                    tables.setWidth(this.headerCt.getFullWidth());
                // otherwise resize the column to the new width
                } else {
                    this.doResize();
                }
            }
        }
    }, function() {
        // use the doResize method of HeaderResizer since it handles
        // all the special cases (flex, forceFit, ...)
        this.borrow(Ext.grid.plugin.HeaderResizer, 'doResize');
    });

  7. #7
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Vote Rating
    5
    webfriend13 is on a distinguished road

      1  

    Default


    Hey Makana,

    Thank you for this great Plugin. Is there any way to modify this plugin to ensure when grid is rendered, its columns are automatically sized based on the content.

  8. #8
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Vote Rating
    5
    webfriend13 is on a distinguished road

      0  

    Default


    Hi Makana,

    Thank you for this great plugin but it is not working with grouping feature. Do you have any fix available?

  9. #9
    Sencha Premium Member
    Join Date
    Jul 2013
    Posts
    8
    Vote Rating
    0
    madhu.vistex is on a distinguished road

      0  

    Default


    Hey great work Makana we need for render for itself of grid