Sencha checkcolumn 체크 및 이벤트

text:''가 있어서 header의 라인이 2줄로 안보임

Ext.application({
    name: 'CheckboxHeaderGrid',
    launch: function () {
        Ext.create('Ext.grid.Panel', {
            renderTo: Ext.getBody(),
            width: 600,
            height: 400,
            title: 'Checkbox Header Grid Example',
            store: {
                fields: ['name', 'email', 'phone'],
                data: [
                    { name: 'John Doe', email: 'johndoe@example.com', phone: '555-111-1224' },
                    { name: 'Jane Smith', email: 'janesmith@example.com', phone: '555-222-1234' },
                    { name: 'Sam Johnson', email: 'samjohnson@example.com', phone: '555-333-1244' }
                ]
            },
            columns: [
                {
                    xtype: 'checkcolumn',
                    text: '',
                    dataIndex: 'selected',
                    headerCheckbox: true,
                    width: 50, // Explicit width to ensure alignment
                    listeners: {
                        headercheckchange: function (checkColumn, isChecked) {
                            const store = checkColumn.getView().getStore();
                            store.each(record => record.set('selected', isChecked));
                        }
                    }
                },
                { text: 'Name', dataIndex: 'name', flex: 1 },
                { text: 'Email', dataIndex: 'email', flex: 1 },
                { text: 'Phone', dataIndex: 'phone', flex: 1 }
            ]
        });
    }
});