当我使用 rest json 时,ExtJS6 网格显示为空
ExtJS6 grid shows empty when i use rest json
使用 ExtJS 6.20 CE,经典。
我的网格显示为空。
我尝试使用硬编码的数据存储并且运行良好,但是当我尝试从 REST url.
中获取 JSON 中的数据时无法正常工作
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);
从http://localhost:8083/restexample/rest/Items方向收到的数据是:
{"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"}
我做错了什么?
提前致谢。
您的 store
似乎根本没有加载,请尝试将您的 cargaInicial()
编辑为如下内容:
function cargaInicial() {
crearGrid();
cargarVentana();
dataStore.load(); //load your store
}
或者使用配置 autoLoad:true
设置商店,例如:
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'
}
},
});
使用 ExtJS 6.20 CE,经典。
我的网格显示为空。
我尝试使用硬编码的数据存储并且运行良好,但是当我尝试从 REST url.
中获取 JSON 中的数据时无法正常工作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);
从http://localhost:8083/restexample/rest/Items方向收到的数据是:
{"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"}
我做错了什么?
提前致谢。
您的 store
似乎根本没有加载,请尝试将您的 cargaInicial()
编辑为如下内容:
function cargaInicial() {
crearGrid();
cargarVentana();
dataStore.load(); //load your store
}
或者使用配置 autoLoad:true
设置商店,例如:
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'
}
},
});