学习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")
ordie("Couldnotconnect");
mysql_select_db("test")ordie("Couldnotselectdatabase");

$sql_count="SELECTid,name,title,hire_date,activeFROMrandom_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总共有多少个记录，这里指的是所有的记录数。

vards=newExt.data.Store({

proxy:newExt.data.ScriptTagProxy({
url:'http://www.vinylfox.com/yui-ext/examples/grid-paging/grid-paging-data.php'
}),

reader:newExt.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的面板中，--差不多完成喽。

vargridFoot=grid.getView().getFooterPanel(true);

varpaging=newExt.PagingToolbar(gridFoot,ds,{
pageSize:25,
displayInfo:true,
displayMsg:'Displayingresults{0}-{1}of{2}',
emptyMsg:"Noresultstodisplay"
});

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

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

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

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

方法二：

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

前台JS：

Ext.onReady(function()...{
varmyData=[
['Apple',29.89,0.24,0.81,'9/112:00am'],
['Ext',83.81,0.28,0.34,'9/1212:00am'],
['Google',71.72,0.02,0.03,'10/112:00am'],
['Microsoft',52.55,0.01,0.02,'7/412:00am'],
['Yahoo!',29.01,0.42,1.47,'5/2212:00am']
];

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

varcolModel=newExt.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:"LastUpdated",width:120,sortable:true,
renderer:Ext.util.Format.dateRenderer('m/d/Y'),dataIndex:'lastChange'}
]);

vargrid=newExt.grid.GridPanel(...{
el:'grid-example',
ds:ds,
cm:colModel,
autoExpandColumn:'company',
height:350,
width:600,
title:'ArrayGrid'
});
grid.render();
grid.getSelectionModel().selectFirstRow();
});

前台HTML：

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

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

varmyData=[
['Apple',29.89,0.24,0.81,'9/112:00am'],
['Ext',83.81,0.28,0.34,'9/1212:00am'],
['Google',71.72,0.02,0.03,'10/112:00am'],
['Microsoft',52.55,0.01,0.02,'7/412:00am'],
['Yahoo!',29.01,0.42,1.47,'5/2212:00am']
];

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

在前台中加入代码

<scriptlanguage="javascript">
<asp:LiteralRunat="server"ID="LiteralScript"></asp:Literal>
</script>

同时在后台加入

protectedSystem.Web.UI.WebControls.LiteralLiteralScript;

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

StringBuilderInitScript=newStringBuilder();
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}});