ext.net gridpanel 事件

1、行双击事件

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

[html]   view plain copy

1. <SelectionModel>  
2.      <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">  
3.      </ext:RowSelectionModel>  
4. </SelectionModel>  

 

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

[html]   view plain copy

1. <Listeners>  
2.        <RowDblClick Handler="return rowDbClick(#{GridPanel1},#{Store1})" />  
3. </Listeners>  

前台js代码：

[javascript]   view plain copy

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>  

 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

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>  

 

后台代码：

[csharp]   view plain copy

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. }  

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

在列中定义ImageCommand

[html]   view plain copy

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>  

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

[html]   view plain copy

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>  

 定义后台响应代码：

[csharp]   view plain copy

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. }  

 

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

[html]   view plain copy

1. <Listeners>  
2.      <Command Handler="cellClick(record.data,this.getColumnModel().getDataIndex(colIndex))" />  
3. </Listeners>  

js代码

[javascript]   view plain copy

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>  

 

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

定义选中事件

[html]   view plain copy

1. <SelectionModel>  
2.      <ext:CellSelectionModel runat="server">  
3.          <DirectEvents>  
4.          <CellSelect OnEvent="Cell_Click" />                          
5.          </DirectEvents>  
6.      </ext:CellSelectionModel>  
7. </SelectionModel>  

 

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

[javascript]   view plain copy

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>  

 

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

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

例如：

[html]   view plain copy

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>  

默认先执行js代码

[javascript]   view plain copy

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>  

后执行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

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>