- 浏览: 25378 次
- 性别:
- 来自: 广州
文章分类
最新评论
【转】EXTJS学习系列提高篇:第三篇(转载)作者殷良胜,在GridPanel上单击右键显示菜单的制作
简单介绍:
本示例主要用EXT2.2+vs.2008.net+C#+sql Server 2005 实现在GridPanel上单击右键显示菜单,在单击某个菜单项后弹出一个窗口用于处理具体的操作
功能:
1,生成GridPanel
2,在GridPanel上单击右键显示菜单
3,实现分页
环境:
1,EXT2.2版本
2,vs.net2008+C#
3,sql Server 2005
说明:项目所需要的具体文件以及后台文件都可以在前面的2个例子中下载
对行数据的编辑没有具体实现,仅仅是展示如何 单击右键显示菜单并且弹出相应的窗口,没有对具体的数据后台处理
截图:
1,在某行上点击右键,出现下图所示的菜单
2,在菜单上点某个菜单项后出现下图所示的窗口
下面是源代码
1
,页面文件:Default.aspx
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
Default.aspx.cs
"
Inherits
=
"
GridPanel_Default
"
%>
<!
DOCTYPE html PUBLIC
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
<
html xmlns
=
"
http://www.w3.org/1999/xhtml
"
>
<
head runat
=
"
server
"
>
<
title
>
无标题页
</
title
>
<
link rel
=
"
stylesheet
"
type
=
"
text/css
"
href
=
"
resources/css/ext-all.css
"
/>
<
script type
=
"
text/javascript
"
src
=
"
ExtBase/ext-base.js
"
></
script
>
<
script type
=
"
text/javascript
"
src
=
"
ExtBase/ext-all.js
"
></
script
>
<
script type
=
"
text/javascript
"
src
=
"
ExtBase/ext-lang-zh_CN.js
"
></
script
>
</
head
>
<
body
>
<
form id
=
"
form1
"
runat
=
"
server
"
>
<
div
>
<
div id
=
"
panel_id
"
></
div
>
<
script type
=
"
text/javascript
"
>
var grid;
function DataGrid()
{
var cm
=
new
Ext.grid.ColumnModel
([
{header:
"
编号
"
, width:
120
, dataIndex:
'
ID
'
, sortable:
true
}
,
{header:
"
标题
"
, width:
180
, dataIndex:
'
Title
'
, sortable:
true
}
,
{header:
"
作者
"
, width:
115
, dataIndex:
'
Author
'
, sortable:
true
}
,
{header:
"
来源
"
, width:
100
, dataIndex:
'
Source
'
, sortable:
true
}
,
{header:
"
日期
"
, width:
100
, dataIndex:
'
PostDate
'
, sortable:
true
}
]);
var titleInfo
=
"
编辑数据
"
;
var fields
=
[
{name:
"
ID
"
}
,
{name:
"
Title
"
}
,
{name:
"
Author
"
}
,
{name:
"
Source
"
}
,
{name:
"
PostDate
"
}
];
var newStore
=
new
Ext.data.Store
(
{
proxy:
new
Ext.data.HttpProxy(
{url:
"
JsonData.aspx?param=initData
"
}
),
reader:
new
Ext.data.JsonReader(
{totalProperty:
"
totalPorperty
"
,root:
"
result
"
,fields:fields}
)
}
);
newStore.load(
{
params
:
{start:
0
,limit:
16
}
}
);
var pagingBar
=
new
Ext.PagingToolbar
(
{
displayInfo:
true
,
emptyMsg:
"
没有数据显示
"
,
displayMsg:
"
显示从{0}条数据到{1}条数据,共{2}条数据
"
,
store:newStore,
pageSize:
16
}
);
this
.gridPanel
=
new
Ext.grid.GridPanel
(
{
cm:cm,
id:
"
grid_panel
"
,
title:titleInfo,
store:newStore,
frame:
false
,
border:
true
,
layout:
"
fit
"
,
pageSize:
16
,
autoWidth:
true
,
height:
400
,
clicksToEdit:
1
,
viewConfig:
{forceFit:
true
}
,
bbar:pagingBar
}
);
this
.gridPanel.on(
"
rowcontextmenu
"
,open_rowcontextmenu);
}
function open_rowcontextmenu(grid,rowIndex,e)
{
e.preventDefault();
var menus
=
new
Ext.menu.Menu
([
{
xtype:
"
button
"
,text:
"
编辑
"
,pressed:
true
,icon:
"
imgMenus/3.png
"
,
handler:function()
{Edit(grid,rowIndex,e ,
"
编辑
"
);}
}
,
{
xtype:
"
button
"
,text:
"
删除
"
,pressed:
true
,icon:
"
imgMenus/3.png
"
,
handler:function()
{Edit(grid,rowIndex,e ,
"
删除
"
);}
}
]);
menus.showAt(e.getPoint());
}
function Edit(grid,rowIndex,e,titleInfo)
{
var record
=
grid.getStore().getAt(rowIndex);
var currID
=
record.data.ID;
var currAuthor
=
record.data.Author;
var currTitle
=
record.data.Title;
var currSource
=
record.data.Source;
var currPostDate
=
record.data.PostDate;
var p
=
new
Ext.FormPanel
(
{
frame:
true
,labelWidth:
36
,
items:
[
{xtype:
"
hidden
"
,id:
"
ID
"
,width:
201
,value:currID}
,
{xtype:
"
textfield
"
,fieldLabel:
"
标题
"
,id:
"
Title
"
,width:
201
,value:currTitle}
,
{xtype:
"
textfield
"
,fieldLabel:
"
作者
"
,id:
"
Author
"
,width:
200
,value:currAuthor}
,
{xtype:
"
textfield
"
,fieldLabel:
"
来源
"
,id:
"
Source
"
,width:
201
,value:currSource}
,
{xtype:
"
datefield
"
,fieldLabel:
"
日期
"
,id:
"
PostDate
"
,width:
201
,value:currPostDate,format:
"
Y年m月d日
"
}
]
}
);
var win
=
new
Ext.Window
(
{
title:titleInfo
+
"
窗口
"
,autoHeight:
true
,width:
300
,resizable:
false
,buttonAlign:
"
center
"
, modal:
true
,
//
height:300,
items:[p],
bbar:
[
{xtype:
"
button
"
,text:
"
确定
"
+
titleInfo,handler:function()
{Edit_Sub(win,titleInfo);}
}
,
''
,
''
,
{xtype:
"
button
"
,text:
"
关闭
"
,handler:function()
{win.destroy();}
}
]
}
);
win.show();
}
function Edit_Sub(winParam,titleInfo)
{
var currID
=
Ext.getCmp(
"
ID
"
).getValue();
winParam.destroy();
if
(titleInfo
==
"
删除
"
)
{
Ext.Msg.alert(
"
消息提示
"
,
"
删除成功
"
);
//
具体删除代码自己实现
}
else
{
Ext.Msg.alert(
"
消息提示
"
,
"
编辑成功
"
);
//
具体修改代码自己实现
}
}
function MakePanel(obj)
{
this
.panel_def
=
new
Ext.Panel
(
{
layout:
"
fit
"
,
border:
true
,
frame:
true
,
title:
"
数据浏览
"
,
autoWidth:
true
,
height:
500
,
id:
"
Viewport_ID
"
,
renderTo:
"
panel_id
"
,
items:[obj.gridPanel]
}
);
}
function loader()
{
Ext.QuickTips.init();
grid
=
new
DataGrid();
MakePanel(grid);
}
Ext.onReady(loader);
</
script
>
</
div
>
</
form
>
</
body
>
</
html
>
2
,后台cs文件:JsonData.aspx.cs
using
Newtonsoft.Json;
public
partial
class
GridPanel_JsonData : System.Web.UI.Page
{
protected
void
Page_Load(
object
sender, EventArgs e)
{
分页参数
string
param
=
Convert.ToString(Request[
"
param
"
]);
if
(param
==
"
initData
"
)
{
Bind_Data(field, asc_desc, pagesize, start,
"
ceshitwo
"
);
}
}
private
void
Bind_Data(
string
field,
string
asc_desc,
int
pagesize,
int
start,
string
tableName)
{
DataSet ds
=
Business.GetPagingData(field, asc_desc, pagesize, start, tableName);
if
(ds
!=
null
&&
ds.Tables[
0
].Rows.Count
>
0
)
{
GetJsonData(ds);
}
else
{
Response.Write(
""
);
}
}
private
void
GetJsonData(DataSet ds)
{
List
<
Hashtable
>
hashList
=
new
List
<
Hashtable
>
();
for
(
int
i
=
0
; i
<
ds.Tables[
0
].Rows.Count; i
++
)
{
DataRow row
=
ds.Tables[
0
].Rows[i]
as
DataRow;
Hashtable ht
=
new
Hashtable();
foreach
(DataColumn col
in
ds.Tables[
0
].Columns)
{
ht.Add(col.ColumnName, row[col.ColumnName]);
}
hashList.Add(ht);
}
int
?
count
=
Access.GetCount(
"
Select count(*) from ceshitwo
"
);
string
json
=
"
{totalPorperty:
"
+
count
+
"
,result:
"
+
JavaScriptConvert.SerializeObject(hashList)
+
"
}
"
;
Response.Write(json);
}
}
<
三
>
分页功能单独实现
public
class
Business
{
public
static
DataSet GetPagingData(
string
field,
string
asc_desc,
int
pagesize,
int
start,
string
tableName)
{
string
sql
=
"
WITH MOVIES AS (
"
+
"
SELECT ROW_NUMBER() OVER
"
+
"
(ORDER BY
"
+
field
+
"
"
+
asc_desc
+
"
) AS Row,
"
+
"
*
"
+
"
FROM
"
+
tableName
+
"
)
"
+
"
SELECT *
"
+
"
FROM MOVIES
"
+
"
WHERE Row between (@start-1)* @pagesize+1 and @start*@pagesize
"
;
SqlParameter[] prams
=
{
new
SqlParameter(
"
@start
"
,start),
new
SqlParameter(
"
@pagesize
"
,pagesize)
}
;
return
Access.GetDataSet(sql, prams);
}
}
<
四
>
数据库访问层:
public
class
Access
{
public
Access()
{ }
public
static
string
connstring
=
""
;
private
static
void
CreateCommand(SqlConnection conn, SqlCommand cmd,
string
cmdText,
params
SqlParameter[] prams)
{
conn.ConnectionString
=
Access.connstring;
if
(conn.State
==
ConnectionState.Closed)
conn.Open();
cmd.Connection
=
conn;
cmd.CommandText
=
cmdText;
if
(prams
!=
null
)
{
foreach
(SqlParameter p
in
prams)
cmd.Parameters.Add(p);
}
}
public
static
DataSet GetDataSet(
string
cmdText)
{
return
GetDataSet(cmdText,
null
);
}
public
static
DataSet GetDataSet(
string
cmdText,
params
SqlParameter[] prams)
{
using
(SqlConnection conn
=
new
SqlConnection())
{
SqlCommand cmd
=
new
SqlCommand();
CreateCommand(conn, cmd, cmdText, prams);
DataSet ds
=
new
DataSet();
SqlDataAdapter da
=
new
SqlDataAdapter(cmd);
da.Fill(ds);
cmd.Parameters.Clear();
return
ds;
}
}
public
static
int
?
GetCount(
string
cmdText)
{
return
GetCount(cmdText,
null
);
}
public
static
int
?
GetCount(
string
cmdText,
params
SqlParameter[] prams)
{
using
(SqlConnection conn
=
new
SqlConnection())
{
SqlCommand cmd
=
new
SqlCommand();
CreateCommand(conn, cmd, cmdText, prams);
int
?
count;
count
=
Convert.ToInt32( cmd.ExecuteScalar() );
cmd.Parameters.Clear();
return
count;
}
}
}
说明:数据表可以使用以下语句生成即可
USE [Test]
GO
/*
***** 对象: Table [dbo].[ceshitwo] 脚本日期: 08/26/2008 13:04:59 *****
*/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[ceshitwo](
[ID] [
int
] IDENTITY(
1
,
1
) NOT NULL,
[Title] [nvarchar](
50
) COLLATE Chinese_PRC_CI_AS NULL,
[Author] [nvarchar](
50
) COLLATE Chinese_PRC_CI_AS NULL,
[Source] [nvarchar](
50
) COLLATE Chinese_PRC_CI_AS NULL,
[PostDate] [datetime] NULL CONSTRAINT [DF_ceshitwo_PostDate] DEFAULT (getdate()),
CONSTRAINT [PK_ceshitwo] PRIMARY KEY CLUSTERED
(
[ID] ASC
)WITH (IGNORE_DUP_KEY
=
OFF) ON [PRIMARY]
) ON [PRIMARY]
如果标题未标有<转载、转>等字则属于作者原创,欢迎转载,其版权归作者和博客园共有。
作 者:温景良
文章出处:http://wenjl520.cnblogs.com/
或 http://www.cnblogs.com/
相关推荐
功能: 1.实现ExtJS tree 节点右键菜单 实现增删查. 2.实现针对实体数据的动态搜索. 3.代码命名规范,简单易懂. 4.支持IE 9,FF 19.0.2. 5.将文件解压至ext包example任意组件文件夹即可浏览效果.
ExtJS与.NET结合开发实例 把从网上找的有关ExtJS与.NET结合开发实例进行了打包,主要是殷良胜和adyhpq的例子。
ExtJs GridPanel双击事件获得双击的行,双击行可以选中前面的checkbox,并获得行号
ExtJS的GridPanel导出excel文件,方便快捷易懂!
ExtJs2.0学习系列ExtJs2.0学习系列
6. ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇) 7. ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇) 8. ExtJs2.0学习系列(8)--Ext.FormPanel之第五式(综合篇) 9. ExtJs2.0学习系列(9)--...
本人自己写的Extjs入门教程,上面实现了treePanel和GridPanel的集成和交互。
22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) 69 26. extJs 2.0学习笔记(Element.js篇) ...
从网上整理的extjs 提高篇,doc文档,有目录,从第一篇到三十四篇,有图片,效果好,方便打印,绝对是extjs爱好者的最爱.
extjs资料以及extjs学习指南,extjs资料以及extjs学习指南
EXTJS4.2官网上的tabpanel的右键关闭当前页,关闭其它,关闭全部有一点小BUG。 修改TabCloseMenu.js文件的一下函数。 压缩文件里面就是修改过后的TabCloseMenu.js文件,只要替换当前4.2的那个文件就可以使用了!
ExtJs2.0学习系列大全 共15个word文档,大部分介绍都在里面了
ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局
关于ext学习的资料,有些例子 ExtJs2.0学习系列.CHM
此文件用于项目首页内容,使用了ExtJs中的GridPanel
一共3个文件: index.html: getData.asp data.mdb 前台采用ExtJs 2.2.1编写(由于库文件比较大,考虑到大家本机都有了,所以在此没有上传,大家直接改一下路径即可),后台采用asp+access编写(看文件名就知道了). 本...
ExtJS4_官方指南:MVC架构_简体中文版
ExtJs grid行 右键菜单的两种方法,需要用extjs制作右键菜单的朋友可以参考下。
22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) 69 26. extJs 2.0学习笔记(Element.js篇) ...