1

我是 Extjs 的新手，对 Javascript 及其相关库不太熟悉。现在我想做的是：

  1. 向远程服务器发送 GET 请求，例如 GET http://remote-restful-server.com/find/ {id}。

  2. 服务器将返回 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  
},
..., ...]

  3. 我想在 extjs 中显示这些数据。但是当我这样做时我遇到了一些问题：

1) {id} 是第 1 步是从这个页面的 url 得到的。如何使用 Extjs 获取 url 中的参数？

2）如何向restful web服务发出GET请求并获取返回的JSON数据？

3) Extjs中如何通过一个网格组件显示所有数据？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不允许访问控制允许-起源。

和

XMLHttpRequest 无法加载http://xxx.xxx.xx.xxx:8080/product/all/?_dc=1384145304301&page=1&start=0&limit=25。Access-Control-Allow-Origin 不允许来源http://xxx.xxx.xx.xxx 。

4

1 回答 1

2

对于第 1 点和第 2 点，您可以阅读：ExtJS REST 请求/响应处理的详细文档？

对于第 3 点：如果您使用 ExtJs4（并且您应该），则网格将绑定到商店，这就是您通过网格显示信息的方式http://docs.sencha.com/extjs/4.2.2/#!/guide/application_architecture

对于第 4 点和第 5 点，您可以在网格列上使用“渲染器”配置。

此致。

于 2013-11-11T00:42:45.317 回答