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

      0  

    Default Unanswered: Auto fit column widths instead of having fix widths

    Unanswered: Auto fit column widths instead of having fix widths


    Hi All,


    We are using ExtJs 4.1 and making use of grid extensively. Right now we have hard coded the width for each column, we want to make column auto fit based on the content of the gird. We should also be able to set max and min width of the column. Please let me know if we have any plugin or if there is a feature in ExtJs 4.2 for the same

    Thank you.

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,021
    Answers
    385
    Vote Rating
    183
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    4.1.x did not have an autofit solution, but 4.2 did introduce a method to fit the column width to the content. I haven't tried it myself just yet so I'm not sure how well it plays with minWidth / maxWidth.
    http://docs.sencha.com/extjs/4.2.0/#...ethod-autoSize

  3. #3
    Sencha Premium Member richardvd's Avatar
    Join Date
    Jun 2011
    Location
    NL
    Posts
    43
    Answers
    4
    Vote Rating
    12
    richardvd will become famous soon enough

      0  

    Default Example

    Example


    Thanks, I needed this feature too. I tested it in 4.2.0 and autoSize() works, and it respects minWidth / maxWidth. Great!

    In the example below I set all three columns to a width of 150, and I also gave the second column a minWidth of 150. Upon refresh of the grid autoSize() is run on the first two columns.

    The result is that the first column is now just wide enough to fit its content, the second column is still 150 pixels wide because of the minWidth setting, and the third column is still 150 pixels wide because autoSize() wasn't called on it.

    autosize.PNG
    Code:
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { text: 'Name',  dataIndex: 'name',  width: 150, autoSizeColumn: true },
            { text: 'Email', dataIndex: 'email', width: 150, autoSizeColumn: true, minWidth: 150 },
            { text: 'Phone', dataIndex: 'phone', width: 150 }
        ],
        viewConfig: {
            listeners: {
                refresh: function(dataview) {
                    Ext.each(dataview.panel.columns, function(column) {
                        if (column.autoSizeColumn === true)
                            column.autoSize();
                    })
                }
            }
        },
        width: 450,
        renderTo: Ext.getBody()
    });
    Richard

  4. #4
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    228
    Answers
    1
    Vote Rating
    2
    ypandey is on a distinguished road

      0  

    Exclamation autoSize with BufferedRenderer Grid?

    autoSize with BufferedRenderer Grid?


    autoSize isn't working properly with bufferedrenderer grid.
    because getMaxContentWidth(header) returns maxWidth of rendered cells only.
    So column width will set only according to those rows which have been rendered immediately after refresh.

    So in this case, refresh event is not appropriate place to call autoSize.
    Any other event which can be used?

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    4
    Answers
    1
    Vote Rating
    1
    gmcgrath is on a distinguished road

      0  

    Default


    You can also use the flex property on the column

    Code:
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    
    
    
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { text: 'Name',  dataIndex: 'name', flex: 1, minWidth:250 },
            { text: 'Email', dataIndex: 'email', flex: 3, maxWidth: 150 },
            { text: 'Phone', dataIndex: 'phone', width: 150 }
        ],
        width: 700,
        renderTo: Ext.getBody()
    });
    
    https://fiddle.sencha.com/#fiddle/4id

  6. #6
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    228
    Answers
    1
    Vote Rating
    2
    ypandey is on a distinguished road

      0  

    Arrow


    Quote Originally Posted by gmcgrath View Post
    You can also use the flex property on the column
    Hi Gmcgrath,
    This thread is on auto fit column based on the content in the grid.
    "flex" adjusts column width based on width of the grid.

  7. #7
    Sencha User
    Join Date
    Feb 2012
    Posts
    19
    Answers
    1
    Vote Rating
    4
    mattjenkins is on a distinguished road

      0  

    Default


    There is a bodyscroll event on the view that might work.