Sencha grid 특정 컬럼만 commit해야 하는 경우

2024. 12. 28. 22:14Javascript/Sencha

selection.commit(false, ['age']);처럼 원하는 컬러만 commit 처리함

Ext.create('Ext.grid.Panel', {
    title: 'Editable Grid Example',
    renderTo: Ext.getBody(),
    width: 600,
    height: 400,

    store: {
        fields: ['id', 'name', 'age'],
        data: [
            { id: 1, name: 'John Doe', age: 30 },
            { id: 2, name: 'Jane Doe', age: 25 }
        ]
    },

    columns: [
        { text: 'ID', dataIndex: 'id', width: 50 },
        { text: 'Name', dataIndex: 'name', flex: 1, editor: 'textfield' },
        { text: 'Age', dataIndex: 'age', width: 100, editor: 'numberfield' }
    ],

    plugins: {
        ptype: 'rowediting', // Enable row editing
        clicksToEdit: 1
    },

    tbar: [
        {
            text: 'Update Age',
            handler: function() {
                const grid = this.up('grid');
                const selection = grid.getSelectionModel().getSelection()[0]; // Get selected row

                if (selection) {
                    // Update only the 'age' column value
                    selection.set('age', 35); // Change age to 35

                    // Commit the change for the 'age' column
                    selection.commit(false, ['age']); // Commit only the 'age' field
                } else {
                    Ext.Msg.alert('Error', 'No row selected!');
                }
            }
        }
    ]
});