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