Sencha Grid store 업데이트 하기

2024. 11. 27. 22:06Javascript/Sencha

설정한 값으로 업데이트

// New data to update the store
let newData = [
    { DATA1: 'A', DATA5: 80, DATA7: 60 },
    { DATA1: 'B', DATA5: 70, DATA7: 50 },
];

// Access the store of the grid
let grid = Ext.ComponentQuery.query('#grid')[0]; // Use itemId to get the grid
let store = grid.getStore(); 

// Update the store with new data
store.loadData(newData);

store를 새로 교체

// Create a new store
let newStore = Ext.create('Ext.data.Store', {
    fields: ['DATA1', 'DATA2', 'DATA3', 'DATA8', 'DATA5', 'DATA7'],
    data: [
        { DATA8: 'PoolX', DATA5: 50, DATA7: 40 },
        { DATA8: 'PoolY', DATA5: 60, DATA7: 50 },
    ]
});

// Replace the store in the grid
let grid = Ext.ComponentQuery.query('#grid')[0];
grid.setStore(newStore);

서버의 값으로 업데이트

let grid = Ext.ComponentQuery.query('#grid')[0]; // Get the grid by itemId
let store = grid.getStore();

// Load new data from the server
store.load({
    params: {
        searchKey: 'someValue' // Pass parameters to the server if needed
    },
    callback: function(records, operation, success) {
        if (success) {
            console.log('Data loaded successfully!');
        } else {
            console.error('Failed to load data.');
        }
    }
});

VieweModel을 Store에 바인드

let grid = Ext.ComponentQuery.query('#grid')[0];
let viewModel = grid.getViewModel();

// Update the store in the viewModel
viewModel.set('store', {
    fields: ['DATA1', 'DATA5', 'DATA7'],
    data: [
        { DATA1: 'M', DATA5: 100, DATA7: 80 },
        { DATA1: 'N', DATA5: 110, DATA7: 90 },
    ]
});

'Javascript > Sencha' 카테고리의 다른 글

Sencha Chart 마우스 오버 처리  (0) 2024.11.27
Sencha Grid 자동 바인딩  (0) 2024.11.27
Sencha Grid 선택된 row 색깔 바꾸기  (0) 2024.11.27
Sencha Grid scroll 추가  (0) 2024.11.26
Sencha Grid 405에러 415에러 처리  (0) 2024.11.26