ExtJS Modern - autosize grid columns

Question

I have a modern ExtJS 6.2.0 application. There is a grid with 9 columns.

Is there a way to autosize the columns to make it wide enough for the full cell content to show? Or what are the best practices when it comes grids on mobile with lots of columns?

Fiddle

Answer 1

Modern toolkit does not have a column autoSize function. Here is a way of doing it using render function and HTML5 canvas, its not ideal but it works

var store = Ext.create("Ext.data.Store",{
    autoLoad:true,
    fields: [
        'id', 'description',''
    ],
    data: [
      {
        "_id": "5cc2e64bb00a9f2c8756b835",
        "index": 0,
        "guid": "fcc7160d-da75-45f4-8f38-3a713f5c44c3",
        "isActive": false,
        "balance": "$2,866.91",
        "picture": "http://placehold.it/32x32",
        "age": 24,
        "eyeColor": "brown",
        "name": "Erica Simmons",
        "gender": "female",
        "company": "BOILCAT",
        "email": "ericasimmons@boilcat.com",
        "phone": "+1 (858) 557-2672",
        "address": "355 Williams Place, Northchase, North Dakota, 105",
        "about": "Enim laborum eiusmod exercitation ullamco culpa consectetur. Nisi eiusmod ad laboris do amet aliqua nostrud anim fugiat ut sit dolor deserunt voluptate. Adipisicing consectetur mollit exercitation deserunt est adipisicing ut et ipsum eiusmod irure aliquip dolore. Eiusmod fugiat ex proident id exercitation incididunt. Officia culpa sint elit commodo nisi ipsum mollit. Ea sunt irure aute ullamco in quis nostrud reprehenderit proident. Incididunt quis pariatur est ipsum incididunt aliqua do non nisi mollit ut reprehenderit.\r\n",
        "registered": "2018-05-02T08:40:59 +04:00",
        "latitude": 72.141529,
        "longitude": 177.9731
      },
      {
        "_id": "5cc2e64bc3c65ddbac68a632",
        "index": 1,
        "guid": "57efe8bb-fe43-43ae-bfc4-93097033229a",
        "isActive": false,
        "balance": "$2,140.56",
        "picture": "http://placehold.it/32x32",
        "age": 39,
        "eyeColor": "blue",
        "name": "Haynes Fletcher",
        "gender": "male",
        "company": "DYNO",
        "email": "haynesfletcher@dyno.com",
        "phone": "+1 (965) 592-2046",
        "address": "686 Seba Avenue, Convent, Idaho, 4320",
        "about": "Nisi eiusmod eiusmod anim deserunt officia et excepteur laborum anim dolor sunt commodo sint consequat. Ipsum ut et non veniam exercitation non cillum dolore. Officia incididunt magna tempor reprehenderit voluptate dolor quis velit nulla in amet aliquip reprehenderit quis. Velit culpa nostrud tempor elit deserunt eiusmod. Ipsum qui enim sint nisi adipisicing sunt Lorem culpa velit anim consectetur.\r\n",
        "registered": "2019-01-14T04:13:06 +05:00",
        "latitude": -46.941837,
        "longitude": 78.864089
      },
      {
        "_id": "5cc2e64baebf24c595cf8fd3",
        "index": 2,
        "guid": "07215aa0-f61f-457e-8210-2615c528aa56",
        "isActive": true,
        "balance": "$1237891739192837.11",
        "picture": "http://placehold.it/32x32",
        "age": 22,
        "eyeColor": "blue",
        "name": "Flowers Wolfe",
        "gender": "male",
        "company": "XERONK",
        "email": "flowerswolfe@xeronk.com",
        "phone": "+1 (834) 454-2632",
        "address": "658 Union Avenue, Wacissa, Wisconsin, 3808",
        "about": "Quis incididunt aliquip sunt cillum deserunt tempor excepteur ut mollit velit esse. In dolore culpa dolore laborum aliquip aute aliqua velit eu incididunt. Ut in id sunt cupidatat. Sunt aute Lorem enim ad laboris esse anim labore exercitation. Do deserunt reprehenderit elit Lorem laboris voluptate et laboris aliqua proident nulla.\r\n",
        "registered": "2018-03-31T12:21:18 +04:00",
        "latitude": 31.650557,
        "longitude": -24.327591
      },
      {
        "_id": "5cc2e64bd055498bc686cc83",
        "index": 3,
        "guid": "12259810-8a2f-40bb-9057-2f839f3eaaa3",
        "isActive": false,
        "balance": "$28317289312793.01",
        "picture": "http://placehold.it/32x32",
        "age": 33,
        "eyeColor": "blue",
        "name": "Candice Cross",
        "gender": "female",
        "company": "GOKO",
        "email": "candicecross@goko.com",
        "phone": "+1 (908) 538-2658",
        "address": "716 Lorimer Street, Keller, Maine, 4226",
        "about": "Incididunt in commodo sint labore laboris do. Mollit sunt ad sunt est duis et esse. Est consectetur laboris aliqua qui sunt ut Lorem excepteur irure.\r\n",
        "registered": "2014-03-21T01:35:22 +04:00",
        "latitude": 22.210794,
        "longitude": -83.475031
      },
      {
        "_id": "5cc2e64bae2ad5d6be9a6e15",
        "index": 4,
        "guid": "7c068eea-2998-4882-9716-661f47723117",
        "isActive": false,
        "balance": "$141892371298.73",
        "picture": "http://placehold.it/32x32",
        "age": 37,
        "eyeColor": "brown",
        "name": "Dodson Reilly",
        "gender": "male",
        "company": "MOREGANIC",
        "email": "dodsonreilly@moreganic.com",
        "phone": "+1 (988) 401-3517",
        "address": "115 Bennet Court, Foscoe, New Mexico, 7884",
        "about": "Dolor id qui deserunt voluptate eiusmod elit consequat. Deserunt velit occaecat aliqua ex enim irure ullamco consequat duis culpa exercitation. Excepteur aute nisi do nisi exercitation. Consectetur enim laboris est mollit elit sunt nostrud ut occaecat amet. Duis sunt consectetur tempor reprehenderit do cupidatat nisi excepteur pariatur. Cupidatat laborum nisi in ipsum nulla commodo irure amet commodo non.\r\n",
        "registered": "2015-04-20T12:34:02 +04:00",
        "latitude": -72.250717,
        "longitude": -94.67352
      },
      {
        "_id": "5cc2e64b8b1a90539a3ab3f7",
        "index": 5,
        "guid": "ab1fba4e-d0dc-459b-9d27-c951ec870fd1",
        "isActive": false,
        "balance": "$1,261.25",
        "picture": "http://placehold.it/32x32",
        "age": 28,
        "eyeColor": "brown",
        "name": "Mcmahon Rollins",
        "gender": "male",
        "company": "OCTOCORE",
        "email": "mcmahonrollins@octocore.com",
        "phone": "+1 (877) 550-3535",
        "address": "550 Conselyea Street, Osage, Pennsylvania, 8131",
        "about": "Excepteur enim consectetur laborum sunt irure esse ullamco mollit culpa elit. Nostrud nostrud eiusmod adipisicing nisi aliquip adipisicing culpa Lorem aute duis aute dolor. Veniam ut in proident excepteur aute ex sunt anim fugiat sint ut aute. Ipsum duis amet voluptate ex duis adipisicing irure reprehenderit fugiat amet nisi irure. Incididunt incididunt laboris adipisicing fugiat.\r\n",
        "registered": "2015-09-17T01:55:53 +04:00",
        "latitude": -37.589241,
        "longitude": 49.390228
      }
    ]

});

//get the text size here
var getTextWidth = function(text, font) {
    // re-use canvas object for better performance
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;
}

//use this render in each column that you want to autosize
var myAutoSizeRender = function(val,data,id,cel){
    cel._column.setWidth(getTextWidth(val,"17px Helvetica Neue"));
    return val;
}

Ext.define('Fiddle.view.Main', {
    extend: 'Ext.Container',
    layout: 'vbox',
    scrollable: 'y',
    items: [{
        id:'myGrid',
        xtype: 'grid',
        title: 'Test',
        height: 500,
        store:store,
        columns: [
        {
            text:'Index',
            dataIndex:"index"
        },
        {
            text: 'ID',
            width:100,
            dataIndex: '_id',
            renderer: myAutoSizeRender
        },
        {
            text:'Guid',
            dataIndex:'guid',
            renderer: myAutoSizeRender
        },
        {
            text:'IS Active',
            dataIndex:'isActive'
        },
        {
            text:'Balance',
            dataIndex:"balance"
        },
        {
            text:"Picture",
            dataIndex:'picture',
            renderer: myAutoSizeRender
        },
        {
            text:'Age',
            dataIndex:'age'
        },
        {
            text:'Name',
            dataIndex:'name',
            renderer: myAutoSizeRender
        },
        {
            text:'Eye Color',
            dataIndex:'eyeColor'
        }]
    }]

});

Ext.application({
    name: 'Test',
    mainView: 'Fiddle.view.Main',
});

Answer 2

Autosizing 9 columns on a grid can be done by adding flex: 1 to all of them. This will make every grid have an even width to all the columns. If you want some columns to show more than others, you can change the flex value to a higher number like 2 or 3. If you don't want the ellipses to show when the text is overflowing and you want to see the full text, you can add a class to the grid and set .x-gridcell-body-el to not has a white-space.

Here is a Sencha Fiddle that can help you see how flex works.

https://fiddle.sencha.com/#view/editor&fiddle/2rro

Answer 3

Use flex for this, you may combine it with width:

flex: <number>

When using flex, the total pixel with of the grid minus the sum of any defined column widths is divided by the sum of all flex numbers. This number is then multiplied with the flex number of each column using flex.

That is rathet har to grasp, so an example:

xtype: 'gridpanel',
width: 500,
columns: [{
    dataindex: 'id',
    width: 125
},{
    dataindex: 'username',
    width: 75
},{
    dataindex: 'lastname',
    flex: 1
},{
    dataindex: 'firstname',
    flex: 2
}]

Here the total grid width is 500. The sum of the defined width of two first two columns is 200 pixels, leaving 300 pixels for the renaming ones. The sum of the flex values is 3 (1+2) so: 300 / 3 = 100. So the third column will be (flex) 1 * 100 = 100 pixels wide while the last one will be (flex) 2 * 100 = 200 pixels.

If the size of the grid grows to, let's say, 800 pixels, the respective widths for the latter two will be 200 and 400 pixels.