- 浏览: 26424 次
- 性别:
- 来自: 广州
文章分类
最新评论
【转】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/
相关推荐
殷良胜和adyhpq作为主要的贡献者,提供了丰富的示例,帮助开发者理解和掌握这两者的集成技巧。 1. **ExtJS简介**: ExtJS是一个基于JavaScript的开源框架,用于构建富客户端Web应用。它提供了大量的UI组件,如表格...
功能: 1.实现ExtJS tree 节点右键菜单 实现增删查. 2.实现针对实体数据的动态搜索. 3.代码命名规范,简单易懂. 4.支持IE 9,FF 19.0.2. 5.将文件解压至ext包example任意组件文件夹即可浏览效果.
在EXTJS中,GridPanel是一种常用的组件,用于展示表格数据。在实际应用中,我们经常需要在GridPanel底部显示一行“合计”行,以便对某一列或多列的数据进行求和或其他统计操作。这篇博文“给Extjs的GridPanel增加...
在“ExtJS应用教程 提高篇”中,我们看到一系列教程,涵盖了从基础到高级的EXTJS使用技巧,特别是针对EXTJS 2.2版本。教程内容包括了如何使用EXTJS组件,如GridPanel和ComboBox,以及如何动态生成数据。 在提高篇的...
本篇文章将深入讲解如何在ExtJs GridPanel中实现双击事件,并获取双击的行以及选中的复选框状态。 首先,我们要了解GridPanel的基本结构。GridPanel由Store(数据存储)和ColumnModel(列模型)组成,它们定义了...
在ExtJs中,创建一个Grid并为其添加右键菜单是常见的需求,特别是在开发富客户端应用时。本篇文章将介绍两种实现ExtJs grid行右键菜单的方法。这两种方法都是基于ExtJs框架的功能,允许用户在点击网格行时显示自定义...
在学习过程中,理解ExtJS的MVC(Model-View-Controller)架构至关重要,因为TreePanel和GridPanel都是View部分,它们的数据源(Model)和控制器(Controller)是实现功能的关键。同时,熟悉JSON格式数据的处理也是...
通过阅读这篇博客,开发者可以更好地理解如何在 ExtJS 应用中有效地使用 GridPanel,以及如何解决可能出现的挑战。 总结起来,ExtJS 中的 GridPanel 是一个功能强大且灵活的数据展示组件,它为Web应用提供了丰富的...
EXTJS GridPanel 是EXTJS库中的核心组件之一,尤其在EXTJS 2.02版本中,它提供了强大的表格展示和交互功能,对于初学者来说极具学习价值。GridPanel不仅能够处理基本的表格操作,如单选、多选、排序、改变列宽等,还...
在本文中,我们将深入探讨ExtJS的核心特性,特别是其GridPanel组件。 首先,ExtJS的核心特性之一是组件化。它将网页元素抽象为可复用的组件,如按钮、表格、窗口等,每个组件都有自己的属性、方法和事件,可以方便...
ExtJS表格面板(GridPanel)是Sencha Ext JS框架中的一个核心组件,它用于展示大量结构化数据。在本文中,我们将深入探讨如何创建并使用一个完整的ExtJS GridPanel实例,以及与其相关的源码和工具。 首先,让我们...
ExtJS的GridPanel导出excel文件,方便快捷易懂!
在这个“Ext做的例子右键菜单设置forward跳转b/s版”中,我们将探讨如何利用ExtJS实现一个右键菜单系统,该系统能够支持页面的forward跳转功能,适用于特定的B/S架构(Browser/Server,即浏览器/服务器模式)的页面...
了解如何自定义主题或应用第三方主题,可以使应用具备一致的视觉风格。 十、性能优化 在实际开发中,了解如何优化代码和配置以提高应用程序性能也非常重要。这包括减少HTTP请求、缓存策略、延迟加载等技巧。 通过...
### 复选框的且带右键菜单的树代码知识点解析 #### 一、概述 本文档介绍了一段实现带有复选框功能以及右键菜单的树形结构代码。该树形结构主要用于展示联系人信息,并支持用户进行一系列操作如搜索、添加、删除等。...
在给定的"ExtJs GridPanel延时加载.rar"文件中,主要涉及的核心概念是ExtJs中的GridPanel组件以及延时加载技术。GridPanel是ExtJs中一个非常重要的组件,它用于展示表格数据,而延时加载则是一种优化大量数据处理的...
在描述中提到的"ext带右键菜单的树"是指在ExtJS中实现的一种交互功能,即在树形控件上通过右键点击来显示一个上下文菜单。这种功能极大地提高了用户与应用程序的交互性,使得操作更加直观和便捷。 在ExtJS中,树形...
在博客中提到的"JavaEyeGrid"可能是一个自定义的EXTJS GridPanel实现,或者是作者提供的示例代码包。这个文件可能包含具体的示例代码和实现细节,通过阅读和学习这个文件,我们可以更深入地理解EXTJS GridPanel动态...
在EXTJS4中,`ComboBox` 是一个非常常用的组件,它提供了一个下拉选择框的功能。在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时就可以使用 `GridComboBox`。`GridComboBox` 结合了 `...