Ext.Net 1.x_Ext.Net.GridPanel 事件

时间：2023-03-09 03:17:32
Ext.Net 1.x_Ext.Net.GridPanel 事件

1、行双击事件

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

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

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

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

前台js代码：

[javascript] view
plaincopy
  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. </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
plaincopy
  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
plaincopy
  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
plaincopy
  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
plaincopy
  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
plaincopy
  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. }

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

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

js代码

[javascript] view
plaincopy
  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
plaincopy
  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
plaincopy
  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
plaincopy
  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. <Listeners>
  7. <Click Handler="selectFrist();" />
  8. </Listeners>
  9. </ext:Button>

默认先执行js代码

[javascript] view
plaincopy
  1. <script type="text/javascript">
  2. function selectFrist() {
  3. var t = ComboBox1.getValue();
  4. var i = ComboBox1.getSelectedIndex();
  5. if (i!=-1 && (i - 1) >= 0) {
  6. ComboBox1.selectByIndex(i - 1);
  7. GridPanel1.reload();
  8. }
  9. else {
  10. Ext.Msg.alert("提示", "已到达起始月份！");
  11. return false;
  12. }
  13. return true;
  14. }
  15. </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
plaincopy
  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. <Listeners>
  7. <Click Handler="selectFrist();" Delay="50" />
  8. </Listeners>
  9. </ext:Button>

转自：http://blog.****.net/alisa525/article/details/8081092

相关文章