学习EXT第五日--Grid组件的简易分页

关于grid的分页方式我个人理解有两种，我只针对对数据库表或视图的操作思路做一些讲解。

第一种是通过json类的调用，使查询出来的数据格式化，然后传回grid所在页面。在这种方法下，需要.net framework 2.0以上框架和一个json类的支持，当然此方法操作数据表最方便。

第二种则是通过拼接字符串，就可以达到效果。这种方法只需要.net framework1.1框架以上支持就可以了。

下面针对这两种方法做一个讲解。

方法一：此方法还是转载网上流传的PHP的操作。

Gird数据

Grid的分页必须依靠服务端（Server Side）来划分好每一页的数据才可以完成。

本例中的服务端语言是PHP,数据库是MySQL，用来导出一些随机的数据。下列脚本的作用是，获取我们想要的数据，同时这些数据是已分好页的数据。分页的参数是由Page Toolbar传入的变量limit和start所决定的。

$link   =   mysql_pconnect ( " test-db.vinylfox.com " ,   " test " ,   " testuser " ) 
 or  die ( " Could not connect " );
mysql_select_db ( " test " ) or  die ( " Could not select database " );

$sql_count   =   " SELECT id, name, title, hire_date, active FROM random_employee_data " ;
$sql   =   $sql_count   .   "  LIMIT  " . $_GET [ ' start ' ] . " ,  " . $_GET [ ' limit ' ];

$rs_count   =   mysql_query ( $sql_count );

$rows   =   mysql_num_rows ( $rs_count );

$rs   =   mysql_query ( $sql );

while ( $obj   =   mysql_fetch_object ( $rs ))
{
  $arr []  =   $obj ;
}

Echo   $_GET [ ' callback ' ] . ' ({"total":" ' . $rows . ' ","results": ' . json_encode( $arr ) . ' }) ' ; 

由于每个后台开发的环境都不尽相同，所以这里的服务端代码就不细究了。

怎么做一个分页的Grid

本例采用的是ScriptTagProxy，原因是 范例代码 和 服务端代码 不是在同一个服务器上（译注：即“跨域”），而大多数的情况是，在同一个服务器上得到数据，直接用HttpProxy就可以了。

使用DataStore与平时唯一不同的地方，便是需要设置totalProerty属性。本例中，我们从服务端的脚本计算出“total”这个值，告诉DataStore总共有多少个记录，这里指的是所有的记录数。

var  ds  =   new  Ext.data.Store({
   
          proxy:  new  Ext.data.ScriptTagProxy({
              url:  ' http://www.vinylfox.com/yui-ext/examples/grid-paging/grid-paging-data.php '
          }),
   
          reader:  new  Ext.data.JsonReader({
              root:  ' results ' ,
              totalProperty:  ' total ' ,
              id:  ' id '
          }, [
              {name:  ' employee_name ' , mapping:  ' name ' },
              {name:  ' job_title ' , mapping:  ' title ' },
              {name:  ' hire_date ' , mapping:  ' hire_date ' , type:  ' date ' , dateFormat:  ' m-d-Y ' },
              {name:  ' is_active ' , mapping:  ' active ' }
          ])
   
      });

分页栏Toolbar

这里加入一个分页栏到Grid的面板中，--差不多完成喽。

var  gridFoot  =  grid.getView().getFooterPanel( true );

       var  paging  =   new  Ext.PagingToolbar(gridFoot, ds, {
          pageSize:  25 ,
          displayInfo:  true ,
          displayMsg:  ' Displaying results {0} - {1} of {2} ' ,
          emptyMsg:  " No results to display "
      });

最后传入start和limit参数以初始化数据。

ds.load({params:{start: 0 , limit: 25 }});

花时间较多的地方是，在后台如何生成数据，以配合Grid的运作，一旦这些工作OK后，分页Grid再不是一件难事了。

如果是用asp.net+sql server 2000 大家则需要通过存储过程来进行对数据表分页的操作。

方法二：

首先来看一下在页面初始化grid的操作：

前台JS：

Ext.onReady( function ()  ... {
            var myData = [
            ['Apple',29.89,0.24,0.81,'9/1 12:00am'],
            ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
            ['Google',71.72,0.02,0.03,'10/1 12:00am'],
            ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
            ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
            ];

            var ds = new Ext.data.Store(...{
                proxy: new Ext.data.MemoryProxy(myData),
                reader: new Ext.data.ArrayReader(...{}, [
                    ...{name: 'company'},
                    ...{name: 'price', type: 'float'},
                    ...{name: 'change', type: 'float'},
                    ...{name: 'pctChange', type: 'float'},
                    ...{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
                ])
            });
            ds.load();

            var colModel = new Ext.grid.ColumnModel([
            ...{id: "company", header: "Company", width: 120, sortable: true, dataIndex: 'company'},
            ...{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
            ...{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
            ...{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
            ...{header: "Last Updated", width: 120, sortable: true, 
            renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ]);

            var grid = new Ext.grid.GridPanel(...{
                el:'grid-example',
                ds: ds, 
                cm: colModel,
                autoExpandColumn: 'company',
                height:350,
                width:600,
                title:'Array Grid'
            });
            grid.render();
            grid.getSelectionModel().selectFirstRow();
            } );

前台HTML：

< div  id ="grid-example" ></ div >

大家可以看到，在js里面，

var  myData  =  [
            [ ' Apple ' , 29.89 , 0.24 , 0.81 , ' 9/1 12:00am ' ],
            [ ' Ext ' , 83.81 , 0.28 , 0.34 , ' 9/12 12:00am ' ],
            [ ' Google ' , 71.72 , 0.02 , 0.03 , ' 10/1 12:00am ' ],
            [ ' Microsoft ' , 52.55 , 0.01 , 0.02 , ' 7/4 12:00am ' ],
            [ ' Yahoo! ' , 29.01 , 0.42 , 1.47 , ' 5/22 12:00am ' ]
            ];

这里的代码则是对数据的加载。所以可以定义一个全局的变量，在这里我们使用Literal

在前台中加入代码

< script language = " javascript " >     
             < asp:Literal Runat = " server "  ID = " LiteralScript " ></ asp:Literal >         
         </ script >

同时在后台加入

protected  System.Web.UI.WebControls.Literal LiteralScript;

此时在后台，就可以把查询出来的数据，通过

StringBuilder InitScript  =   new  StringBuilder();    
InitScript.Append( " 从数据表查询出来并格式化后的字符串 " );
.......
LiteralScript.Text  +=  InitScript.ToString();

这种方式来对myData重新赋值。

具体方式是替换myData中的

['Apple',29.89,0.24,0.81,'9/1 12:00am'],
 ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']

通过参数start和limit来进行分页的操作了。

在前台加入代码：ds.load({params:{start:0,limit:10}});