Sencha combobox 로딩시, 서버에서 값 가져오기

2024. 12. 24. 21:58Javascript/Sencha

afterrender 이벤트 사용

Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Select Item',
    queryMode: 'local',
    displayField: 'name',
    valueField: 'id',
    renderTo: Ext.getBody(),
    store: {
        fields: ['id', 'name'] // Define fields for the store
    },
    listeners: {
        afterrender: function(combo) { // Trigger when ComboBox is rendered
            Ext.Ajax.request({
                url: '/data/items', // Replace with your endpoint
                method: 'POST', // Use POST method
                headers: {
                    'Authorization': 'Bearer YOUR_TOKEN', // Optional headers
                    'Content-Type': 'application/json'
                },
                jsonData: { // Optional payload for POST
                    key: 'value'
                },
                success: function(response) {
                    var data = Ext.decode(response.responseText);
                    var items = data.items || []; // Extract items
                    combo.getStore().loadData(items); // Load data into the store
                },
                failure: function(response) {
                    console.error('Failed to load data:', response.statusText);
                }
            });
        }
    }
});