javascript - EXT.NET 事件处理问题

标签 javascript extjs ext.net

在 ASP.NET 应用程序中,有一个网格面板,其中包含在代码隐藏中定义的监听器。我们遇到的问题与 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);}}";
...

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];
    }

单击网格行中的组合时会出现此问题。该行被选中,这很好,但组合值不会显示。似乎组合中只有一个值(当前显示在网格行中的值)。

enter image description here

但是,当使用键盘导航时,组合将打开并显示所有值。

enter image description here

似乎网格行上的 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>

最佳答案

此调用会导致以下行为:

grid.getRowsValues()[0];

我不知道为什么,但作为解决方案,请尝试将其替换为:

grid.getStore().getAt(0).data

关于javascript - EXT.NET 事件处理问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17237341/

相关文章:

javascript - RecordField 中的默认值在执行时引发 JavaScript 错误

javascript - 比较用css隐藏React组件和状态管理的性能

javascript - 如何禁用 ExtJS 中网格上的复选框?

javascript - 说明【随机列表】

javascript - Chromium如何将拖动和/或按住转换为单击?

javascript - ExtJS 3.2 : Grid column header grouping

c# - 将 C# ExtNet DirectMethod 实现转换为 VB.NET

javascript - onclick 定义的 text-var 在日志上返回空字符串

javascript - FontAwesome5(带 JS 的 SVG)和 Jquery 将图标旋转(动画)180 度

Javascript 将字符串转换为数字