对ajax例子的详解和学习
- 初始加载配置，动态的加载js文件，js文件加载json里内容动态的加载js和css等配置
<script id= "microloader" type="text/javascript" src="http://www.cnblogs.com/microloader/development.js" ></script
- 组件寻找，根据id
this.contentView = Ext.getCmp( 'contentView');
- 设置加载提示框，的开启和关闭
contentView.setMasked({
xtype: 'loadmask',
message: 'Loading...'
});
contentView.unmask();
- 普通的json文件请求
Ext.Ajax.request({
url: 'test.json',
success: function(response) {
contentView.setHtml(response.responseText);
contentView.unmask();
},
failure: function() {
contentView.unmask();
}
});
- jsonp的请求
Ext.data.JsonP.request({
//we give it the url to the free worldweatheronline.com api
url: 'http://free.worldweatheronline.com/feed/weather.ashx' ,
//the callbackKey is used for JSONP requests
callbackKey: 'callback',
//now we define the params to be sent to the server
params: {
//first it is the API key so we can use the site
key: '23f6a0ab24185952101705',
//nexgt is the `q` param which is a valid US zipcode (palo alto in this case)
q: '94301',
//next we define the format, json
format: 'json',
//and finally the number of days we want
num_of_days: 5
},
//now we define a callback method which is called when the JSONP response is successful.
success: function(result) {
//the result is a json object which is returned by the API we just requested.
//in this case all we want is the data.weather property, which is an array
var weather = result.data.weather;
//now we check if the weather is actually defined
if (weather) {
contentView.setHtml(tpl.apply(weather));
} else {
//if it wasn't defined, we throw an error using Ext.Msg.alert()
Ext.Msg.alert( 'Error', 'There was an error retrieving the weather.');
}
//now we set the title of the status bar
statusView.setTitle( 'Weather: Palo Alto, CA' );
//and finally unmask the content view
contentView.unmask();
}
});
- XTemplate的字符串例子拼接
var tpl = this.getWeatherTemplate();
getWeatherTemplate: function() {
return new Ext.XTemplate([
'<tpl for=".">',
'<div class="day">',
'<div class="date">{date:date("M d, Y")}</div>' ,
'<div class="icon">',
'<tpl for="weatherIconUrl">',
'<img src="{value}" />' ,
'</tpl>',
'</div>',
'<div class="temp">{tempMaxF}°<span class="temp_low">{tempMinF}°</span></div>' ,
'</div>',
'</tpl>'
].join( ''));
}
contentView.setHtml(tpl.apply(weather));
- alert添加标题和说明
Ext.Msg.alert( 'Error' , 'There was an error retrieving the weather.' );
