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 on 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 are we need are passion, am I right?

(If you had any interest and my previous blog about REST, click here.)

What ' s ExtJS?

My journey with ExtJS below.

My Helper is coming. Google, Yes.

ExtJS is a open source UI library, which based on JavaScript, as same as JQuery and Easyui. Well,extjs is more like the Easyui, but Easyui are a lightweight UI library, ExtJS is powerful than it.

Maybe you is guessing my style of this story. Attention, please. First, I prefer to does a summary introduce about ExtJS. Then, I'll 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 Ajax ,  DHTML and DOM scripting. "

_______________________ (↑ a definition from Wikipedia) ______________________

ExtJS can supply a abundant UI component library, which could help us in web development. It is a 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 + +. Independent software Vendors (IBM, Adobe, Cisco, etc) is applying it.

ExtJS is a object-oriented library, the basic class is "Component", and some derived classes which inherited form "compon Ent ". Below is class diagram.

ExtJS offers a user-friendly and integrated UI components and controls. Any UI component can placed freely upon the blank area in a Web page, which are almost the sense that a Windows applicat Ion Developer Layout Windows UI components. Now, I guess I like the style of ExtJS, as a Windows application developer.

One day, ExtJS are 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 is developed easily by visual develop Tools. When the new era was coming, more and more developers who had 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 has very little sense on 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 with which every component can communicate to each of the other. Easyui which are more like a trimmed-down version, are more lightweight, also lacking altogether.

3. Who want-become a master must experience a learning curve for ExtJS. But isn't a must for Easyui.

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

Above is 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 the Grid Control, whose interface is beautiful in particular. Let us check the performance by a 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: { C4/>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 are our jsondata, including some arrays, which is a little special.

"Weather": [  {"Date": "2014-06-25", "precipmm": "8.2", "TEMPMAXC": "+", "TEMPMAXF": "All", "Tempminc": "$", "Tempmin" F ":" "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 ":" All "," windspeedmiles ":" 15 "}, ...]

At Thegrid panel which columns contain dates.

var Grid = ext.create (' Ext.grid.Panel ', {renderTo:document.body, width:650, Frame:true, TI Tle: ' 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, DA Taindex: ' Weathericonurl ', renderer:showicon,//' Weathericonurl ' is a array, so we need to render it respecti            Vely.             Field: {xtype: ' TextField '}}, {text: ' Weatherdesc ', width:200, Sortable:true, Dataindex: ' Weatherdesc ',//' Weatherdesc ' is a array, so we need to render it resp            Ectively.          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 is arrays, so we need to render it respectively.

function Showicon (value) {    return '  ';} function Showdesc (value) {    return value[0].value;}

The End

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