How to display JSON data using grid in Extjs

Question

I am new to Extjs and not very familar with Javascript and its related libraries. Now what I want to do is :

Send a GET request to a remote server, like GET http://remote-restful-server.com/find/{id}.

The server would return a data with JSON format. The data is like :

[{
    id: 1,
    level01: "Food",
    level02: null,
    level03: null,
    code: "XXXX",
    link: ABC1  
},
{
    id: 2,
    level01: "Food",
    level02: "Fruit",
    level03: null,
    code: "XXXX",
    link: ABC1  
},
..., ...]

I want to display these data in a grip in extjs. But I have some problems when I was doing that:

1) the {id} is step 1 is got from the url of this page. How to get a parameter in the url by using Extjs?

2) How to make a GET request to a restful web service and get the JSON data returned?

3) How to display all the data through a grid component in Extjs? The fields of all the elements in the JSON array are fixed.

4) I want some columns in the grid to contain links. How to do this?

5) How to do some changes on a few specific fields before they are displayed?

I tried to display the json data on an array grid. But I failed. It seems that I cannot load the json data successfully. The code is:

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'
    });

});

The grid can be displayed, but without any data on it. I check the console in chrome:

I got:

OPTIONS http://xxx.xxx.xx.xxx:8080/product/all/?_dc=1384145304301&page=1&start=0&limit=25 Origin http://xxx.xxx.xx.xxx is not allowed by Access-Control-Allow-Origin.

and

XMLHttpRequest cannot load http://xxx.xxx.xx.xxx:8080/product/all/?_dc=1384145304301&page=1&start=0&limit=25. Origin http://xxx.xxx.xx.xxx is not allowed by Access-Control-Allow-Origin.

code4jhon code4jhon · Accepted Answer · 2013-11-11T00:42:45

For points 1 and 2 you can read: Detailed documentation for ExtJS REST request / response handling?

For point 3: if you are using ExtJs4 (and you should) the grids are bounded to stores and that's how you display info through grids http://docs.sencha.com/extjs/4.2.2/#!/guide/application_architecture

For points 4 and 5 you can use "renderer" configuration on grid columns.

Best regards.

How to display JSON data using grid in Extjs

1 Answers