Results 1 to 4 of 4

Thread: Grid auto-size column?

  1. #1
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    119
    Vote Rating
    0
      0  

    Question Grid auto-size column?

    I don't love the idea of having to hard code column widths due to variable data lengths. I also don't love the look of filling the grid entirely since it creates a lot of wasted space for each column. Is there a simple way to have columns auto-size based on the data contained in the columns? The header should also be taken into account.

  2. #2
    Ext GWT Premium Member
    Join Date
    Aug 2010
    Location
    Germany, Solingen
    Posts
    280
    Answers
    4
    Vote Rating
    3
      0  

    Default

    One way that works is, to define a suitable size for every column and define one column as the one which could be auto expanded using:


    grid.getView()
    .setAutoExpandColumn([yourColumn])

    Don't konw if there is another way to do this.

  3. #3
    Sencha User
    Join Date
    Jul 2007
    Posts
    23
    Vote Rating
    1
      1  

    Default

    I know this comes a little bit late....

    [edit] I tried this on ExtJS 4.2 with my originally posted code. For ExtJS 6.2 I cleaned it up a little bit, separated the code for autosizing columns and autogrowing the last column to fit the view width and made autosizing buffered. Seems to work nice. Below is the original code for 4.2 and below that the code for 6.2: [/edit]

    Code for 4.2:
    PHP Code:
    Ext.override(Ext.grid.Panel,
    {
        
    autoSizeColumns: function()
        {
            var 
    grid this;
            if (
    grid.reconfiguring) return;
            var 
    gridview grid.view;
            var 
    visCols  gridview.getHeaderCt().getVisibleGridColumns();
            var 
    visCount visCols.length;
            var 
    gridview.getHeaderCt().getWidth();
            if (
    gridview.getHeight() <= parseFloat(gridview.getEl().dom.children[0].scrollHeight))
            {
                
    Ext.getScrollbarSize().width;
            }
            
            
    Ext.each(visCols, function(column)
            {
                var 
    colNum column.getVisibleIndex() + 1;
                
    column.autoSize();
                
    // fix for empty columns autoSize() making column too small for header text
                
    var pad column.textEl.getX() - column.getX();
                var 
    minw column.textEl.getComputedWidth()+column.triggerEl.getComputedWidth()+(pad*2);
                if (
    column.maxGrow)
                {
                    if (
    column.maxGrow column.getWidth()) column.setWidth(column.maxGrow);
                }
                if (
    column.getWidth() < minwcolumn.setWidth(minw);
                if (
    colNum == visCount && column.getWidth()) column.setWidth(w);
                
    column.getWidth();
            })
            
            
    gridview.updateLayout();
        },
        
        
    initComponent: function()
        {
            var 
    me this;
            
            
    me.callParent(arguments);

            var 
    view me.getView();
            
            
    // resize headers on refresh and resize
            
    me.mon(view, {
                
    //refresh: function(){Ext.defer(me.autoSizeColumns, 100, me)},
                
    refreshme.autoSizeColumns,
                
    itemupdateme.autoSizeColumns,
                
    scopeme
            
    });
            
            
    // resize headers on column changes
            
    me.mon(me, {
                
    columnmoveme.autoSizeColumns,
                
    columnshowme.autoSizeColumns,
                
    columnhideme.autoSizeColumns,
                
    groupchangeme.autoSizeColumns,
                
    sortchangeme.autoSizeColumns,
                
    scopeme
            
    });
        },
        
        
    onViewReady: function()
        {
            
    this.fireEvent('viewready'this);
            
            var 
    me this;
            var 
    view me.getView();
            
            
    // resize headers on refresh and resize
            
    me.mon(view, {
                
    resizeme.autoSizeColumns,
                
    scopeme
            
    });
        }
    }); 
    Cleaned up Code for 6.2 (could work for lower Versions - did not test it though)
    PHP Code:
    Ext.override(Ext.view.Table,
    {
        
    // override for auto grow on last column
        
    autoSizeColumn: function(header) {
            if (
    Ext.isNumber(header)) {
                
    header this.getGridColumns()[header];
            }
            if (
    header) {
                if (
    header.isGroupHeader) {
                    
    header.autoSize();
                    return;
                }
                
    delete header.flex;
                
                
    // store value for later use in iteration for auto grow last column
                
    header.computedMaxWidth this.getMaxContentWidth(header);
                
                
    // get view width and respect scrollbar
                
    var this.getHeaderCt().getWidth();
                if (
    this.getHeight() <= parseFloat(this.getEl().dom.children[0].scrollHeight)){
                    
    Ext.getScrollbarSize().width;
                }
                
                
    // get visible columns info
                
    var visCols  this.getHeaderCt().getVisibleGridColumns();
                var 
    visCount visCols.length;
                var 
    headerNum header.getVisibleIndex() + 1;
                
                
    // only used for auto grow last column
                
    if (&& headerNum === visCount)
                {
                    
    // var for addition of column widths
                    
    var wcols 0;
                    
                    
    // iterate trough visible columns
                    
    Ext.each(visCols, function(column)
                    {
                        
    // index of iterated column
                        
    var colNum column.getVisibleIndex() + 1;
                        if (
    colNum != visCountwcols wcols column.computedMaxWidth;
                    });
                    
                    
    // only grow last column if there is space left in the view
                    
    if (wcols header.computedMaxWidthheader.computedMaxWidth wcols;
                }
                
                
    // set width for column
                
    header.setWidth(header.computedMaxWidth);
            }
        }
    });


    Ext.override(Ext.grid.Panel,
    {
        
    // override for binding autosize columns on misc events after view is ready
        // onViewReady is defined in parent, so call parent and add own code
        
    onViewReady: function()
        {
            var 
    me this;
            
            
    me.callParent(arguments);
            
            var 
    view me.getView();
            
            
    // new buffered function for auto size of all visible columns
            
    me.autoSizeColumns Ext.Function.createBuffered(function()
            {
                var 
    grid this;
                if (
    grid.reconfiguring) return;
                
                var 
    visCols  grid.view.getHeaderCt().getVisibleGridColumns();
                
                
    Ext.each(visCols, function(column)
                {
                    
    // dirty fix for column headersize too small
                    
    column.textEl.setStyle('padding-right''6px');
                    
    // autosize 
                    
    column.autoSize();
                });
            }, 
    200me);
            
            
    // resize headers on refresh and resize
            
    me.mon(view, {
                
    resize: function(){me.autoSizeColumns()},
                
    refresh: function(){me.autoSizeColumns()},
                
    itemupdate: function(){me.autoSizeColumns()},
                
    scopeme
            
    });
            
            
    // resize headers on column changes
            
    me.mon(me, {
                
    columnmove: function(){me.autoSizeColumns()},
                
    columnshow: function(){me.autoSizeColumns()},
                
    columnhide: function(){me.autoSizeColumns()},
                
    groupchange: function(){me.autoSizeColumns()},
                
    sortchange: function(){me.autoSizeColumns()},
                
    scopeme
            
    });
        }
    }); 

  4. #4
    Sencha User thanhquisencha's Avatar
    Join Date
    Feb 2017
    Posts
    4
    Vote Rating
    0
      0  

    Default

    I agree with your comments

Similar Threads

  1. Auto-Size Column Selector
    By vertigoMX in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 5 Mar 2008, 12:15 PM
  2. Auto-size column on double click
    By splintor in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 17 Oct 2007, 11:49 AM
  3. Grid/Column Model - How to auto-size two fields?
    By photoadrian in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 14 Jun 2007, 12:34 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •