`

【转】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/

分类: ExtJs
分享到:
评论

相关推荐

    ExtJS与.NET结合开发实例-殷良胜

    殷良胜和adyhpq作为主要的贡献者,提供了丰富的示例,帮助开发者理解和掌握这两者的集成技巧。 1. **ExtJS简介**: ExtJS是一个基于JavaScript的开源框架,用于构建富客户端Web应用。它提供了大量的UI组件,如表格...

    ExtJS 自定义树组件 节点的操作 搜索 右键菜单

    功能: 1.实现ExtJS tree 节点右键菜单 实现增删查. 2.实现针对实体数据的动态搜索. 3.代码命名规范,简单易懂. 4.支持IE 9,FF 19.0.2. 5.将文件解压至ext包example任意组件文件夹即可浏览效果.

    给Extjs的GridPanel增加“合计”行

    在EXTJS中,GridPanel是一种常用的组件,用于展示表格数据。在实际应用中,我们经常需要在GridPanel底部显示一行“合计”行,以便对某一列或多列的数据进行求和或其他统计操作。这篇博文“给Extjs的GridPanel增加...

    Extjs应用教程 提高篇

    在“ExtJS应用教程 提高篇”中,我们看到一系列教程,涵盖了从基础到高级的EXTJS使用技巧,特别是针对EXTJS 2.2版本。教程内容包括了如何使用EXTJS组件,如GridPanel和ComboBox,以及如何动态生成数据。 在提高篇的...

    ExtJs GridPanel双击事件获得双击的行

    本篇文章将深入讲解如何在ExtJs GridPanel中实现双击事件,并获取双击的行以及选中的复选框状态。 首先,我们要了解GridPanel的基本结构。GridPanel由Store(数据存储)和ColumnModel(列模型)组成,它们定义了...

    ExtJs grid行 右键菜单的两种方法

    在ExtJs中,创建一个Grid并为其添加右键菜单是常见的需求,特别是在开发富客户端应用时。本篇文章将介绍两种实现ExtJs grid行右键菜单的方法。这两种方法都是基于ExtJs框架的功能,允许用户在点击网格行时显示自定义...

    Extjs入门教程(treePanel和GridPanel)

    在学习过程中,理解ExtJS的MVC(Model-View-Controller)架构至关重要,因为TreePanel和GridPanel都是View部分,它们的数据源(Model)和控制器(Controller)是实现功能的关键。同时,熟悉JSON格式数据的处理也是...

    Extjs中的GridPanel

    通过阅读这篇博客,开发者可以更好地理解如何在 ExtJS 应用中有效地使用 GridPanel,以及如何解决可能出现的挑战。 总结起来,ExtJS 中的 GridPanel 是一个功能强大且灵活的数据展示组件,它为Web应用提供了丰富的...

    Extjs2.02 Gridpanel

    EXTJS GridPanel 是EXTJS库中的核心组件之一,尤其在EXTJS 2.02版本中,它提供了强大的表格展示和交互功能,对于初学者来说极具学习价值。GridPanel不仅能够处理基本的表格操作,如单选、多选、排序、改变列宽等,还...

    ExtJS介绍以及GridPanel

    在本文中,我们将深入探讨ExtJS的核心特性,特别是其GridPanel组件。 首先,ExtJS的核心特性之一是组件化。它将网页元素抽象为可复用的组件,如按钮、表格、窗口等,每个组件都有自己的属性、方法和事件,可以方便...

    ExtJS 表格面板GridPanel完整例子

    ExtJS表格面板(GridPanel)是Sencha Ext JS框架中的一个核心组件,它用于展示大量结构化数据。在本文中,我们将深入探讨如何创建并使用一个完整的ExtJS GridPanel实例,以及与其相关的源码和工具。 首先,让我们...

    ExtJS的GridPanel导出excel文件

    ExtJS的GridPanel导出excel文件,方便快捷易懂!

    Ext做的例子右键菜单设置forward跳转b/s版

    在这个“Ext做的例子右键菜单设置forward跳转b/s版”中,我们将探讨如何利用ExtJS实现一个右键菜单系统,该系统能够支持页面的forward跳转功能,适用于特定的B/S架构(Browser/Server,即浏览器/服务器模式)的页面...

    ExtJs2.0学习系列

    了解如何自定义主题或应用第三方主题,可以使应用具备一致的视觉风格。 十、性能优化 在实际开发中,了解如何优化代码和配置以提高应用程序性能也非常重要。这包括减少HTTP请求、缓存策略、延迟加载等技巧。 通过...

    复选框的且带右键菜单的树代码

    ### 复选框的且带右键菜单的树代码知识点解析 #### 一、概述 本文档介绍了一段实现带有复选框功能以及右键菜单的树形结构代码。该树形结构主要用于展示联系人信息,并支持用户进行一系列操作如搜索、添加、删除等。...

    ExtJs GridPanel延时加载.rar

    在给定的"ExtJs GridPanel延时加载.rar"文件中,主要涉及的核心概念是ExtJs中的GridPanel组件以及延时加载技术。GridPanel是ExtJs中一个非常重要的组件,它用于展示表格数据,而延时加载则是一种优化大量数据处理的...

    ext带右键菜单的树

    在描述中提到的"ext带右键菜单的树"是指在ExtJS中实现的一种交互功能,即在树形控件上通过右键点击来显示一个上下文菜单。这种功能极大地提高了用户与应用程序的交互性,使得操作更加直观和便捷。 在ExtJS中,树形...

    EXTJS_GridPanel_ColumnModel_列的宽度随数据变化而变化

    在博客中提到的"JavaEyeGrid"可能是一个自定义的EXTJS GridPanel实现,或者是作者提供的示例代码包。这个文件可能包含具体的示例代码和实现细节,通过阅读和学习这个文件,我们可以更深入地理解EXTJS GridPanel动态...

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    在EXTJS4中,`ComboBox` 是一个非常常用的组件,它提供了一个下拉选择框的功能。在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时就可以使用 `GridComboBox`。`GridComboBox` 结合了 `...

Global site tag (gtag.js) - Google Analytics