Because I have very little sense about EasyUI, so next, I want to give a simple contrast between ExtJS and EasyUI.

1. ExtJS is published earlier than EasyUI.

2. ExtJS can offer a whole framework, in which every component can communicate to each other. EasyUI which is more like a trimmed-down version, is more lightweight, also lacking altogether.

3. Who want to become a master must experience a learning curve for ExtJS. But not a must for EasyUI.

4. The interface of ExtJS is more beautiful than EasyUI.

Above are some reference comments from me, as a beginner for ExtJS and also an experiencer for EasyUI.

Finally, I am interested in Grid Control, whose interface is beautiful in particular. Let us check the performance by an example (on the version 4.2.1 of ExtJS).

Let’s go on with our previous project, to show weather report of Shenzhen in Grid Control.

Ext.define('Weather', {
    extend: 'Ext.data.Model',
    fields: ['date', 'weatherIconUrl', 'weatherDesc', 'tempMinC', 'tempMaxC'],
    validations: [{
        type: 'length',
        field: 'date',
        min: 1
    }, {
        type: 'length',
        field: 'weatherDesc',
        min: 1
    }, {
        type: 'length',
        field: 'tempMinC',
        min: 1
    }, {
        type: 'length',
        field: 'tempMaxC',
        min: 1
    }]
});

Now we can create a new store instance via the REST Proxy.

var store = Ext.create('Ext.data.Store', {
        autoLoad: true,
        autoSync: true,
        model: 'Weather',
        proxy: {
            type: 'rest',
            url: 'http://api.worldweatheronline.com/free/v1/weather.ashx?q=Shenzhen&format=JSON&num_of_days=5&key=689ab058717194e693b1fc1012fdb857d6874547',
            reader: {
                type: 'json',
                root: 'data.weather'
            },
            writer: {
                type: 'json'
            }
        }
    });

This is our JSONdata, including some array, which is a little special.

"weather": [ 
	 {"date": "2014-06-25", "precipMM": "8.2", "tempMaxC": "32", "tempMaxF": "90", "tempMinC": "28", "tempMinF": "82", "weatherCode": "113",  
	 "weatherDesc": [ {"value": "Sunny" } ], 
	 "weatherIconUrl": [{"value": "http:\/\/cdn.worldweatheronline.net\/images\/wsymbols01_png_64\/wsymbol_0001_sunny.png" } ], 
	 "winddir16Point": "SSW", "winddirDegree": "193", "winddirection": "SSW", "windspeedKmph": "23", "windspeedMiles": "15" },
	 …
	]

At last is thegrid panel which columns contain dates.

var grid = Ext.create('Ext.grid.Panel', {
        renderTo: document.body,
        width: 650,
        frame: true,
        title: 'Weather Report of Shenzhen',
        store: store,
        iconCls: 'icon-user',
        columns: [{
            text: 'date',
            sortable: true,
            dataIndex: 'date',
            field: {
                xtype: 'textfield'
            }
        }, {
            header: 'weatherIconUrl',
            width: 120,
            sortable: false,
            dataIndex: 'weatherIconUrl',
            renderer: showIcon,// 'weatherIconUrl' is an array, so we need to render it respectively.
            field: {
                xtype: 'textfield'
            }
        }, {
            text: 'weatherDesc',
            width: 200,
            sortable: true,
            dataIndex: 'weatherDesc',// 'weatherDesc' is an array, so we need to render it respectively.
            renderer: showDesc,
            field: {
                xtype: 'textfield'
            }
        }, {
            text: 'tempMinC',
            width: 100,
            sortable: true,
            dataIndex: 'tempMinC',
            field: {
                xtype: 'textfield'
            }
        }, {
            text: 'tempMaxC',
            width: 100,
            sortable: true,
            dataIndex: 'tempMaxC',
            field: {
                xtype: 'textfield'
            }
        }]
    });

Because the data Index of “weatherIconUrl” and “weatherDesc” columns are arrays, so we need to render it respectively.

function showIcon(value) {
    return '<img src="' + value[0].value + '"/>';
}
function showDesc(value) {
    return value[0].value;
}

The End

Well, my journey is end. I am looking for a further or a new story with IT technology. How amusing!