ext.net gridpanel 事件

1、行双击事件

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

 <SelectionModel>
      <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
      </ext:RowSelectionModel>
 </SelectionModel>

 

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

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

前台js代码：

 <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 定义带参数的行双击事件

       注册事件

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

 

后台代码：

 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

 <ext:Column Header="未发次数" DataIndex="未发次数" Width="200">
     <Commands>
           <ext:ImageCommand CommandName="query" Icon="ApplicationViewList" Text="查看">
               <ToolTip Text="未发日期列表" />
           </ext:ImageCommand>
    </Commands> 
</ext:Column>

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

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

 定义后台响应代码：

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响应事件

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

js代码

<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、单元格选中事件 定义行选中模式为单元格选中模式，

定义选中事件

<SelectionModel>
     <ext:CellSelectionModel runat="server">
         <DirectEvents>
         <CellSelect OnEvent="Cell_Click" />                        
         </DirectEvents>
     </ext:CellSelectionModel>
</SelectionModel>

 

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

<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事件，然后执行后台事件

例如：

<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代码

 <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"   ,设置滞后时间

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

 

 

.