脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-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.

<"/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+PC9wPgo8cD5FehrKUyBvZmZlcnMgYSB1c2VyLWZyaWVuZGx5IGFuZCBpbnRlZ3JhdGVkIFVJIGNvbXBvbmVudHMgYW5kIGNvbnRyb2xzLiBBbnkgVUkgY29tcG9uZW50IGNhbiBiZSBwbGFjZWQgZnJlZWx5IHVwb24gdGhlIGJsYW5rIGFyZWEgaW4gYSB3ZWIgcGFnZSwGD2hpY2ggaXMgYWxtb3N0IHRoZSBzZW5zZSB0aGF0IGEgV2luZG93cyBhcHBsaWNhdGlvbiBkZXZlbG9wZXIgbGF5b3V0IFdpbmRvd3MgVUkgY29tcG9uZW50cy4gTm93LCBJIGd1ZXNzIEkgbGlrZQogdGhlIHN0eWxlIG9mIEV4dEpTLCBhcyBhIFdpbmRvd3MgYXBwbGljYXRpb24gZGV2ZWxvcGVyLjwvcD4KPHA+T25lIGRheSwgRXh0SlMgaXMgcHJvYmFibHkgYmVjYW1lIHRoZSBkZSBmYWN0byBzdGFuZGFyZCBpbiBSSUEgYXBwbGljYXRpb24gZGV2ZWxvcG1lbnQgZMLlbGQuIE1heWJlLCBkdWUgdG8gdGhlIGV2b2x1dGlvbnMgc3VjaCBhcyBFeHRKUyBoYWQgYnJvdWdodCB0byB1cywgd2ViIGFwcGxpY2F0aW9uIGNvdWxkIGJlIGRldmVsb3BlZCBlYXNpbHkgYnkgdmlzdWFsIGRldmVsb3AgdG9vbHMuIFdoZW4gdGhlIG5ldyBlcmEgaXMgY29taW5nLCBTb3JlCiBhbmQgbW9yZSBkZXZlbG9wZXJzIHdobyBoYXZlIG5vIGlkZWEgd2l0aCBIVE1MLCBKYXZhU2NyaXB0LCBDU1MsIGFuZCBKYXZhLCAuTmV0LCBQSFAsIGxldCBhbG9uZSB0aGUgRXh0SlMsIHDVDWxkIGNoYXJnZSB0aGUgd2ViIGFwcGxpY2F0aW9uIGRldmVsb3BtZW50IGZpZWxkLjwvcD4KPGgxPkNvbnRyyWN0IGJldHdlZW4gRXh0SlMgYW5kIEVhc3lVSTwvaDE+Cgo8cD5CZWNhdXNlIEkgaGf2ZSB2ZXJ5IGxpdHRsZSBzZW5zZSBhYm91dCBFYXN5VUksIHNvIG5leHQsIEkgd2FudCB0byBnaXZlIGEgc2ltcGxlIGNvbnRyYXN0IGJldHdlZW4gRXh0SlMgYW5kIEVhc3lVSS48L3A+CjxwPjEuIEV4dEpTIGlzIHB1Ymxpc2hlZCBlYXJsaWVyIHRoYW4gRWFzeVVJLjwvcD4KPHA+Mi4gRXh0SlMgY2FuIG9mZmVyIGEgd2hvbGUgZnJhbWV3b3JrLCBpbiB3aGljaCBldmVyeSBjb21wb25lbnQgY2FuIGNvbW11bmljYXRlIHRvIGVhY2ggb3RoZXIuIEVhc3lVSSB3aGljaCBpcyBtb3JlIGxpa2UgYSB0cmltbWVkLWRvd24gdmVyc2lvbiwgaXMgbW9yZSBsaWdodHdlaWdodCwgYWxzbyBsYWNraW5nIGFsdG9nZXRoZXIuPC9wPgo8cD4zLiBXaG8gd2FudCB0byBiZWNvbWUgYSBtYXN0ZXIgbXVzdCBleHBlcmllbmNlIGEgbGVhcm5pbmcgY3VydmUgZm9yIEV4dEpTLiBCdXQgbm90IGEgbXVzdCBmb3IgRWFzeVVJLjwvcD4KPHA+NC4gVGhlIGludGVyZmFjZSBvZiBFeHRKUyBpcyBtb3JlIGJlYXV0aWZ1bCB0aGFuIEVhc3lVSS48L3A+CjxwPkFib3ZlIGFyZSBzb21lIHJlZmVyZW5jZSBjb21tZW50cyBmcm9tIG1lLCBhcyBhIGJlZ2lubmVyIGZvciBFeHRKUyBhbmQgYWxzbyBhbiBleHBlcmllbmNlciBmb3IgRWFzeVVJLjwvcD4KCjxoMT5BbiBFeGFtcGxlIHZpYSBHaXJkIenvbnRyb2wgb2YgRXh0SlM8L2gxPgoKPHA+RmluYWxseSwgSSBhbSBpbnRlcmVzdGVkIGluIEdyaWQgQ29udHJvbCwgd2hvc2UgaW50ZXJmYWNlIGlzIGJlYXV0aWZ1bCBpbiBwYXJ0aWn1bGFyLiBMZXQgdXMgY2hlY2sgdGhlIHBlcmZvcm1hbmNlIGJ5IGFuIGV4YW1wbGUgKG9uIHRoZSB2ZXJzaW9uIDQuMi4xIG9mIEV4dEpTKS48L3A+CjxwPkxldKGvcyBnbyBvbiB3aXROIG91ciAKcHJldmlvdXMgcHJvamVjdCwgdG8gc2hvdyB3ZWF0aGVyIHJlcG9ydCBvZiBTaGVuemhlbiBpbiBHcmlkIENvbnRyb2wuPC9wPgpGaXJzdGx5LCBJIHdvdWxkIHNob3cgeW91IHRoZSBmaW5hbCBlZmZlY3QsIGF3ZXNvbWUhPGJyPgoKPGltZyBzcmM9"/uploaDFile/Collfiles/20140630/20140630130829122.jpg" alt="/">

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: 'https://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 ''; } 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!

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-Beginner Course about ExtJS全部内容，希望文章能够帮你解决javascript代码实例教程-Beginner Course about ExtJS所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。