Sencha split and collapsible sample

split이 작동하려면, 'border' layout을 사용해야 함

Ext.define('Test.view.SplitCollapsibleGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'splitcollapsiblegrid',
    title: 'Split and Collapsible Grid',
    split: true, // Allows resizing
    collapsible: true, // Allows collapsing
    store: {
        xtype: 'store',
        fields: ['name', 'email', 'phone'],
        data: [
            { name: 'Alice', email: 'alice@example.com', phone: '555-111-1111' },
            { name: 'Bob', email: 'bob@example.com', phone: '555-222-2222' },
            { name: 'Charlie', email: 'charlie@example.com', phone: '555-333-3333' },
        ]
    },
    columns: [
        { text: 'Name', dataIndex: 'name', flex: 1, align: 'center' },
        { text: 'Email', dataIndex: 'email', flex: 1, align: 'center' },
        { text: 'Phone', dataIndex: 'phone', flex: 1, align: 'center' }
    ],
    plugins: {
        cellediting: {
            clicksToEdit: 1
        }
    },
    selModel: {
        type: 'checkboxmodel',
        headerCheckbox: true
    },
    listeners: {
        afterrender: function(grid) {
            grid.columns.forEach((column) => {
                if (column.dataIndex === 'email') {
                    column.setMenuDisabled(true);
                }
            });
        }
    }
});