Search code examples
ajaxextjscomboboxextjs6.2

Ext JS: Elements in Combo are not visible, but loaded


Ext JS 6.2.x is used. A combo is created. It uses ajax proxy request:

Request .../rest/maps/tree?_dc=1519213286176&page=1&start=0&limit=25
Request Method:GET
Status Code:200 OK
Accept:*/*
Accept-Encoding:gzip, deflate, br

Response headers:

Cache-Control:no-cache, no-store, must-revalidate
Connection:keep-alive
Content-Type:application/json

In response body a set of years is returned:

["2015","2017","2018","2019","2016","2020"]

Here is a code:

Ext.define('MapsYears', {
    // extend: 'Ext.data.ArrayStore',
    extend: 'Ext.data.Store',
    alias: 'store.maps-years',
    autoLoad: true,
    fields: ['year'],
    proxy: {
        type: 'ajax',
        url: 'rest/maps/tree'
    }
});

Ext.define('Main.panel.SnapshotNow', {
    xtype: 'snapshotNow',
    extend: 'Ext.panel.Panel',
    requires: [
    ],
    items: [{
        id: 'SnapshotNow',
        xtype: "combobox",
        store: {
            type: 'maps-years'
        },
        displayField: 'year',
        valueField: 'year'
    }]
});

Items are loaded, I can even click on the combo, and the item appears as a chosen, but a list of items is not visible:

combo with not visible elements

What do I miss?

UPDATE: In a response, it is not actually a json-format. I can fix this issue by changing rest service and returning a correct json. The question is, is there a way to tell ExtJS to process correctly list of elements in the original example, that looks like:

 ["2015","2017","2018","2019","2016","2020"]

Solution

  • This should fix your data structure

    Ext.define('MapsYears', {
        extend: 'Ext.data.Store',
        alias: 'store.maps-years',
        autoLoad: true,
        fields: ['year'],
        proxy: {
            type: 'ajax',
            url: 'rest/maps/tree',
            reader: {
                type: 'json',
                transform: data => data.map(year => ({year}))
            }
        }
    });