CODEWITHSUNDEEP
javascriptextjsext.net
Ana M
Ana M

Reputation: 110

EXT.NET Event Handling Issue

In an ASP.NET application there is a gridpanel with listeners defined in code behind. The issue we're experiencing is related to mousedown event. On mousedown, the row gets selected because of some processing later on. Here is the code:

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

The issue arises when combo in the grid row is clicked. The row gets selected, which is fine, but combo values aren't displayed. It seems as if there is only one value in combo (the one currently displayed in grid row).

enter image description here

But, when navigating using the keyboard, the combo is opened and all the values are shown.

enter image description here

It seems that the mousedown event on grid row overrides combo's mousedown event. My question is: how to make row selection without losing default combo behavior?

EDIT:

Here is a simple example I've set, where this behavior is reproduced:

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

Upvotes: 2

Views: 678

Answers (1)

Daniil Veriga
Daniil Veriga

Reputation: 1851

This call causes the behavior:

grid.getRowsValues()[0];

I don't know why, but as a solution please try to replace it with:

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

Upvotes: 1

Related Questions