最近园子里有很多朋友关心ExtJS,我最近写了一个项目管理工具用到ExtJS,我结合.NET写了个关于Grid实现的一个实例供需要的朋友参考。
本实例开发环境是:Windows XP + Sql Server 2005 + IIS6+VS 2008 Beta2(.NET Framework3.5)
实现步骤:
1.取数据源
这里是从数据库里读取数据生产JSON的方式供ExtJS Grid调用.
(1)用
Scott Guthrie提供的生产JSON格式的类,这篇文章可以访问:
http://weblogs.asp.net/scottgu/archive/2007/10/01/tip,它的译文请访问:
http://blog.joycode.com/scottgu/archive/2007/10/10/109268.aspx
建一个类文件JSONHelper.cs,代码如下:
JSONHelper.cs
1
using System;
2
using System.Collections.Generic;
3
using System.Text;
4
using System.Web.Script.Serialization;
5
namespace Web.Components
6![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
7
public static class JSONHelper
8![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
9
public static string ToJSON(this object obj)
10![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
11
JavaScriptSerializer serializer = new JavaScriptSerializer();
12
return serializer.Serialize(obj);
13
}
14![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15
public static string ToJSON(this object obj, int recursionDepth)
16![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
17
JavaScriptSerializer serializer = new JavaScriptSerializer();
18
serializer.RecursionLimit = recursionDepth;
19
return serializer.Serialize(obj);
20
}
21
}
22
}
23
(2)利用LINQ读取数据记录,关于LINQ方面的文章参考
Scott Guthrie的
LINQ to SQL系列文章
为了方便ExtJS AJAX方式的调用,这里建一个ASPX页面,起名为:
ProjectBaseInfo.aspx,代码如下:
ProjectBaseInfo.aspx.cs
1
using System;
2
using System.Data;
3
using System.Configuration;
4
using System.Collections;
5
using System.Linq;
6
using System.Web;
7
using System.Web.Security;
8
using System.Web.UI;
9
using System.Web.UI.WebControls;
10
using System.Web.UI.WebControls.WebParts;
11
using System.Web.UI.HtmlControls;
12
using System.Xml.Linq;
13
using BusinessObject.Projects; //dbml文件的引用
14
using System.Data.OracleClient;
15
using Database;
16
using Web.Components;
17
namespace Web.Projects.JsonDataSource
18![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
19
public partial class ProjectBaseInfo : System.Web.UI.Page
20![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
21
protected string strJsonSource=string.Empty;
22
protected void Page_Load(object sender, EventArgs e)
23![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
24
int start=int.Parse(Request.Form["start"]+""); //分页需要limit,start是mysql里用的(或取当页开始的记录标识编号)
25
int limit = int.Parse(Request.Form["limit"] + ""); //或取每页记录数
26
string sort = Request.Form["sort"] + ""; //或取排序方向
27
string dir = Request.Form["dir"] + ""; //或取所要排序的字段名
28
GetJsonSouceString(start,limit,sort,dir);
29
}
30![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
31
private void GetJsonSouceString(int start,int limit,string sort,string dir)
32![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
33
ProjectBaseInfoDataContext db = new ProjectBaseInfoDataContext();
34
var query = from p in db.PROJECT_BASE_INFOs
35![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
select new
{ p.PROJECT_NO, p.PROJECT_NAME, p.PROJECT_DEPT_NO, p.PROJECT_MANAGER, p.PROJECT_CURRENT_STATUS, PROJECT_START_DATE = p.PROJECT_START_DATE + "", PROJECT_FINISH_DATE = p.PROJECT_FINISH_DATE + "", PROJECT_REAL_START_DATE = p.PROJECT_REAL_START_DATE + "", PROJECT_REAL_FINISH_DATE = p.PROJECT_REAL_FINISH_DATE + "", p.PROJECT_ALIAS, p.PROJECT_TYPE, p.PROJECT_LEADER, p.PROJECT_MEMO }; //类似PROJECT_REAL_FINISH_DATE=p.PROJECT_REAL_FINISH_DATE+"的处理了Grid中日期格式显示的问题
36![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
排序字段和排序方向#region 排序字段和排序方向
37
if (sort != "" && dir != "")
38![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
39
switch (sort)
40![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
41
case "PROJECT_NO":
42
if (dir == "ASC")
43![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
44
query = query.OrderBy(p => p.PROJECT_NO);
45
}
46
else
47![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
48
query = query.OrderByDescending(p => p.PROJECT_NO);
49
}
50
break;
51
case "PROJECT_NAME":
52
if (dir == "ASC")
53![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
54
query = query.OrderBy(p => p.PROJECT_NAME);
55
}
56
else
57![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
58
query = query.OrderByDescending(p => p.PROJECT_NAME);
59
}
60
break;
61
case "PROJECT_DEPT_NO":
62
if (dir == "ASC")
63![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
64
query = query.OrderBy(p => p.PROJECT_DEPT_NO);
65
}
66
else
67![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
68
query = query.OrderByDescending(p => p.PROJECT_DEPT_NO);
69
}
70
break;
71
case "PROJECT_MANAGER":
72
if (dir == "ASC")
73![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
74
query = query.OrderBy(p => p.PROJECT_MANAGER);
75
}
76
else
77![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
78
query = query.OrderByDescending(p => p.PROJECT_MANAGER);
79
}
80
break;
81
case "PROJECT_CURRENT_STATUS":
82
if (dir == "ASC")
83![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
84
query = query.OrderBy(p => p.PROJECT_CURRENT_STATUS);
85
}
86
else
87![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
88
query = query.OrderByDescending(p => p.PROJECT_CURRENT_STATUS);
89
}
90
break;
91
case "PROJECT_START_DATE":
92
if (dir == "ASC")
93![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
94
query = query.OrderBy(p => p.PROJECT_START_DATE);
95
}
96
else
97![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
98
query = query.OrderByDescending(p => p.PROJECT_START_DATE);
99
}
100
break;
101
case "PROJECT_FINISH_DATE":
102
if (dir == "ASC")
103![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
104
query = query.OrderBy(p => p.PROJECT_FINISH_DATE);
105
}
106
else
107![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
108
query = query.OrderByDescending(p => p.PROJECT_FINISH_DATE);
109
}
110
break;
111
case "PROJECT_REAL_START_DATE":
112
if (dir == "ASC")
113![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
114
query = query.OrderBy(p => p.PROJECT_REAL_START_DATE);
115
}
116
else
117![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
118
query = query.OrderByDescending(p => p.PROJECT_REAL_START_DATE);
119
}
120
break;
121
case "PROJECT_REAL_FINISH_DATE":
122
if (dir == "ASC")
123![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
124
query = query.OrderBy(p => p.PROJECT_REAL_FINISH_DATE);
125
}
126
else
127![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
128
query = query.OrderByDescending(p => p.PROJECT_REAL_FINISH_DATE);
129
}
130
break;
131
default:
132
break;
133
}
134
}
135
#endregion
136![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
137
int iCount = query.Count(); //所要记录数
138
int PageNum = start / limit; //共有页数
139
int PageSize = limit;
140
query = query.Skip(PageSize * PageNum).Take(PageSize); //当前页记录
141
string JsonSource= query.ToJSON(); //当前页记录转成JSON格式
142
strJsonSource = @"{""totalCount"":"""+iCount+"";
143
strJsonSource = strJsonSource + @""",""data"":" + JsonSource + "}"; //Grid的分页区显示所有记录数增加totalCount信息
144
}
145
}
146
}
147
ProjectBaseInfo.aspx中的代码为:
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeBehind
=
"
ProjectBaseInfo.aspx.cs
"
Inherits
=
"
Web.Projects.JsonDataSource.ProjectBaseInfo
"
%>
<%=
strJsonSource
%>
至此,已完成了取数据源。
2.页面客户端
(1)下载ExtJS库,请访问:
http://extjs.com/。
(2)在你的WEB工程中建一个ExtJS目录。把下载的包里的目录都COPY进来(为了简便起见)。
(3)建一个ProjectLists.html页面,代码如下:
ProjectLists.html
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head runat="server">
4
<title>项目一览表</title>
5
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
6
<link rel="stylesheet" type="text/css" href="../Resources/css/ext-all.css" />
7
<!-- GC -->
8
<!-- LIBS -->
9
<script type="text/javascript" src="../Adapter/ext/ext-base.js"></script>
10
<!-- ENDLIBS -->
11
<script type="text/javascript" src="../Script/ext-all.js"></script>
12![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
<script type="text/javascript" src="../Script/GridForProjectLists.js"></script>
14![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
15
<link rel="stylesheet" type="text/css" href="../CSS/Grid.css" />
16
<link rel="stylesheet" type="text/css" href="../CSS/Forms.css" />
17
<link rel="stylesheet" type="text/css" href="../CSS/Combos.css" />
18
<!-- Common Styles for the Projects -->
19![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<style type="text/css">![](https://www.cnblogs.com/Images/dot.gif)
20
body .x-panel
21![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
22
margin-bottom: 20px;
23
}
24
.icon-grid
25![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
26
background-image: url(../Images/icons/grid.png) !important;
27
}
28
#button-grid .x-panel-body
29![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
30
border: 1px solid #99bbe8;
31
border-top: 0 none;
32
}
33
.add
34![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
35
background-image: url(../Images/icons/add.gif) !important;
36
}
37
.search
38![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
39
background-image: url(../Images/icons/plugin.gif) !important;
40
}
41
.remove
42![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
43
background-image: url(../Images/icons/delete.gif) !important;
44
}
45
.save
46![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
47
background-image: url(../Images/icons/save.gif) !important;
48
}
49
.ext-mb-save
50![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
51
background: transparent url(../Images/download.gif) no-repeat top left;
52
height: 46px;
53
}
54
</style>
55
</head>
56![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
57
<body>
58
</body>
59
</html>
(注:请注意JS引用的路径)
(1)新建GridForProjectLists.js文件(这个才是核心
![](https://www.cnblogs.com/CuteSoft_Client/CuteEditor/images/emteeth.gif)
)
代码如下:
GridForProjectLists.js
1![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
/**//*
2
* Ext JS Library 2.0 Beta 1
3
* Copyright(c) 2006-2007, Ext JS, LLC.
4
* licensing@extjs.com
5
*
6
* http://extjs.com/license
7
*/
8![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
Ext.onReady(function()
{
9
var win;
10
var newwin;
11
Ext.QuickTips.init();
12
// create the Data Store
13![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var ds = new Ext.data.GroupingStore(
{
14
// load using script tags for cross domain, if the data in on the same domain as
15
// this page, an HttpProxy would be better
16![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
proxy: new Ext.data.HttpProxy(
{
17
url: '../Projects/JsonDataSource/ProjectBaseInfo.aspx'
18
}),
19![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
20
// create reader that reads the project records
21![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
reader: new Ext.data.JsonReader(
{
22
root: 'data',
23
totalProperty: 'totalCount'
24
}, [
25![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name:'PROJECT_NO', type:'string'},
26![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name:'PROJECT_NAME', type:'string'},
27![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name:'PROJECT_ALIAS', type:'string'},
28![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name:'PROJECT_DEPT_NO', type:'string'},
29![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name:'PROJECT_MANAGER', type:'string'},
30![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name:'PROJECT_LEADER', type:'string'},
31![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name:'PROJECT_CURRENT_STATUS', type:'string'},
32![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name:'PROJECT_START_DATE', type:'date'},
33![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name:'PROJECT_FINISH_DATE', type:'date'},
34![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name:'PROJECT_REAL_START_DATE', type:'date'},
35![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name:'PROJECT_REAL_FINISH_DATE',type:'date'},
36![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name:'PROJECT_MEMO', type:'string'}
37
]),
38
//groupField:'PROJECT_DEPT_NO',
39
remoteSort: true
40
});
41
ds.setDefaultSort('PROJECT_NAME', 'desc');
42![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
43
// pluggable renders
44![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function renderProject(value, p, record)
{
45
46
return String.format(
47
'<img border=0 src="../Images/icons/application_view_list.png" id="btnView_{0}" style="cursor:hand" alt="浏览"> <a href="ProjectDetail.aspx?ProjectNo={0}" target="_blank"><img border=0 src="../Images/icons/application_view_list.png" style="cursor:hand" alt="编辑"></a> <a href="ProjectDetail.aspx?ProjectNo={0}" target="_blank"><img border=0 src="../Images/icons/cross.gif" style="cursor:hand" alt="删除"></a>',
48
record.data.PROJECT_NO);
49
}
50
51
// the column model has information about grid columns
52
// dataIndex maps the column to the specific data field in
53
// the data store
54
var nm = new Ext.grid.RowNumberer();
55
var sm = new Ext.grid.CheckboxSelectionModel(); // add checkbox column
56
var cm = new Ext.grid.ColumnModel([nm,sm,
57![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{id:'PROJECT_NO',header:"项目编号",dataIndex: 'PROJECT_NO', width: 40, align:'center'},
58![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{header:"项目名称",dataIndex: 'PROJECT_NAME', width: 100,align:'left' },//,renderer: renderProject},
59![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{header:"项目简称",dataIndex: 'PROJECT_ALIAS', width: 50, align:'left'},
60![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{header:"部门",dataIndex: 'PROJECT_DEPT_NO', width: 50, align:'center'},
61![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{header:"项目经理", dataIndex: 'PROJECT_MANAGER', width: 40, align:'center'},
62![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{header:"开发经理", dataIndex: 'PROJECT_LEADER', width: 40, align:'center'},
63![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{header:"当前状态",dataIndex: 'PROJECT_CURRENT_STATUS',width: 40, align:'center'},
64![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{header:"预计开始日期",renderer: Ext.util.Format.dateRenderer('Y-m-d'),dataIndex: 'PROJECT_START_DATE',width: 50, align:'center'},
65![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{header:"预计结束日期",renderer: Ext.util.Format.dateRenderer('Y-m-d'),dataIndex: 'PROJECT_FINISH_DATE',width: 50, align:'center'},
66![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{header:"实际开始日期",renderer: Ext.util.Format.dateRenderer('Y-m-d'),dataIndex: 'PROJECT_REAL_START_DATE',width: 50, align:'center'},
67![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{header:"实际结束日期",renderer: Ext.util.Format.dateRenderer('Y-m-d'),dataIndex: 'PROJECT_REAL_FINISH_DATE',width: 50, align:'center'},
68![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{header:"备注",dataIndex: 'PROJECT_MEMO',width: 50, align:'left'},
69![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{id:'PROJECT_NO',header:"操作",dataIndex: 'PROJECT_NO', width: 60, align:'center',renderer:renderProject,sortable: false}
70
]);
71![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
72
//hide column
73
cm.setHidden(4, !cm.isHidden(4)); //隐藏项目简称列
74
cm.setHidden(7, !cm.isHidden(7)); //隐藏开发经理列
75
cm.setHidden(13, !cm.isHidden(13)); //隐藏备注列
76
// by default columns are sortable
77
cm.defaultSortable = true;
78![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var gdProjects = new Ext.grid.GridPanel(
{
79
frame:true,
80
collapsible: true,
81
animCollapse: false,
82
//el:'projects-grid',
83
width :965,
84
height:530,
85
title:'项目一览表',
86
iconCls: 'icon-grid',
87
renderTo: document.body,
88
store: ds,
89
cm: cm,
90
sm: sm,
91
trackMouseOver:true,
92![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
loadMask:
{msg:'正在加载数据,请稍侯……'},
93
//loadMask: true,
94![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
viewConfig:
{
95
forceFit:true,
96
enableRowBody:true,
97![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
getRowClass : function(record, rowIndex, p, ds)
{
98
return 'x-grid3-row-collapsed';
99
}
100
},
101![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
view: new Ext.grid.GroupingView(
{
102
forceFit:true,
103![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
groupTextTpl: '
{text} (
{[values.rs.length]}条记录)'
104
}),
105![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
bbar: new Ext.PagingToolbar(
{
106
pageSize: 25,
107
store: ds,
108
displayInfo: true,
109![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
displayMsg: '当前显示
{0} -
{1}条记录 /共
{2}条记录',
110
emptyMsg: "无显示数据"
111
}),
112
// inline toolbars
113![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
tbar:[
{
114
id:'btnAdd',
115
text:'新增',
116
tooltip:'新增',
117
iconCls:'add',
118
handler: showAddPanel
119![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}, '-',
{
120
text:'查询',
121
tooltip:'查询',
122
iconCls:'search'
123![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}, '-',
{
124
text:'批量删除',
125
tooltip:'删除',
126
iconCls:'remove',
127
handler:showDelDialog
128
}]
129![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
130
});
131
132
});
展示成果: