ExtJS6 grid shows empty when i use rest json

Question

Using ExtJS 6.20 CE, classic.

My grid shows empty.

I tried to use a datastore hardcoded and works nice, but is not working when I try to get data in JSON from the REST url.

var dataStore; //Datos de tabla
var grid; // objeto de tabla

function cargaInicial() {
    crearGrid();
    cargarVentana();
}

function cargarVentana() {
    var win  = new Ext.create('Ext.Window', {
        id : 'ventanaTarificador',
        title : 'Tarificador',
        layout : 'fit',
        maximized: true,
        closable: false,
        resizable:true,
        items:[grid]
    }); 
    win.show();
}

function crearGrid() {
    Ext.define('lineaTarificador', {
    extend: 'Ext.data.Model',
    fields: ['pais', 'tomador', 'asegurado', 'divisa','a','b','c','d','e','f','g','h','i','j']
    });

    dataStore = Ext.create('Ext.data.Store', {
    storeId: 'tarifStore',
    Model: 'lineaTarificador',
    fields:[ 'pais', 'tomador', 'asegurado', 'divisa','a','b','c','d','e','f','g','h','i','j'],
    groupField: 'pais',
        proxy: {
        type: 'rest',
        url: 'rest/Items',
            reader: {
                dataType: 'json',
                rootProperty: 'data'
            }
        }
    });

    grid = Ext.create('Ext.grid.Panel', {   
    title: 'tarificadorGrid',
    id: 'tarificadorGrid',
    store: dataStore,
    columns: [
        { text: 'Pais', dataIndex: 'pais', locked: true, width:80},
        { text: 'Tomador', dataIndex: 'tomador', locked: true, autoSizeColumn: true, width:200 },
        { text: 'Actividad', dataIndex: 'tomador', align: 'center', locked: true, width:40},
        { text: 'Divisa', dataIndex: 'divisa' , locked: true, width:45},
        { text: 'Asegurado', dataIndex: 'asegurado', locked: true, width:100},
        { text: 'Columna A', dataIndex: 'a', summaryType: 'sum' , width:150},
        { text: 'Columna B', dataIndex: 'b', summaryType: 'sum' , width:150},
        { text: 'Columna C', dataIndex: 'c', summaryType: 'sum' , width:150},
        { text: 'Columna D', dataIndex: 'd', summaryType: 'sum' , width:150},
        { text: 'Columna E', dataIndex: 'e', summaryType: 'sum' , width:150},
        { text: 'Columna F', dataIndex: 'f', summaryType: 'sum', width:150},
        { text: 'Columna G', dataIndex: 'g', summaryType: 'sum', width:150},
        { text: 'Columna H', dataIndex: 'h', summaryType: 'sum',width:150},
        { text: 'Columna I', dataIndex: 'i', summaryType: 'sum', width:150},
        { text: 'Columna J', dataIndex: 'j', summaryType: 'sum', width:150}
    ],
    layout: 'fit',
    features: [{ftype:'groupingsummary'}],
    });
}
Ext.onReady(cargaInicial);

The data received from the direction http://localhost:8083/restexample/rest/Items is:

{"pais":"Alemania","tomador":"Terra","asegurado":"Telefonica","divisa":"USD","a":" 10000.2","b":"10000.2","c":"10000.2","d":"10000.2","e":"10000.2","f":"10000.2","g":"10000.2","h":"10000.2","i":"10000.2","j":"10000.2"}

What I am doing wrong?

Thanks in advance.

Answer 1

It seems that your store isn't being loaded at all, try to edit your cargaInicial() to something like this :

function cargaInicial() {
            crearGrid();
            cargarVentana();
            dataStore.load(); //load your store
}

Or set the store with the config autoLoad:true like:

dataStore = Ext.create('Ext.data.Store', {
    storeId: 'tarifStore',
    Model: 'lineaTarificador',
    fields: ['pais', 'tomador', 'asegurado', 'divisa', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
    groupField: 'pais',
    autoLoad:true,
    proxy: {
        type: 'ajax',
        url: 'https://api.myjson.com/bins/8k1at',
        reader: {
            dataType: 'json',
            rootProperty: 'data'
        }
    },
});