根据Sencha Touch技术框架的特点，前台展示的绝大部分数据都是通过ajax方式获取，譬如列表数据的获取、表单数据的获取等等。列表数据的获取，一般是通过store组件和list组件进行结合；表单数据的获取通常使用Ext.request方式获取。
列表数据的获取代码清单：
//数据列表
renderListData: function(){
//定义变量和函数的作用范围
var _scope = this;
var st = new Ext.data.Store({
model: _scope.model, //store组件使用的Ext.data.Model
//sorters: 'crtdt',
autoLoad: true, //是否自动加载数据
proxy: {
type: 'ajax',
actionMethods: 'POST',
url: _scope.url, //数据获取的url地址
extraParams: _scope.extraParams, //请求的额外参数
startParam: 'start',
limitParam: 'limit',
reader: {
type: 'json', //reader类型-默认jsonReader,
root: undefined, //reader root-默认undefined
}
},
listeners: {
beforeload: function(st, oper){
oper.start = _scope.start; //设置分页起始记录
oper.limit = _scope.limit; //设置每页显示记录数
},
load: function(st, records, successful){
if(successful){
//获取后台返回的记录总数属性
_scope.totalNum = st.getProxy().getReader().rawData.total;
//分页按钮控制
_scope.controlPageButtons();
//回调外部函数-返回结果给外部函数
if(_scope.callbackFn){
_scope.callbackFn({listId:_scope.listId, total:_scope.totalNum});
}
}
}
}
});
//创建并返回list组件
return new Ext.List({
id: _scope.listId,
//multiSelect: true,
//simpleSelect: true,
scroll: 'vertical',
store: st, //store组件对象
emptyText: '<div style="margin:2px;">'+_scope.emptyText+'</div>',
loadingText: '正在获取数据',
itemTpl: _scope.itemTpl, //列表显示的模板
listeners: {
itemtap: function(lt, idx, item, e){
//点击列表记录时执行的函数
if(_scope.itemTapFn){
var record = lt.getStore().getAt(idx);
_scope.itemTapFn({listId:_scope.listId, record:record}, _scope.fnScope);
}
}
}
});
}
通过Ext.request方式获取数据的代码清单：
//获取数据
fetchData: function(){
var _scope = this;
Ext.Ajax.request({
method: 'POST',
url: prefix + '/doc/letter/manager!fetchEditData.action',
params: {
'entity.id': _scope.entityId //传递给后台的参数
},
success: function(response, opts){
var objResp = Ext.decode(response.responseText);
if(objResp.success){
var objData = Ext.decode(objResp.result);
//调用自定义的函数把数据设置到form中
_scope.loadDataToForm(_scope, objData);
}else{
Ext.Msg.alert(objResp.result);
}
},
failure: function(response, opts){
Ext.Msg.alert('很抱歉，由于网络原因获取数据出错！');
}
});
}