我是 Extjs 的新手,对 Javascript 及其相关库不是很熟悉。现在我想做的是:
向远程服务器发送 GET 请求,例如 GET http://remote-restful-server.com/find/ {id}。
服务器会返回一个JSON格式的数据。数据是这样的:
[{ id: 1, level01: "Food", level02: null, level03: null, code: "XXXX", link: ABC1 }, { id: 2, level01: "Food", level02: "Fruit", level03: null, code: "XXXX", link: ABC1 }, ..., ...]
我想在 extjs 中显示这些数据。但是我在这样做的时候遇到了一些问题:
1) {id} 是从该页面的 url 获取的第 1 步。 Extjs如何获取url中的参数?
2) 如何向 restful web 服务发出 GET 请求并获取返回的 JSON 数据?
3)Extjs中如何通过一个grid组件显示所有数据? JSON数组中所有元素的字段都是固定的。
4) 我希望网格中的某些列包含链接。如何做到这一点?
5)如何在显示之前对几个特定字段进行一些更改?
我试图在数组网格上显示 json 数据。但是我失败了。看来我无法成功加载json数据。代码是:
Ext.onReady(function() {
// Define a product model
Ext.define('Product', {
extend: 'Ext.data.Model',
fields: [
{name: 'product_id', type: 'int'},
'large_class_code',
'medium_class_code',
'small_class_code',
'product_code',
'large_class_name',
'medium_class_name',
'small_class_name',
'product_name',
'current_level',
'current_code',
'current_name',
'parent_id',
'parent_name',
'has_standards'
]
});
// create the data store
var store = Ext.create('Ext.data.Store', {
model: 'Product',
proxy: {
type: 'ajax',
url : 'http://xxx.xxx.xx.xxx:8080/product/all/',
reader: {
type: 'json'
}
}
});
store.load();
//console.log(store);
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{id:'id',header: 'ID', width: 30, sortable: true, dataIndex: 'product_id'},
{header: 'large_class_code', width: 100, sortable: true, dataIndex: 'large_class_code'},
{header: 'medium_class_code', width: 100, sortable: true, dataIndex: 'medium_class_code'},
{header: 'small_class_code', width: 100, sortable: true, dataIndex: 'small_class_code'},
{header: 'product_code', width: 100, sortable: true, dataIndex: 'product_code'},
{header: 'large_class_name', width: 100, sortable: true, dataIndex: 'large_class_name'},
{header: 'medium_class_name', width: 100, sortable: true, dataIndex: 'medium_class_name'},
{header: 'product_name', width: 100, sortable: true, dataIndex: 'product_name'},
{header: 'current_level', width: 100, sortable: true, dataIndex: 'current_level'},
{header: 'current_code', width: 100, sortable: true, dataIndex: 'current_code'},
{header: 'current_name', width: 100, sortable: true, dataIndex: 'current_name'},
{header: 'parent_id', width: 100, sortable: true, dataIndex: 'parent_id'},
{header: 'parent_name', width: 100, sortable: true, dataIndex: 'parent_name'},
{header: 'has_standards', width: 100, sortable: true, dataIndex: 'has_standards'}
],
stripeRows: true,
height:600,
width:2000,
renderTo: 'grid-example',
title:'test list'
});
});
可以显示网格,但上面没有任何数据。我在 chrome 中检查控制台:
我得到了:
选项 http://xxx.xxx.xx.xxx:8080/product/all/?_dc=1384145304301&page=1&start=0&limit=25产地http://xxx.xxx.xx.xxx Access-Control-Allow-Origin 不允许。
和
XMLHttpRequest 无法加载 http://xxx.xxx.xx.xxx:8080/product/all/?_dc=1384145304301&page=1&start=0&limit=25 .产地http://xxx.xxx.xx.xxx Access-Control-Allow-Origin 不允许。
最佳答案
对于第 1 点和第 2 点,您可以阅读:Detailed documentation for ExtJS REST request / response handling?
对于第 3 点:如果您正在使用 ExtJs4(并且您应该),则网格将绑定(bind)到商店,这就是您通过网格显示信息的方式 http://docs.sencha.com/extjs/4.2.2/#!/guide/application_architecture
对于第 4 点和第 5 点,您可以在网格列上使用“渲染器”配置。
最好的问候。
关于javascript - 如何在 Extjs 中使用网格显示 JSON 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19896283/