【转】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.csusing?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?ONGOSET?QUOTED_IDENTIFIER?ONGOCREATE?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/
