gridPanel事件--初学ext.net框架

最新推荐文章于 2017-04-08 17:31:20 发布
最新推荐文章于 2017-04-08 17:31:20 发布
阅读量1.7k 收藏
点赞数
分类专栏： EXT.NET

http://blog.csdn.net/alisa525/article/details/8081092

1、行双击事件

首先设置选择方式为RowSelectionModel单行选中

[html] view plain copy print ?
  1. <SelectionModel>  
  2.      <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">  
  3.      </ext:RowSelectionModel>  
  4. </SelectionModel>  
 <SelectionModel>
      <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
      </ext:RowSelectionModel>
 </SelectionModel>

 

 

1.1   注册行双击事件，响应代码写在前台js中

[html] view plain copy print ?
  1. <Listeners>  
  2.        <RowDblClick Handler="return rowDbClick(#{GridPanel1},#{Store1})" />  
  3. </Listeners>  
  <Listeners>
         <RowDblClick Handler="return rowDbClick(#{GridPanel1},#{Store1})" />
  </Listeners>

 

前台js代码：

[javascript] view plain copy print ?
  1. <script type="text/javascript">  
  2.           function FnRowDbClick(paramgrid, paramstore) {  
  3.               var row = paramgrid.getSelectionModel().getSelections(); //选择行的个数  
  4.               if (row == null || row == undefined || row.length == 0) {  
  5.               }  
  6.               paramID = row[0].data.员工编号.toString();  
  7.               paraName = row[0].data.姓名.toString();  
  8.               this.Window1.setTitle("[" + paraName + "] 迟发日期明细表");  
  9.              // this.Window1.Title("[" + paraName + "] 迟发日期明细表"); 错误  
  10.                 this.Window1.show();  
  11.                
  12.           }  
  13.      </script>  
 <script type="text/javascript">
           function FnRowDbClick(paramgrid, paramstore) {
               var row = paramgrid.getSelectionModel().getSelections(); //选择行的个数
               if (row == null || row == undefined || row.length == 0) {
               }
               paramID = row[0].data.员工编号.toString();
               paraName = row[0].data.姓名.toString();
               this.Window1.setTitle("[" + paraName + "] 迟发日期明细表");
              // this.Window1.Title("[" + paraName + "] 迟发日期明细表"); 错误
                 this.Window1.show();
              
           }
      </script>

 


 1.2 注册行双击事件，响应代码写在后台cs文件中

 <DirectEvents>
             <RowDblClick OnEvent="Row_DblClick" > </RowDblClick>
< /DirectEvents>

后台代码：

protected void OnRow_DblClick(object sender, DirectEventArgs e)

{

this.Window1.Title = "未发日期明细表";

this.Window1.Show();

}

 1.3 定义带参数的行双击事件

       注册事件

[html] view plain copy print ?
  1. <DirectEvents>  
  2.     <RowDblClick OnEvent="Row_DblClick" >  
  3.        <ExtraParams>  
  4.             <ext:Parameter Name="ID" Value="(GridPanel1.getSelectionModel().getSelections())[0].data.员工编号.toString()" Mode="Raw" />  
  5.              <ext:Parameter Name="EmployName" Value="(GridPanel1.getSelectionModel().getSelections())[0].data.姓名.toString()" Mode="Raw" />  
  6.              <ext:Parameter Name="Name" Value="(GridPanel1.getSelectionModel().getSelections())[0].data" Mode="Raw" />  
  7.              <%--   <ext:Parameter Name="Values" Value="Ext.encode(#{GridPanel1}.getRowsValues())" Mode="Raw" />--%>  
  8.               <ext:Parameter Name="Values" Value="Ext.encode(#{GridPanel1}.getRowsValues({selectedOnly:true}))" Mode="Raw" />  
  9.        </ExtraParams>                      
  10.     </RowDblClick>  
  11. </DirectEvents>  
 <DirectEvents>
     <RowDblClick OnEvent="Row_DblClick" >
        <ExtraParams>
             <ext:Parameter Name="ID" Value="(GridPanel1.getSelectionModel().getSelections())[0].data.员工编号.toString()" Mode="Raw" />
              <ext:Parameter Name="EmployName" Value="(GridPanel1.getSelectionModel().getSelections())[0].data.姓名.toString()" Mode="Raw" />
              <ext:Parameter Name="Name" Value="(GridPanel1.getSelectionModel().getSelections())[0].data" Mode="Raw" />
              <%--   <ext:Parameter Name="Values" Value="Ext.encode(#{GridPanel1}.getRowsValues())" Mode="Raw" />--%>
               <ext:Parameter Name="Values" Value="Ext.encode(#{GridPanel1}.getRowsValues({selectedOnly:true}))" Mode="Raw" />
        </ExtraParams>                    
     </RowDblClick>
 </DirectEvents>

 

 

后台代码：

[csharp] view plain copy print ?
  1. protected void Row_DblClick(object sender, DirectEventArgs e)  //  
  2. {  
  3.            string json = e.ExtraParams["Values"];  
  4.            string Key;  
  5.            Dictionary<string, string>[] dic = JSON.Deserialize<Dictionary<string, string>[]>(json);  
  6.            if (dic.Length > 0)   //选择当行时，获取选择行的数据  
  7.            {  
  8.                string ID1 = dic[0]["员工编号"].ToString();  
  9.                string Name1 = dic[0]["姓名"].ToString();  
  10.                string Out = dic[0]["出差总天数"].ToString();  
  11.                string Out2 = dic[0]["出差地点总数"].ToString();  
  12.            }  
  13.            else  //选择多行时，获取选择行的数据  
  14.            {  
  15.                foreach (Dictionary<string, string> row in dic)  
  16.                {  
  17.                    foreach (KeyValuePair<string, string> keyValuePair in row)  
  18.                    {  
  19.                        Key = keyValuePair.Key;  
  20.                        if (Key == "员工编号")  
  21.                        {  
  22.                            string ID = keyValuePair.Value;  
  23.                            continue;  
  24.                        }  
  25.                        else if (Key == "姓名")  
  26.                        {  
  27.                            string Name = keyValuePair.Value;  
  28.                            continue;  
  29.                        }  
  30.                    }  
  31.                }  
  32.            }  
  33. }  
 protected void Row_DblClick(object sender, DirectEventArgs e)  //
 {
            string json = e.ExtraParams["Values"];
            string Key;
            Dictionary<string, string>[] dic = JSON.Deserialize<Dictionary<string, string>[]>(json);
            if (dic.Length > 0)   //选择当行时，获取选择行的数据
            {
                string ID1 = dic[0]["员工编号"].ToString();
                string Name1 = dic[0]["姓名"].ToString();
                string Out = dic[0]["出差总天数"].ToString();
                string Out2 = dic[0]["出差地点总数"].ToString();
            }
            else  //选择多行时，获取选择行的数据
            {
                foreach (Dictionary<string, string> row in dic)
                {
                    foreach (KeyValuePair<string, string> keyValuePair in row)
                    {
                        Key = keyValuePair.Key;
                        if (Key == "员工编号")
                        {
                            string ID = keyValuePair.Value;
                            continue;
                        }
                        else if (Key == "姓名")
                        {
                            string Name = keyValuePair.Value;
                            continue;
                        }
                    }
                }
            }
 }

 

 2、单元格命令事件，cell command（ImageCommand），自定义事件参数

在列中定义ImageCommand

[html] view plain copy print ?
  1.  <ext:Column Header="未发次数" DataIndex="未发次数" Width="200">  
  2.      <Commands>  
  3.            <ext:ImageCommand CommandName="query" Icon="ApplicationViewList" Text="查看">  
  4.                <ToolTip Text="未发日期列表" />  
  5.            </ext:ImageCommand>  
  6.     </Commands>   
  7. </ext:Column>  
 <ext:Column Header="未发次数" DataIndex="未发次数" Width="200">
     <Commands>
           <ext:ImageCommand CommandName="query" Icon="ApplicationViewList" Text="查看">
               <ToolTip Text="未发日期列表" />
           </ext:ImageCommand>
    </Commands> 
</ext:Column>

 

2.1  定自定事件及事件参数，后台响应事件

[html] view plain copy print ?
  1. <DirectEvents>  
  2.     <Command OnEvent="OnCell_Click">  
  3.         <ext:Parameter Name="colName" Value="this.getColumnModel().getDataIndex(colIndex)" Mode="Raw" />  
  4.         </ExtraParams>  
  5.         <ExtraParams>  
  6.         <ext:Parameter Name="ID" Value="record.data.编号" Mode="Raw" />  
  7.         </ExtraParams>  
  8.         <ExtraParams>  
  9.         <ext:Parameter Name="Name" Value="record.data.姓名" Mode="Raw" />  
  10.         </ExtraParams>                                    
  11.      </Command>   
  12. </DirectEvents>  
 <DirectEvents>
     <Command OnEvent="OnCell_Click">
         <ext:Parameter Name="colName" Value="this.getColumnModel().getDataIndex(colIndex)" Mode="Raw" />
         </ExtraParams>
         <ExtraParams>
         <ext:Parameter Name="ID" Value="record.data.编号" Mode="Raw" />
         </ExtraParams>
         <ExtraParams>
         <ext:Parameter Name="Name" Value="record.data.姓名" Mode="Raw" />
         </ExtraParams>                                  
      </Command> 
 </DirectEvents>

 

 定义后台响应代码：

[csharp] view plain copy print ?
  1. protected void OnCell_Click(object sender, DirectEventArgs e)  
  2. {  
  3.             string m_No = e.ExtraParams["ID"].ToString();  
  4.             string paraName = e.ExtraParams["Name"].ToString();  
  5.             string paraColName = e.ExtraParams["colName"].ToString();      
  6.             if(paraColName == "未发次数")  
  7.             {  
  8.                     this.Window1.Title = "[" + paraName + "] 未发日期明细表";  
  9.                     InfoBindNoSendDay();  
  10.                     this.Window1.Show();  
  11.             }  
  12.             else  if(paraColName == "迟发次数")  
  13.             {  
  14.                    this.Window2.Title = "[" + paraName + "] 迟发日期明细表";  
  15.                    InfoBindDelaySendDay();  
  16.                    this.Window2.Show();  
  17.             }  
  18.                          
  19. }  
protected void OnCell_Click(object sender, DirectEventArgs e)
{
            string m_No = e.ExtraParams["ID"].ToString();
            string paraName = e.ExtraParams["Name"].ToString();
            string paraColName = e.ExtraParams["colName"].ToString();    
            if(paraColName == "未发次数")
            {
                    this.Window1.Title = "[" + paraName + "] 未发日期明细表";
                    InfoBindNoSendDay();
                    this.Window1.Show();
            }
            else  if(paraColName == "迟发次数")
            {
                   this.Window2.Title = "[" + paraName + "] 迟发日期明细表";
                   InfoBindDelaySendDay();
                   this.Window2.Show();
            }
                       
}

 

 

2.2  定义事件，前台js响应事件

[html] view plain copy print ?
  1. <Listeners>  
  2.      <Command Handler="cellClick(record.data,this.getColumnModel().getDataIndex(colIndex))" />  
  3. </Listeners>  
<Listeners>
     <Command Handler="cellClick(record.data,this.getColumnModel().getDataIndex(colIndex))" />
</Listeners>

 

js代码

[javascript] view plain copy print ?
  1. <script language="javascript" type="text/javascript">  
  2.       function cellClick(paradata,paraCol) {  
  3.            paramID = paradata.员工编号.toString();  
  4.            paraName = paradata.姓名.toString();  
  5.            if (paraCol == "未发次数") {  
  6.                this.Window1.setTitle = "[" + paraName + "] 未发日期明细表";  
  7.                //this.Window1.Title="[" + paraName + "] 迟发日期明细表";   // 不能这么写，没有效果                                    this.Window1.reload();  
  8.                this.Window1.show();  
  9.            }  
  10.            else if (paraCol == "迟发次数") {  
  11.                this.Window1.setTitle = "[" + paraName + "] 迟发日期明细表";  
  12.                this.Window1.show();  
  13.            }  
  14.        }  
  15. </script>  
<script language="javascript" type="text/javascript">
      function cellClick(paradata,paraCol) {
           paramID = paradata.员工编号.toString();
           paraName = paradata.姓名.toString();
           if (paraCol == "未发次数") {
               this.Window1.setTitle = "[" + paraName + "] 未发日期明细表";
               //this.Window1.Title="[" + paraName + "] 迟发日期明细表";   // 不能这么写，没有效果                                    this.Window1.reload();
               this.Window1.show();
           }
           else if (paraCol == "迟发次数") {
               this.Window1.setTitle = "[" + paraName + "] 迟发日期明细表";
               this.Window1.show();
           }
       }
</script>

 


 

 3、单元格选中事件 定义行选中模式为单元格选中模式，

定义选中事件

[html] view plain copy print ?
  1. <SelectionModel>  
  2.      <ext:CellSelectionModel runat="server">  
  3.          <DirectEvents>  
  4.          <CellSelect OnEvent="Cell_Click" />                          
  5.          </DirectEvents>  
  6.      </ext:CellSelectionModel>  
  7. </SelectionModel>  
<SelectionModel>
     <ext:CellSelectionModel runat="server">
         <DirectEvents>
         <CellSelect OnEvent="Cell_Click" />                        
         </DirectEvents>
     </ext:CellSelectionModel>
</SelectionModel>

 

 

定义事件响应代码(可写在后台，也可以写在js中，注意要有runat="server")：

[javascript] view plain copy print ?
  1. <script runat="server">  
  2.   protected void Cell_Click(object sender, DirectEventArgs e)  
  3.   {  
  4.         CellSelectionModel sm = this.GridPanel1.SelectionModel.Primary as CellSelectionModel;  
  5.         this.Label1.Html = string.Format("RecordID: {0}<br />Name: {1}<br />Value: {2}<br />Row: {3}<br />Column: {4}",   
  6.                            sm.SelectedCell.RecordID, sm.SelectedCell.Name,   
  7.                            sm.SelectedCell.Value, sm.SelectedCell.RowIndex.ToString(), sm.SelectedCell.ColIndex.ToString());  
  8.   }  
  9. </script>  
<script runat="server">
  protected void Cell_Click(object sender, DirectEventArgs e)
  {
        CellSelectionModel sm = this.GridPanel1.SelectionModel.Primary as CellSelectionModel;
        this.Label1.Html = string.Format("RecordID: {0}<br />Name: {1}<br />Value: {2}<br />Row: {3}<br />Column: {4}", 
                           sm.SelectedCell.RecordID, sm.SelectedCell.Name, 
                           sm.SelectedCell.Value, sm.SelectedCell.RowIndex.ToString(), sm.SelectedCell.ColIndex.ToString());
  }
</script>

 


 

 4、前台js事件与后台事件的执行顺序

       在两种事件都定义的时候，默认情况下是先执行js事件，然后执行后台事件

例如：

[html] view plain copy print ?
  1. <ext:Button Width="50" ID="ButFrist"  icon="ArrowUp" runat="server" Text="上一月" StandOut="true"   
  2.      style="padding:5px;">  
  3.      <DirectEvents>  
  4.             <Click OnEvent="btn_Click" ></Click>  
  5.      </DirectEvents>  
  6.                                                
  7.      <Listeners>    
  8.              <Click Handler="selectFrist();" />  
  9.      </Listeners>  
  10. </ext:Button>  
<ext:Button Width="50" ID="ButFrist"  icon="ArrowUp" runat="server" Text="上一月" StandOut="true" 
     style="padding:5px;">
     <DirectEvents>
            <Click OnEvent="btn_Click" ></Click>
     </DirectEvents>
                                             
     <Listeners>  
             <Click Handler="selectFrist();" />
     </Listeners>
</ext:Button>

 


默认先执行js代码

[javascript] view plain copy print ?
  1. <script type="text/javascript">  
  2.   
  3.           function selectFrist() {  
  4.               var t = ComboBox1.getValue();  
  5.               var i = ComboBox1.getSelectedIndex();  
  6.               if (i!=-1 && (i - 1) >= 0) {  
  7.                   ComboBox1.selectByIndex(i - 1);  
  8.                   GridPanel1.reload();  
  9.               }  
  10.               else {  
  11.                   Ext.Msg.alert("提示", "已到达起始月份！");  
  12.                   return false;  
  13.               }  
  14.               return true;  
  15.            }  
  16.   
  17.                        
  18.       </script>  
 <script type="text/javascript">

           function selectFrist() {
               var t = ComboBox1.getValue();
               var i = ComboBox1.getSelectedIndex();
               if (i!=-1 && (i - 1) >= 0) {
                   ComboBox1.selectByIndex(i - 1);
                   GridPanel1.reload();
               }
               else {
                   Ext.Msg.alert("提示", "已到达起始月份！");
                   return false;
               }
               return true;
            }

                      
       </script>

 


后执行cs代码：

 protected void btn_Click(object sender, DirectEventArgs e)
 {
           ComboBox1.Text = string.Format("{0:yyyy年M月}", Convert.ToDateTime(ComboBox1.Text.ToString()).AddMonths(-1));
 }

 

 如果要先执行后台代码后执行js代码，则定义事件时加一个参数delay="50"   ,设置滞后时间

[html] view plain copy print ?
  1.  <ext:Button Width="50" ID="ButFrist"  icon="ArrowUp" runat="server" Text="上一月" StandOut="true"   
  2.       style="padding:5px;">  
  3.       <DirectEvents>  
  4.           <Click OnEvent="btn_Click" ></Click>  
  5.       </DirectEvents>  
  6.                                                
  7.       <Listeners>    
  8.          <Click Handler="selectFrist();" Delay="50" />  
  9.       </Listeners>  
  10. </ext:Button>  
 <ext:Button Width="50" ID="ButFrist"  icon="ArrowUp" runat="server" Text="上一月" StandOut="true" 
      style="padding:5px;">
      <DirectEvents>
          <Click OnEvent="btn_Click" ></Click>
      </DirectEvents>
                                             
      <Listeners>  
         <Click Handler="selectFrist();" Delay="50" />
      </Listeners>
</ext:Button>

 

snn1410
关注
专栏目录
EXT GridPanel获取某一单元格的值
12-11
EXT GridPanel获取某一单元格的值
gridpanel 点击事件
xingtianyiyun的专栏
10-25 1122
Ext.onReady(function(){ grid.on('rowclick', onRowDoubleClick); }); 注意：域问题 在里面报 找不到 function  var onRowDoubleClick=function(grid, rowIndex, e){ alert(111); }
extjs之-gridpanel完全操作（事件）
Hi, Sun
06-29 185
extjs之-gridpanel完全操作（事件） 2010年07月16日 星期五 16:46 先来一段代码 var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), sm,       {        header : "id",        width : 100, ...
ext:GridPanel 事件觸發
赤日枫叶
12-14 4730
ext:GridPanel 事件觸發，ext:GridPanel 事件觸發
Ext.Net项目
12-08
1. **Ext.Net框架介绍** Ext.Net是一个用于构建富客户端Web应用程序的框架，它将Ext JS的组件模型与.NET框架相结合，允许开发者用C#或VB.NET编写客户端脚本，极大地简化了Web应用开发。通过使用Ext.Net，开发者可以...
Ext.Net源码
12-08
总结来说，Ext.Net2.1.0源码是一个宝贵的资源，无论是对于初学者还是经验丰富的开发者，都能从中学习到如何在.NET环境中高效地构建富客户端应用。通过深入研究和实践，你可以掌握这一强大的工具，并提升你的开发技能...
Ext.NET.MVC.Pro.2.2.0.MVC.Examples.Explorer.zip
07-18
Ext.NET是一个基于JavaScript的UI框架，它扩展了Ext JS库，以更好地与ASP.NET框架集成。MVC版本则特别针对ASP.NET MVC设计，允许开发者在后端使用C#或VB.NET编写控制器和模型，同时在前端利用丰富的Ext JS组件创建...
Ext.Net1.0(Examples)RC2实例
06-04
1. **组件库**：Ext.NET提供了大量的UI组件，如面板（Panel）、表格（GridPanel）、表单（FormPanel）、树形视图（TreePanel）、菜单（Menu）、工具栏（Toolbar）等，这些组件都有丰富的配置选项和事件处理机制。...
extjs 3.0中文api ext.net 中文api
05-14
ExtJS和Ext.NET是两种广泛使用的JavaScript框架，用于构建富客户端Web应用程序。它们提供了一整套组件和工具，使得开发者可以构建出具有复杂用户界面和交互功能的网页应用。 **ExtJS 3.0 中文API** ExtJS是Sencha...
ext.net gridpanel 事件
快乐人生
10-17 8827
1、行双击事件 首先设置选择方式为RowSelectionModel单行选中   1.1   注册行双击事件，响应代码写在前台js中 前台js代码： function FnRowDbClick(paramgrid, paramstore) { va
EXT.NET GridPanel后台选中事件
蚂蚁筑巢
11-25 1241
之前有一同事一直在做EXT.NET后台选中事件，一直都选不了不知道为什么。后来百度出来原来如下： 在数据绑定之后执行如下代码： //获得GridPanel的全部数据 RowSelectionModel sm = this.GridPanel1.GetSelectionModel() as RowSelectionModel; //选中 sm.SelectedRows.Add(new Se
EXTJS4.0 gridpanel 用法笔记～～常用的grid事件
努力 吃饭～～～～
02-01 4250
itemclick( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e )         //鼠标的单击事件 itemcontextmenu( Ext.view.View this, Ext.data.Model record, HTMLEleme
Ext.Net GridPanel RowSelect 行选择事件
weixin_30267697的博客
07-06 152
GridPanel中选中行，后台获取行json信息，再进行相关处理 <ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" StripeRows="true" Title="Purchase Order" AutoExpandColumn="Company"...
Ext.Net 1.x_Ext.Net.GridPanel 事件
德仔
07-04 2160
1、行双击事件 首先设置选择方式为RowSelectionModel单行选中 [html] view plaincopy SelectionModel>        ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
EXTJS GridPanel 勾选事件
oNieJianJun的博客
04-08 1108
var csm = new Ext.grid.CheckboxSelectionModel({                 singleSelect : true,                 listeners:{                     'rowselect':function(sm,rowIndex,record){                      
Ext.Net 1..0中的Group Command控件
liyb5619的专栏
01-06 1637
前一阵尝试使用了一下这个Group控件，它分为好几种，我选择了其中一种带有Command的作为Demo写了一下，为了防止以后忘记在这里记录一下使用过程中的一些注意事项和问题。首先是前台代码：
ext.net DirectEvents事件
蚂蚁筑巢
08-20 914
以下是说的有CS页的代码 大家都知道EXT.NET的控件有一个DirectEvents事件。下面我们就来说一下这个事件的具体用法。 最简单的用法就是在你的控件加上这样的代码 OnDirectClick="btnOK_DirectClick"。实际上是简化了DirectEvents事件的，完整的写法如下：         有时候为了简便就可以像之前那样写。但是如果需要复杂的处理
使用Ext.NET实现GridPanel弹出窗口编辑
"这篇示例是关于在Ext.NET框架下，如何使用GridPanel实现弹出窗口功能，用于展示和编辑详细信息。" 在Ext.NET中，GridPanel是一个强大的组件，用于展示表格数据。它允许用户进行排序、筛选、分页以及执行其他操作。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值