EXTJS-6.2.0示例-grid合併表頭後列寬自適應

時間 2019-12-21
標籤 extjs 6.2.0 示例 grid 合併表頭列寬自適應欄目 CSS 简体版
原文原文鏈接
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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。