extjs中的grid的挺功能强大,以下是我自己做项目时用到的显示访客信息的一个grid,我将通过这个来分析grid的用法以及与SQL2000等数据库的连接过来。 我们就从最简单的grid开始,一步步来看看extjs给我们提供的grid究竟给我们提供了哪些功能。
在EXTJS中,一个grid包括行、列以及其他辅助信息,在extjs里边,列由Ext.grid.ColumnModel来管理,我们来看看如何创建一个ColumnModel对象:
var cm = new Ext.grid.ColumnModel([
{
header: "访客名称",
dataIndex: "visitorname",
tooltip: "访客名称",
width:60,
sortable: true
}, {
header: "访客IP",
dataIndex: "visitorip",
tooltip: "访客IP",
width: 60,
sortable: true
}, {
header: "访客时间",
dataIndex: "visitortime",
tooltip: "访客时间",
width: 80,
sortable: true
}, {
header: "currenturl",
dataIndex: "currenturl",
tooltip: "currenturl",
width: 120,
sortable: true
}, {
header: "客服人员",
dataIndex: "operatorname",
tooltip: "operatorname",
width: 60,
sortable: true
}, {
header: "originurl",
dataIndex: "originurl",
tooltip: "originurl",
width: 120,
sortable: true
}, {
header: "responsetime",
dataIndex: "responsetime",
tooltip: "responsetime",
width: 80,
sortable: true
}, {
header: "esctime",
dataIndex: "esctime",
tooltip: "esctime",
width: 80,
sortable: true
}, {
header: "question",
dataIndex: "question",
tooltip: "question",
width: 80,
sortable: true
},{
header: "remark",
dataIndex: "remark",
tooltip: "remark",
width: 80,
sortable: true
}]);
这里定义了10列,列可以通过参数进行配置,在这里简单介绍下,详细的可以参考EXTJSAPI文档。
id 用来标识列,在css中使用该id可以对整列所有的单元格设置样式,可自动扩充的列也根据这个id来标识;
header表示列名字;
width表示列的宽度;
tooltip:表示提示型注释;
sortable用来指明列是否可排序;
dataIndex,关联到数据库中的字段标识;
editable,指示列是否可编辑;
renderer,指示列如何来呈现。
有了列,我们还需要一些数据来填充行,下面介绍从数据库中获取数据的过程,里面包含详细的说明:
store
var VisitorInfoStore; //定义全局Store。 VisitorInfo = function(node) { //字段列表 var fields = ["visitorsid", "operatorname", "visitorip", "visitoradress", "visitorname", "visitortime", "currenturl", "originurl", "responsetime", "esctime", "question", "remark"]; //实例化Store VisitorInfoStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ //proxy url: "UI/VisitorInfo/VisitorInfoList.aspx",//URL,获取数据库的页面 method: "POST" //方法 }), reader: new Ext.data.JsonReader({ fields: fields, //字段 root: "data", //从哪里读取数据,要求json里含data关键字 dataIndex: "visitorsid", //主键 totalProperty: "totalCount" //总记录数 }) });
VisitorInfoStore.load({ params: { limit: pageSize, start: 0} }); //加裁数据,加裁时如果需要传入参数,在这里写,这里传入了二个参数,一个是每面显示的页面,pageSize,一个是从哪里开始的参数,这里从0开始,即从第一条开始。
VisitorInfoList.aspx文件:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="VisitorInfoList.aspx.cs" Inherits="UI_VisitorInfo_VisitorInfoList" %>
<%=JSON %>
VisitorInfoList.aspx.cs文件:
public string JSON; private BLL.VisitorInfoBLL visitorInfoBLL = new BLL.VisitorInfoBLL();
protected void Page_Load(object sender, EventArgs e) { GetVisigorInfo(); }
private void GetVisigorInfo() { string limits = Request.Form["limit"]; string starts = Request["start"];
if (limits != null && starts != null) { int limit = int.Parse(limits); int start = int.Parse(starts); JSON = GetCommonInfo(limit, start); } else { Response.Write("{success:false}"); } }
private string jsons; private DataSet ds; LineChat.DAL.visitorsInfo visitor = new LineChat.DAL.visitorsInfo();
public string GetCommonInfo(int limit, int start) { /* ["visitorsid", "operatorname", "visitorip", "visitoradress", "visitorname", "visitortime","currenturl","originurl","responsetime","esctime","question","remark"];*/ string sql = @"select top " + limit + @" * from (select visitorsid,visitortime,visitorip,visitoradress,visitorname,currenturl,responsetime,esctime,question,remark ,originurl, (select operatorname from operatorinfo where operatorinfo.operatorid=visitorsinfo.operatorid) as operatorname from Visitorsinfo ) v where visitorsid not in(select top " + start + " visitorsid from visitorsinfo order by visitorsid asc) order by visitorsid asc";
ds = visitor.Query(sql);
JSONHelper json = new JSONHelper(); if (ds != null) { foreach (DataRow dr in ds.Tables[0].Rows) { json.AddItem("visitorsid", dr["visitorsid"].ToString()); json.AddItem("operatorname", dr["operatorname"].ToString()); json.AddItem("visitorip", dr["visitorip"].ToString()); json.AddItem("visitoradress", dr["visitoradress"].ToString()); json.AddItem("visitorname", dr["visitorname"].ToString()); json.AddItem("visitortime", dr["visitortime"].ToString()); json.AddItem("currenturl", dr["currenturl"].ToString()); json.AddItem("originurl", dr["originurl"].ToString()); json.AddItem("responsetime", dr["responsetime"].ToString()); json.AddItem("esctime", dr["esctime"].ToString()); json.AddItem("question", dr["question"].ToString()); json.AddItem("remark", dr["remark"].ToString()); json.ItemOk(); } json.totlalCount = visitor.GetList().Tables[0].Rows.Count; jsons = json.ToString(); } return jsons; }
现在准备好了数据,我们来看看怎么显示数据,显示数据可以通过GridPanel实现,以下是代码:
var VisitorGrid = new Ext.grid.GridPanel( { id: "VisitorGrid", store: VisitorInfoStore, //上面定义的Store cm: cm, //列 loadMask: true, //加裁时是否Mask autoScroll: true, //超过长度带自动滚动条 border: false, //是否出现边框 viewConfig: { //列下拉时的菜单 columnsText: "显示/隐藏列", sortAscText: "正序排列", sortDescText: "倒序排列", forceFit: true }, //分页 bbar: new Ext.PagingToolbar({ //低部的bar store: VisitorInfoStore, pageSize: pageSize, //每页显示条数 //显示右下角信息 displayInfo: true, displayMsg: '当前记录 {0} -- {1} 条 共 {2} 条记录', emptyMsg: "No results to display", prevText: "上一页", nextText: "下一页", refreshText: "刷新", lastText: "最后页", firstText: "第一页", beforePageText: "当前页", afterPageText: "共{0}页"
}), listeners: { 'contextmenu': function(e) { e.stopEvent(); //不发生快捷方式,如右击时不出现任何操作 } } }); GridMain(node, VisitorGrid, "visitoricon"); //加裁到主界面的方法,这个是公共事件,node是cm中传的参数 }
在extjs中,Ext.grid.GridPanel表示一个grid,它需要一个json对象作为参数来进行配置,我们看看用到的配置:
renderTo:指出grid构造出来之后要在哪里呈现,可以是一个元素的id,一个Dom结点或者一个Element对象,如果没有这个参数,就必须调用Ext.grid.GridPanel的render方法来呈现出grid。
stroe:以一个统一的接口提供数据给grid,,我们知道数据可能有很多种格式,除了我们用到的数组,还可以是json,xml等等,如果让grid负责来识别每一种数据格式显然不是一个好的设计思想,所以在extjs中有一个专门的类Ext.data.Store来负责数据的格式转换。
cm:colModel的简写,这里放上我们前边构造好的ColumnModel对象就可以了。
autoExpandColumn:自动扩充的列,该列会自动填充grid的空白空间。
height:grid的高度
width:grid的宽度。
title:grid的标题。
现在我们运行一下看看效果,
看上去挺酷的吧,实现起来也简单,在列的名字上点击还能够进行排序,列的宽度可以自由拖动,位置也可以改变。按下ctrl键,我们可以选择多个行。当我们把鼠标移动到列名上,还可以看到出现一个倒立的小三角,点击出现个菜单,可以看到里边能对列进行排序,还可以隐藏列。
以下提示JSONHelper文件下载:
JSONHelper