extJs——grid数据展现总结(1)

个人感觉extJs在前台数据展现方面有其独特的优点。虽然由于extJs自身的原因，在其性能方面可能给前台造成很大的压力，但是，如果能够合理的做些优化，用ext做数据展现是个不错的选择。

下面对grid数据展现方面的几个概念一一介绍。

1，Ext.data.Store：
     首先介绍一下与store相关的几个概念：
         （1），reader：数据读取器，解析数据的
         （2），store：数据存储器,保存和管理数据，数据以record类型进行存储，每一行就是一个record。
         （3），proxy：数据代理，代理各种数据源。
     构建store：

                    var _store = new Ext.data.Store(); var _rs = new Ext.data.Record(["name","sex"]); _rs.set("name","aaa"); _rs.set("sex","男"); _store.add(_rs);//_rs中存储的就是一行数据 
                   

    Ext中的reader：JsonReader、xmlReader、ArrayReader（继承JsonReader）
        （1），arrayReader 解析：
                   var _store = new Ext.data.Store({ data:[["男"],["女"]], reader:new Ext.data.ArrayReader({},Ext.data.Record.create(["sex"]))});

        （2），JsonReader解析：
                   var _store = new Ext.data.Store({ data:[{sex:"男"},{sex:"女"}], reader:new Ext.data.JsonReader({},Ext.data.Record.create(["sex"]))});

    Ext中的proxy:httpProxy、MemoryProxy、ScriptTagProxy
          常用的就是httpProxy，从http上传输，数据从服务器端传过来解析
    Ext中的Store：JsonStore、simpleStore、GroupingStore： 前两个最常用。
        （1）,simpleStore：通过ArrayReader进行数据解析的简化版的Store
                  var _store = new Ext.data.SimpleStore({ data[["男"],["女"]], fields:["sex"] });

        （2）,JsonReader:
                 var _store = new Ext.data.JsonReader({ data:[{sex:"男"},{sex:"女"}], fields:["sex"]});

        （3），通过远程获取数据：
                 var _store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ method: 'POST', url: "${pageContext.request.contextPath}/extSearchReportDetail.ao }), remoteSort:true, baseParams:{reportNameList:reportNameList,value:value},//要传输的参数 reader: new Ext.data.JsonReader( {totalProperty: 'totalProperty',root: 'root'}, fields )}); _store .load({params:{start:0,limit:30}}); //params:中参数为分页信息，start：从第几条开始，limit:每页显示条数