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