Sencha Touch2中数据的获取

根据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('很抱歉，由于网络原因获取数据出错！'); } }); }