Sencha Grid 선택된 row 색깔 바꾸기

inline style 사용

javascript

{
    xtype: 'grid',
    itemId: 'grid',
    title: '정보',
    height: 300,
    flex: 1,
    scrollable: true,
    store: Ext.data.StoreManager.lookup('store'),
    columns: [
        { text: '샘플1', dataIndex: 'DATA1', flex: 1 },
        { text: '샘플2', dataIndex: 'DATA2', flex: 1 },
    ],
    selModel: {
        mode: 'SINGLE', // Single-row selection mode
        selectedItemCls: 'selected-row-style' // Use a custom inline style
    }
}

html

<style>
    .selected-row-style {
        background-color: #ffcccb !important; /* Light red background for the selected row */
        color: #000000 !important; /* Black text for the selected row */
    }
</style>

style을 직접 적용

{
    xtype: 'grid',
    itemId: 'grid',
    title: '정보',
    height: 300,
    flex: 1,
    scrollable: true,
    store: Ext.data.StoreManager.lookup('store'),
    columns: [
        { text: '샘플1', dataIndex: 'DATA1', flex: 1 },
        { text: '샘플2', dataIndex: 'DATA2', flex: 1 },
    ],
    selModel: {
        mode: 'SINGLE', // Single-row selection mode
        selectedItemCls: 'selected-row-style' // Use a custom inline style
    },
    listeners: {
        selectionchange: function (selModel, selectedRecords) {
            // Reset previously styled rows
            let gridView = selModel.view;
            gridView.getNodes().forEach(node => {
                Ext.fly(node).setStyle({
                    backgroundColor: '',
                    color: ''
                });
            });

            // Apply new style to the selected row
            if (selectedRecords.length > 0) {
                let selectedNode = gridView.getNode(selectedRecords[0]);
                Ext.fly(selectedNode).setStyle({
                    backgroundColor: '#ffcccb', // Light red background
                    color: '#000000'          // Black text
                });
            }
        }
    }    
}