EXTJS-6.2.0示例-grid合并表头后列宽自适应

extjs表格合并表头之后，列宽度的自适应

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>grid合并表头后列宽自适应</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/extjs/6.2.0/classic/theme-crisp/resources/theme-crisp-all.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/extjs/6.2.0/ext-all.js"></script>
    <script src="https://cdn.bootcss.com/extjs/6.2.0/classic/theme-crisp/theme-crisp.js"></script>
    <style>
        /**
                 *grid row 悬停颜色
                 */

        tr.x-grid-row.x-grid-row-over td {
            background-color: #8CBF26;
        }

        /**
                 *grid row 选择颜色
                 */

        .x-grid-row-selected .x-grid-cell-inner {
            font-weight: bold;
            background-color: red;
        }
    </style>
</head>

<body>
<script>
    Ext.onReady(function () {

        var store = 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"
                }, {
                    '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"
                }, {
                    '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"
                }, {
                    '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"
                }, {
                    '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"
                }, {
                    '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"
                }, {
                    '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"
                }, {
                    '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'
                }
            }
        });
        var grid = Ext.create('Ext.grid.Panel', {
            title: "这个婊会自适应...",
            resizable: true,
            columns: [{
                text: 'fullname',
                columns: [{
                    text: 'Name',
                    dataIndex: 'name',
                    flex: 0.25
                }, {
                    text: 'Email',
                    dataIndex: 'email',
                    flex: 0.25
                }]

            }, {
                text: 'other',


                columns: [{
                    text: 'Phone',
                    dataIndex: 'phone',
                    flex: 0.5
                }]
            }],
            store: store,
            listeners: {
                afterrender: function (width, height, oldWidth, oldHeight, eOpts) {
                    getWidthByPercent();

                }
            }
        });

        function getWidthByPercent(percent) {
            var columns = grid.columns;
            for (var a in columns) {
                flex = columns[a].flex;
                width = grid.getWidth() * flex;
                columns[a].setWidth(width);
            }

        }

        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [grid],
            listeners: {
                resize: function (width, height, oldWidth, oldHeight, eOpts) {

                    getWidthByPercent();
                },
                afterrender: function () {


                }
            }
        });

    });
</script>
</body>

</html>
EXTJS-6.2.0示例-grid合并表头后列宽自适应

差点笨死

引用和评论

基于iview-admin实现动态路由

100个React最佳实践小技巧

前端如何入门 Go 语言

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具
