Grid列表组件

Ext JS的Grid列表组件是功能强大且灵活的组件，不仅能方便滴处理后台数据，还能实现分页、编辑、统计等功能。                      本章先从Grid的使用流程讲起，然后一步步引入其几大模块：列模式、选择模式、视图、分页等。一一进行分析。                                                                                           一、认识Ext JS的Grid                                                          展现数据和操作数据是网页中最重要的应用，HTML是通过table来实现的，但table列表数据有很多问题：数据样式的显示、数据分页、表列的排序、单元格的编辑等。  而Extjs的Grid组件解决了这些问题。                                                                                                                        1、概述                                                                Grid组件中有许多功能类，每个类都代表一个功能，如选择、拖拽等，这些类最终通过GridPanel类同意起来。                        Ext.GridPanel类是所有类的中心，它通过集成Store、pagindToolbar、columnModel、GridView、RowSelectionModel等                   来完成数据列表功能，即暗示它可以通过配置项(store,cm,sm,vie)从数据，表列，表行，表视图这4个方面来构建Grid组件。                                                                                      2、如何创建GridPanel                                                          构建Grid组件一般可以分为如下7个步骤：                                                   01）定义数据源。定义数据源一般都是通过Extjs数据模型来进行的,                                           var render = new Ext.data.ArrayReader({},[                                                 {name:'company'},                                                           {name:'price',type:'float'},                                                      {name:'change',type:'float'},                                                      {name:'pctChange',type:'float'}]);                                                                                                                     var data = [                                                                ['Altridk Group Inc',87.34,0.23,0.23],                                                 ['kevin',23,23,23]];                                                                                                                            var ds = new Ext.data.Store({reader:reader,data:data});                                                                                                           02)定义columnModel。获得数据之后，接下来要做的就是想办法展现它。二维表是目前最好的展现方式之一。                          要使用二维表，首先得定义表头，给出表列与数据列的对应关系，                                          var cm = new Ext.grid.ColumnModel([                                                     {id:'company',header:'Company',width:40,dataIndex:'company'},                                       {header:'Price',width:20,dataIndex:'price'},                                               {header:'Change',width:20,dataIndex:'change'},                                              {header:'% Change',width:20,dataIndex:'pctChange'}]);                                        这里定义了4列，每列都通过dataIndex属性与上面代码中的数据列对应，建立这种对应关系是通过Ext.grid.ColumnModel类来实现的。它用来            定义表列的相关信息，如表头，列排序等。                                                                                                                    03）定义SelectionModel。SelectionModel即选择模式，在对列表数据进行操作之前，首先要选中需要操作的数据。当单击列表中某位置时，是                      表明选中改行还是该单元格？                                                        这就是选择模式要完成的任务。                                                                                                                 var sm = new Ext.grid.RowSelectionModel({singleSelect:true});                                       定义选择模式不是必须的，因为Grid组件会根据不同类型的GridPanel类采用不同的默认模式。这里显示调用它，其目的是为了选择模式传入配置项，完成功能上的定制。                                                                    04）定义View。视图是列表数据最终显示出来的二维表结构，对于不同类型的类别，其展现结构、样式不尽相同，这得通过视图配置项来进行定制。            var view = new Ext.grid.GridView({forceFit:true});                                            视图也不是必须的。                                                                                                                             05）定义pagingBar.分页栏用来定义数据分页操作，分页是数据列表中最重要且常用的功能，                                 var pagingBar = new Ext.PagingToolBar({                                                     pageSize: 15, store:store,                                                       displayMsg:'共有{2},显示｛0｝-｛1｝'});                                                                                                               06)定义GridPanel。定义了前面5步后，现在就可以把它们组装起来。实现组装的就是GridPanel类，因为是Panel类的子类，可以通过它来配置所有功能，                                                                             var grid = new Ext.grid.GridPanel({                                                     ds:ds,                                                                cm:cm,                                                                sm:sm,                                                                view:view,                                                               bbar:pagingBar,                                                            renderTo:'grid' width:600,height:300});                                                                                                                 07)载入数据。生成GridPanel实例之后，很多用户都会忘记最后一步：载入数据。                                     ds.load({params:{start:0,limit:25}});                                                  通过Store载入数据，它会自动地更新列表内容，数据载入可以在GridPanel类构建之前进行，也可以在其之后进行。