EXt的数据加载与展示

        工作中接触的系统的前台使用了EXT JS框架，数据加载方式是Ajax异步加载。前后台的数据交互格式是json格式。系统中最主要的数据展示是列表展示。现对上述数据的展示作出如下总结不足之处还望多多指教。

一、数据加载方式：

    （1） Ext.data.JsonStore的使用

                   Ext.data.JsonStore继承于Ext.data.Store，使得从远程JSON数据创建stores更为方便的简单辅助类。 JsonStore 接收的数据格式是JSON；简单的JSON数据格式如{“name”:“小明”}。

                下面以档案系统为例说明JsonStore的使用  ：        

    var store = new Ext.data.JsonStore({
           url: 'archive!list.action?modelName=' + modelName,
           root: 'items',
           totalProperty: 'totalCount',
           fields: [
               'id','tm'

                   ],

            baseParams: {limit:20, treeId: treeId}
        });

        在上面的代码中定义了一个JsonStore对象。在JsonStore中有如下几个重要的属性：

                 ①.url 表示Store获取数值的路径，当store加载数据时会以异步的形式请求该路径，这个方法应该返回一个json数据（也可以是text）

                ②.root用来标示接收到的JSON字符串从哪里开头解析。类似于Map的key。如{"items":[{"id":"1","tm":"题名"},                                   {"id":"2","tm":"题名2"}]}形式的json数组，用来表示解析items所对应的items后面的Json数组。

                ③.totalProperty就是数据的总条数，比如查询商品时查出数据库中共有多少条数据。

                ④.fields表示接收的数据属性名。json存放的就是 名称/值。fields里面的字段对应的就是json数据中的名称。类似MAp中的key

                 ⑤.baseParams表示发送请求时传递过去的参数。实际上述store发送的参数就是   archive!list.action?modelName='  +                                                 modelName+“&limit=20&treeId=一个变量值”;

          当需要在store中追加参数时可以如下进行操作： store . setBaseParam ( "ajh" ,  ajh );

   不要忘了要想加载出数据需要调用下面这段代码：store.load()或store.reload()。

    

（2） Ext. XTemplate . from 的使用

     Ext. XTemplate . from是EXT的一个重要的概念。使用该对象可以将数据灵活的在页面进行显示。在档案系统中加载档案信息时定义了一个模板。 < textarea  style= " display : none ; "  id= "archiveTpl" >.... </textarea>。由于模板内容过于复杂，暂且用下面模板进行讲解。

         < textarea   style= " display : none ; "   id= "archiveTpl" >

            <table>

                <tr><td>题名</td><td>目录号</td></tr>

                <tpl for=".">

                <tr><td>${tm}</td><td>${mlh}</td></tr>

                </tpl>

            </table>

         </textarea>

    (注意tpl，后面会提到)

上面定义了一个id为archiveTpl的模板。现在有一个json数据{"items":[{"tm":"题名1","mlh":"ML01"},{"tm"："题名2"，"mlh":"ML02"},{"tm":"题名3","mlh":"ML03"}]}。我要将这个数据展示到页面上，并组织到table里。这个需要通过调用EXT的模板配合标签tpl和操作符for就可以循环将上述数据展示到指定位置。

     ①.首先，定义创建模板对象

        var archiveTemplate = new Ext.XTemplate.form("archiveTpl");

      这里定义了一个EXT.XTemplate.form的对象，创建该对象需要传递一个参照的模板，这里是参照id为        archiveTpl的html文本元素进行创建，即引用了上述定义的textarea为模板。

（3） Ext . DataView的使用

    EXt.XTemplate.form的使用还需要结合EXT.DataView。Ext.DataView组件非常的强大，基本上能满足各种html上呈现的需求。它是 实现多行多列效果的展示组件。

档案系统中的DataView定义如下：

             var  dv  =  new  Ext. DataView ({

        store :  store ,

         tpl :  tpl ,

         autoHeight :  false ,

         overClass :  'x-view-over' ,

        itemSelector :  'tr.a-item' ,

         emptyText :  '' ,

        renderTo :  'archivesCt'

             });

EXT.DataView使用store作为数据源，以tpl的格式把数据展示在id为archivesCt的位置。下面
参照上面定义的DataView对象介绍下EXT.DataView的一些重要属性。
    ①store EXT.DataView的数据来源
    ②tpl 多行多列展示时参照的模板
    ③renderTo 将EXT.DataView在何处进行显示，后面的值是一个标签的id。如：<div id="archivesCt"></div>
（4）分页组件 Ext.PagingToolbar
        在我们实际开发过程中需要对数据进行分页处理。Ext.PagingToolBar为我们提供了分页。
    系统中的分页定义如下：        
        pageToolBar = new Ext.PagingToolbar({
            plugins: new Ext.ux.ComboPageSize({addToItem: false, prefixText: '每页', postfixText: '                       条'}),
            renderTo: 'pagingToolbar',
            pageSize: 20,
            store: store,
            displayInfo: true,
            displayMsg: '{0} - {1} 共 {2} 条',
            emptyMsg: "没有记录返回"
        });
现对上面的EXT.PagingToolBar的主要属性做如下说明：
    
    

     
         ①
     
     Ext.ux.
     
     ComboPageSize
     
     是实现下拉效果的分页插件如：
    
    
    
    

     
         
     
     
    
    

   
   

    
        ②renderTo表示将分页在何处进行展示
   
   
   
   

    
        ③store数据来源
   
   
   
   

    
    上面是我工作几个月来掌握的EXT的主要内容，主要是前后台数据交互与数据展示。上面组件的配合使用就可以进行完整的页面显示了，当然EXT作为一个重量级的前端框架，深入详细的学习还是需要花费大量时间去学习官方文档。