ExtJS Modern - 自动调整网格列答案

【问题标题】：ExtJS Modern - autosize grid columnsExtJS Modern - 自动调整网格列
【发布时间】：2019-04-27 12:58:02
【问题描述】：

我有一个现代 ExtJS 6.2.0 应用程序。有一个 9 列的网格。

有没有办法自动调整列的大小以使其足够宽以显示完整的单元格内容？或者，当涉及到具有大量列的移动网格时，最佳做法是什么？

【问题讨论】：

标签： extjs

【解决方案1】：

现代工具包没有列 autoSize 功能。这是一种使用渲染函数和 HTML5 画布的方法，它并不理想，但它可以工作

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',
});

【讨论】：

【解决方案2】：

为此使用 flex，你可以将它与宽度结合起来：

flex: <number>

当使用 flex 时，网格的总像素减去任何定义的列宽的总和除以所有 flex 数的总和。然后使用 flex 将此数字乘以每列的 flex 编号。

这很难掌握，举个例子：

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

这里的总网格宽度为 500。定义的前两列宽度之和为 200 像素，剩下 300 像素用于重命名。弹性值的总和为 3 (1+2)，因此：300 / 3 = 100。所以第三列将是 (flex) 1 * 100 = 100 像素宽，而最后一个将是 (flex) 2 * 100 = 200 像素。

如果网格的大小增长到 800 像素，后两者的宽度分别为 200 和 400 像素。

【讨论】：

【解决方案3】：

可以通过将flex: 1 添加到所有列来自动调整网格上的 9 列。这将使每个网格对所有列都有均匀的宽度。如果您希望某些列比其他列显示更多，您可以将 flex 值更改为更大的数字，例如 2 或 3。如果您不希望在文本溢出时显示省略号并且想要查看全文，您可以在网格中添加一个类并将.x-gridcell-body-el 设置为没有空格。

这是一个 Sencha Fiddle，可以帮助您了解 flex 的工作原理。

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

【讨论】：