1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    218
    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
    4,770
    Answers
    355
    Vote Rating
    165
    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
    Join Date
    Jun 2011
    Location
    NL
    Posts
    36
    Answers
    3
    Vote Rating
    11
    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
    Ext JS Premium Member
    Join Date
    Dec 2011
    Location
    India
    Posts
    192
    Answers
    7
    Vote Rating
    3
    rpoddar 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
    3
    Answers
    1
    Vote Rating
    1
    gmcgrath is on a distinguished road

      -1  

    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
    Ext JS Premium Member
    Join Date
    Dec 2011
    Location
    India
    Posts
    192
    Answers
    7
    Vote Rating
    3
    rpoddar 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
    3
    Vote Rating
    0
    mattjenkins is on a distinguished road

      0  

    Default


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

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