Sencha Grid 자동 바인딩

Store 자동으로 로딩되도록 설정

Ext.create('Ext.data.Store', {
    storeId: 'store', // Assign an ID for easy reference
    fields: ['DATA1','DATA5','DATA7'], // Define fields
    proxy: {
        type: 'ajax', // Use Ajax to fetch data
        actionMethods: {
            read: 'POST' // Specify that the "read" operation (load) should use POST
        },
        headers: {
            'Content-Type': 'application/json; charset=utf-8' // Set the Content-Type header
        },
        url: '/Sample/getList.do', // Server endpoint to fetch data
        reader: {
            type: 'json', // Data format returned by the server
            rootProperty: 'result' // Root property containing data array
        }
    },
    autoLoad: true // Automatically load data when the store is created
});

Grid에 store 바인딩

{
    xtype: 'grid',
    itemId: 'grid',
    title: '정보',
    height: 300,
    flex: 1,
    scrollable: true, // Enable scrolling
    store: Ext.data.StoreManager.lookup('store'),
    columns: [
        { text: '컬럼1', dataIndex: 'DATA1', flex: 1 },
        { text: '컬럼2', dataIndex: 'DATA2', flex: 1 },
        { text: '컬럼3', dataIndex: 'DATA3', flex: 1, align: 'right' },
    ],
    listeners: {
        itemclick: 'onClick_grid',
    }
},

Store reload

let store = Ext.data.StoreManager.lookup('store'); // Get the store

// Reload the store
store.load({
    params: {
        key: 'value' // Optional parameters to send with the request
    },
    callback: function (records, operation, success) {
        if (success) {
            console.log('Store updated successfully!');
        } else {
            console.error('Failed to update the store.');
        }
    }
});