Beginner Course about ExtJS

Foreword

Fortunately, I met “ExtJS” in earlier afternoon, the feeling just like my encounter with “REST” Actually, at beginning, I had no idea about them, but when I got in touch with REST, I found it really suit my taste and opened an interesting gate for me. I hope ExtJS can be amusing enough for both me and you. What we need is passion, am I right?

 (If you have any interest with my previous blog about REST, click here.)


What‘s ExtJS?

My journey with ExtJS below.

My helper is coming. Google, Yes.

ExtJS is an open source UI library, which based on JavaScript, as same as jQuery and EasyUI. Well,ExtJS is more like EasyUI, but EasyUI is a lightweight UI library, ExtJS is powerful than it.

Maybe you are guessing my style of this story. Attention, please. First, I prefer to do a summary introduce about ExtJS. Then, I will offer some contrast between ExtJS and EasyUI.

_______________________(↓A definition from Wikipedia) ______________________

“Ext JS is a pure JavaScript application framework for building interactive web applications using techniques such as AjaxDHTML and DOM scripting. ”

_______________________(↑A definition from Wikipedia) ______________________

ExtJS can supply an abundant UI component library, which could help us in web development. It is an independent Ajax framework from back-end technology. In many scenes, not only for the languages, i.e., .Net, Java, PHP; but also for the IDE Eclipse, Microsoft Visual Studio etc.

ExtJS can support by almost all of the popular browser, Internet Explorer 6+, FireFox 1.5+ (PC& Mac) ,Safari 2+,Opera 9+. Independent software vendors(IBM, Adobe, Cisco, etc.) are applying it.

ExtJS is an object-oriented library, the basic class is “Component”, and some derived classes which inherited form “Component”. Below is class diagram.

 

ExtJS offers a user-friendly and integrated UI components and controls. Any UI component can be placed freely upon the blank area in a web page, which is almost the sense that a Windows application developer layout Windows UI components. Now, I guess I like the style of ExtJS, as a Windows application developer.

One day, ExtJS is probably became the de facto standard in RIA application development field. Maybe, due to the evolutions such as ExtJS had brought to us, web application could be developed easily by visual develop tools. When the new era is coming, more and more developers who have no idea with HTML, JavaScript, CSS, and Java, .Net, PHP, let alone the ExtJS, would charge the web application development field.

Contract between ExtJS and EasyUI

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.

An Example via Gird Control of ExtJS

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.

Firstly, I would show you the final effect, awesome!


To make it, we need to define a Ext.data.Model. A model is just a collection of fields that represents a type of data. Let’s define a model that represents a “Weather”.
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!

Beginner Course about ExtJS,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。