Sencha Grid store에 변경사항 확인 및 저장하기

Ext.onReady(function () {
    // Sample data
    const initialData = [
        { id: 1, name: 'John Doe', email: 'john.doe@example.com', age: 30 },
        { id: 2, name: 'Jane Smith', email: 'jane.smith@example.com', age: 25 },
        { id: 3, name: 'Mike Johnson', email: 'mike.johnson@example.com', age: 35 }
    ];

    // Define the data store
    const store = Ext.create('Ext.data.Store', {
        fields: ['id', 'name', 'email', 'age'],
        data: initialData, // Initialize with sample data
        autoSync: false // Prevent automatic syncing
    });

    // Define the grid
    const grid = Ext.create('Ext.grid.Panel', {
        title: 'Editable Grid Example',
        store: store,
        plugins: {
            ptype: 'cellediting', // Use cellediting plugin
            clicksToEdit: 1 // Single click to edit
        },
        columns: [
            {
                text: 'ID',
                dataIndex: 'id',
                flex: 1,
                hidden: true // Hide the ID column
            },
            {
                text: 'Name',
                dataIndex: 'name',
                flex: 1,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false // Validation: disallow blank values
                }
            },
            {
                text: 'Email',
                dataIndex: 'email',
                flex: 1,
                editor: {
                    xtype: 'textfield',
                    vtype: 'email' // Validate as an email
                }
            },
            {
                text: 'Age',
                dataIndex: 'age',
                flex: 1,
                editor: {
                    xtype: 'numberfield',
                    minValue: 0, // Minimum value
                    maxValue: 120 // Maximum value
                }
            }
        ],
        selModel: {
            type: 'cellmodel' // Enable cell selection
        },
        height: 300,
        width: 600,
        renderTo: Ext.getBody(),
        tbar: [
            {
                text: 'Save Changes',
                handler: function () {
                    // Get all modified records
                    const modifiedRecords = store.getModifiedRecords();
                    
                    if (modifiedRecords.length > 0) {
                        const changes = modifiedRecords.map(record => record.getData());
                        
                        // Commit changes to the store
                        modifiedRecords.forEach(record => record.commit());
                        
                        // Log or process the changes
                        console.log('Modified Records:', changes);
                        alert(`Saved ${changes.length} records:\n${JSON.stringify(changes, null, 4)}`);
                    } else {
                        alert('No changes to save.');
                    }
                }
            },
            {
                text: 'Log All Data',
                handler: function () {
                    // Log all store data to the console
                    const allData = store.getRange().map(record => record.getData());
                    console.log('All Store Data:', allData);
                }
            }
        ]
    });
});