Sencha Grid 샘플

const store = Ext.create('Ext.data.Store', {
    storeId: 'store', // Unique ID for the store
    fields: ['id', 'name', 'data'], // Define fields
    data: [ // Sample data
        { id: 1, name: 'A', data: '' },
        { id: 2, name: 'B', data: '' },
        { id: 3, name: 'C', data: '' },
        { id: 3, name: 'D', data: '' },
    ],
    proxy: {
        type: 'memory', // Use memory proxy for local data
        reader: {
            type: 'json',
            rootProperty: 'data'
        }
    },
    autoLoad: true // Automatically load data from the server on initialization    
});
Ext.define('Home.view.data.Data', {
    extend: 'Ext.form.Panel',
    xtype: 'Data',
    closable: true,
    layout: 'fit',
    items: [
        {
            xtype: 'grid', // Grid inside the panel
            title: '데이터',
            store: store,//Ext.data.StoreManager.lookup('store'),
            plugins: {
                ptype: 'cellediting',
                clicksToEdit: 1,
            },
            columns: [
                { 
                	text: 'ID', dataIndex: 'id', width: 50, 
                },
                { 
                	text: '이름', dataIndex: 'name', flex: 1,
                    editor: {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                },
                { text: '데이터', dataIndex: 'location', flex: 1,
                    editor: {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                },
            ],
            tbar: {
                xtype: 'toolbar',
                layout: {
                    type: 'hbox',
                    pack: 'end' // Align items to the left
                },
                items: [
                    {
                        text: '추가',
                        handler: function () {
                            let store = Ext.data.StoreManager.lookup('store');
                            store.add({ id: store.getCount() + 1, name: 'New User', data: '' });
                        }
                    },
                    {
                        text: '삭제',
                        handler: function () {
                            let grid = Ext.ComponentQuery.query('grid')[0];
                            
                            let selected = grid.getSelectionModel().getSelection();
                            if (selected.length) {
                                grid.getStore().remove(selected);
                            } else {
                                Ext.Msg.alert('Error', 'No user selected for removal.');
                            }
                        }
                    },
                    {
                        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.');
                            }
                        }
                    },
				]
            },
            bbar: {
                xtype: 'pagingtoolbar',
                store: store,
                displayInfo: true
            },
            selModel: {
                type: 'cellmodel'
            },
        }
	]
});