Grid group Header(colspan) Flex 문제

Grid에서 Group header(colspan)을 사용하게 되면 한가지 문제점이 발생한다.

{
Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone', 'type'],
            data: {
                'items': [
                    {
                        'name': 'Lisa',
                        "email": "lisa@simpsons.com",
                        "phone": "555-111-1224",
                        "type": "Child"
                    },
                    {
                        'name': 'Bart',
                        "email": "bart@simpsons.com",
                        "phone": "555-222-1234",
                        "type": "Child"
                    },
                    {
                        'name': 'Homer',
                        "email": "home@simpsons.com",
                        "phone": "555-222-1244",
                        "type": "Adult"

                    },
                    {
                        'name': 'Marge',
                        "email": "marge@simpsons.com",
                        "phone": "555-222-1254",
                        "type": "Adult"
                    },
                ]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            },
            groupField: 'type'
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [
                {
                    text: 'Name',
                    dataIndex: 'name',
                    flex: 1
                },
                {
                    text: 'group',
                    columns: [
                        {
                            text: 'Email',
                            dataIndex: 'email',
                            flex: 1
                        },
                        {
                            text: 'Phone',
                            dataIndex: 'phone',
                            flex: 1
                        }
                    ]
                },
                {
                    text: 'Type',
                    dataIndex: 'type',
                    flex: 1
                }
            ],
            height: 300,
            width: '100%',
            renderTo: Ext.getBody()
        });
    }
});

group으로 묶인 column에는 flex를 사용하게 되면 위 화면처럼 넓이가 제대로 계산이 안된다.

이 문제에 대해서 오래전부터 이슈가 나온것으로 아는데 Sencha에서는 고칠 생각이 없는건지 뭔지.

group header에 대해서 전체 칼럼이 동일한 넓이도 하고 싶을때는 Grid의 Resize이벤트에서 각 칼럼들의 넓이를 강제적으로 지정해주는 수 밖에 없다.

{
Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone', 'type'],
            data: {
                'items': [
                    {
                        'name': 'Lisa',
                        "email": "lisa@simpsons.com",
                        "phone": "555-111-1224",
                        "type": "Child"
                    },
                    {
                        'name': 'Bart',
                        "email": "bart@simpsons.com",
                        "phone": "555-222-1234",
                        "type": "Child"
                    },
                    {
                        'name': 'Homer',
                        "email": "home@simpsons.com",
                        "phone": "555-222-1244",
                        "type": "Adult"

                    },
                    {
                        'name': 'Marge',
                        "email": "marge@simpsons.com",
                        "phone": "555-222-1254",
                        "type": "Adult"
                    },
                ]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            },
            groupField: 'type'
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [
                {
                    text: 'Name',
                    dataIndex: 'name',
                    autoSizeColumn: true
                },
                {
                    text: 'group',
                    columns: [
                        {
                            text: 'Email',
                            dataIndex: 'email',
                            autoSizeColumn: true
                        },
                        {
                            text: 'Phone',
                            dataIndex: 'phone',
                            autoSizeColumn: true
                        }
                    ]
                },
                {
                    text: 'Type',
                    dataIndex: 'type',
                    autoSizeColumn: true
                }
            ],
            height: 300,
            width: '100%',
            renderTo: Ext.getBody(),
            listeners: {
                resize: function(grid, width, height) {
                    var columns = grid.columns;
                    var length = columns.length
                    var columnWidth = width / length;

                    for (var i = 0; i < length; i++) {
                        if (columns[i].autoSizeColumn) {
                            columns[i].setWidth(columnWidth);
                        }
                    }
                }
            }
        });
    }
});

autoSizeColumn이라는 임의의 속성을 정의하고 이 속성이 true인 칼럼에 대해서 

전체넓이 / 칼럼 수 = 한 칼럼의 넓이

위 수식처럼 그리드 넓이를 칼럼으로 나눠서 그 값을 강제적으로 setWidth() 메소드를 사용해서 지정해야 한다.

그러면 전체 칼럼의 넓이가 동일하게 변경이 된다.