首页 > 代码库 > Beginner Course about ExtJS
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 Ajax, DHTML 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!
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=http://www.mamicode.com/"' + 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!