在 ASP.NET 应用程序中,有一个网格面板,其侦听器在后面的代码中定义。我们遇到的问题与 mousedown 事件有关。在 mousedown 时,由于稍后的一些处理,该行被选中。这是代码:
C#:
Ext.Net.ConfigItem cItem = new Ext.Net.ConfigItem();
cItem.Mode = Ext.Net.ParameterMode.Raw;
cItem.Name = "listeners";
cItem.Value += "{'mousedown':function(e){ if(e.target != null) setGridCurrentRow(" + gridView.ID + ",e);}}";
...
脚本:
function setGridCurrentRow(grid, e) {
var parent = Ext.fly(e.target).findParent(grid.getView().rowSelector, grid.getView().rowSelectorDepth);
if (parent) { // if no row selected
grid.currentRow = grid.store.getRange()[parent.rowIndex].data;
}
else { // else - row selected
grid.currentRow = grid.getRowsValues()[0];
}
单击网格行中的组合时会出现此问题。该行被选中,这很好,但不显示组合值。似乎组合中只有一个值(当前显示在网格行中的那个)。
但是,当使用键盘导航时,会打开组合并显示所有值。
似乎网格行上的 mousedown 事件会覆盖组合的 mousedown 事件。我的问题是:如何在不丢失默认组合行为的情况下进行行选择?
编辑:
这是我设置的一个简单示例,其中重现了此行为:
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript">
function setGridCurrentRow(grid, e) {
var parent = Ext.fly(e.target).findParent(grid.getView().rowSelector, grid.getView().rowSelectorDepth);
if (parent) { // if no row selected
grid.currentRow = grid.store.getRange()[parent.rowIndex].data;
}
else { // else - row selected
grid.currentRow = grid.getRowsValues()[0];
}
}
</script>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Ext.Net.ConfigItem cItem = new Ext.Net.ConfigItem();
cItem.Mode = Ext.Net.ParameterMode.Raw;
cItem.Name = "listeners";
cItem.Value += "{'keydown':function(e){ if(e.getKey()==9){setGridCurrentRow(" + TestGrid.ID + ",e);}}";
cItem.Value += ",'mousedown':function(e){ if(e.target != null) setGridCurrentRow(" + TestGrid.ID + ",e);}";
cItem.Value += ",'command':function(command,gridRecord){alert('Here I am!');}}";
TestGrid.CustomConfig.Add(cItem);
TestStore.DataSource = Data;
this.TestStore.DataBind();
}
}
private object[] Data
{
get
{
return new object[]
{
new object[] { 1, "f", "First", "" },
new object[] { 2, "s", "Second", "" },
new object[] { 3, "f", "First", "" },
new object[] { 4, "t", "Third", "" },
new object[] { 5, "f", "Fourth", "" },
};
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<form id="form1" runat="server">
<div>
<ext:Store ID="TestStore" runat="server" >
<Reader>
<ext:ArrayReader IDProperty="ID" >
<Fields>
<ext:RecordField Name="ID"></ext:RecordField>
<ext:RecordField Name="TestText"></ext:RecordField>
<ext:RecordField Name="TestValue"></ext:RecordField>
<ext:RecordField Name="ButtonText"></ext:RecordField>
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:GridPanel ID="TestGrid" runat="server" StoreID="TestStore" Width="600" Height="350" ClicksToEdit="1" TrackMouseOver="true" Selectable="true" >
<ColumnModel ID="TestModel">
<Columns>
<ext:Column ColumnID="TestText" Header="TestText" MenuDisabled="true">
<Editor>
<ext:TextField ID="TestText_Text" runat="server"></ext:TextField>
</Editor>
</ext:Column>
<ext:Column ColumnID="TestValue" Header="Value" MenuDisabled="true">
<Editor>
<ext:ComboBox ID="TestValue_Combo" runat="server" Editable="false" ForceSelection="true">
<Items>
<ext:ListItem Text="First" Value="1" />
<ext:ListItem Text="Second" Value="2" />
<ext:ListItem Text="Third" Value="3" />
<ext:ListItem Text="Fourth" Value="4" />
<ext:ListItem Text="Fifth" Value="5" />
</Items>
</ext:ComboBox>
</Editor>
</ext:Column>
<ext:Column ColumnID="TestButton" Header="Edit" MenuDisabled="true">
<Commands>
<ext:ImageCommand Icon="ApplicationEdit" CommandName="Edit" Text="Edit" ></ext:ImageCommand>
</Commands>
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel >
<ext:CheckboxSelectionModel ID="TestSelectionModel" runat="server" ></ext:CheckboxSelectionModel>
</SelectionModel>
</ext:GridPanel>
</div>
</form>
</body>
</html>