对ajax例子的详解和学习

初始加载配置，动态的加载js文件，js文件加载json里内容动态的加载js和css等配置

[align=left] <script id= "microloader" type="text/javascript" src="http://www.cnblogs.com/microloader/development.js" ></script[/align]

组件寻找，根据id

[align=left] this.contentView = Ext.getCmp( 'contentView');[/align]

设置加载提示框，的开启和关闭

[align=left] contentView.setMasked({[/align]
[align=left] xtype: 'loadmask',[/align]
[align=left] message: 'Loading...'[/align]
[align=left] });[/align]

[align=left] contentView.unmask();[/align]

普通的json文件请求

[align=left] Ext.Ajax.request({[/align]
[align=left] url: 'test.json',[/align]
[align=left] success: function(response) {[/align]
[align=left] contentView.setHtml(response.responseText);[/align]
[align=left] contentView.unmask();[/align]
[align=left] },[/align]
[align=left] failure: function() {[/align]
[align=left] contentView.unmask();[/align]
[align=left] }[/align]
[align=left] });[/align]

jsonp的请求

[align=left] Ext.data.JsonP.request({[/align]
[align=left] //we give it the url to the free worldweatheronline.com api[/align]
[align=left] url: 'http://free.worldweatheronline.com/feed/weather.ashx' ,[/align]
[align=left] [/align]
[align=left] //the callbackKey is used for JSONP requests[/align]
[align=left] callbackKey: 'callback',[/align]
[align=left] [/align]
[align=left] //now we define the params to be sent to the server[/align]
[align=left] params: {[/align]
[align=left] //first it is the API key so we can use the site[/align]
[align=left] key: '23f6a0ab24185952101705',[/align]
[align=left] [/align]
[align=left] //nexgt is the `q` param which is a valid US zipcode (palo alto in this case)[/align]
[align=left] q: '94301',[/align]
[align=left] [/align]
[align=left] //next we define the format, json[/align]
[align=left] format: 'json',[/align]
[align=left] [/align]
[align=left] //and finally the number of days we want[/align]
[align=left] num_of_days: 5[/align]
[align=left] },[/align]
[align=left] [/align]
[align=left] //now we define a callback method which is called when the JSONP response is successful.[/align]
[align=left] success: function(result) {[/align]
[align=left] //the result is a json object which is returned by the API we just requested.[/align]
[align=left] //in this case all we want is the data.weather property, which is an array[/align]
[align=left] var weather = result.data.weather;[/align]
[align=left] [/align]
[align=left] //now we check if the weather is actually defined[/align]
[align=left] if (weather) {[/align]
[align=left] contentView.setHtml(tpl.apply(weather));[/align]
[align=left] } else {[/align]
[align=left] //if it wasn't defined, we throw an error using Ext.Msg.alert()[/align]
[align=left] Ext.Msg.alert( 'Error', 'There was an error retrieving the weather.');[/align]
[align=left] }[/align]
[align=left] [/align]
[align=left] //now we set the title of the status bar[/align]
[align=left] statusView.setTitle( 'Weather: Palo Alto, CA' );[/align]
[align=left] [/align]
[align=left] //and finally unmask the content view[/align]
[align=left] contentView.unmask();[/align]
[align=left] }[/align]
[align=left] });[/align]

XTemplate的字符串例子拼接

[align=left] var tpl = this.getWeatherTemplate();[/align]
[align=left] getWeatherTemplate: function() {[/align]
[align=left] return new Ext.XTemplate([[/align]
[align=left] '<tpl for=".">',[/align]
[align=left] '<div class="day">',[/align]
[align=left] '<div class="date">{date:date("M d, Y")}</div>' ,[/align]
[align=left] '<div class="icon">',[/align]
[align=left] '<tpl for="weatherIconUrl">',[/align]
[align=left] '<img src="{value}" />' ,[/align]
[align=left] '</tpl>',[/align]
[align=left] '</div>',[/align]
[align=left] '<div class="temp">{tempMaxF}°<span class="temp_low">{tempMinF}°</span></div>' ,[/align]
[align=left] '</div>',[/align]
[align=left] '</tpl>'[/align]
[align=left] ].join( ''));[/align]
[align=left] }[/align]

[align=left] contentView.setHtml(tpl.apply(weather));[/align]

alert添加标题和说明

[align=left] Ext.Msg.alert( 'Error' , 'There was an error retrieving the weather.' );[/align]