RowExpander: GridPanels inside RowExpander misforwards clicks on CellEdit components #826

fabriciomurta · 2015-07-05T23:05:31Z

Overview

This bug was reported on the forum thread: CellEditor in RowExpander not behaving as in parent GridPanel

Update by @DaniilVeriga:
If fixed in SVN ever, it would be nice to update this forum thread as well.
http://forums.ext.net/showthread.php?59569
End of the update

Code to reproduce issue

<%@ Page Language="C#" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.GridPanel1.GetStore().DataSource = new List<object>
            {
                new 
                { 
                    Name = "Bill Foot",  
                    Salary = 37000
                },
                new 
                { 
                    Name = "Bill Little",
                    Salary = 53000
                }
            };
            this.GridPanel2.GetStore().DataSource = new List<object>
            {
                new 
                { 
                    Quantity = 100, 
                    Location = "A01A"
                },
                new 
                { 
                    Quantity = 100, 
                    Location = "A02A"
                }
            };
        }
    }
</script>

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>CellEditor in RowExpander not behaving as in parent GridPanel</title>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="true" ScriptMode="Debug" />
        <h1>CellEditor in RowExpander not behaving as in parent GridPanel</h1>
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server"
            Width="300"
            Height="400"
            Frame="true"
            Title="Employees">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model1" runat="server" Name="Employee">
                            <Fields>
                                <ext:ModelField Name="name" ServerMapping="Name" Type="String" />
                                <ext:ModelField Name="salary" ServerMapping="Salary" Type="Float" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <Plugins>
                <ext:CellEditing ID="RowEditing1" runat="server" ClicksToEdit="1" />
                <ext:RowExpander ID="RowExpander1" runat="server">
                    <Component>
                        <ext:GridPanel ID="GridPanel2" runat="server" Width="250" Height="200" Frame="true" Title="Pallets">
                            <Store>
                                <ext:Store ID="Store2" runat="server">
                                    <Model>
                                        <ext:Model ID="Model2" runat="server" Name="Employee">
                                            <Fields>
                                                <ext:ModelField Name="quantity" ServerMapping="Quantity" Type="Int" />
                                                <ext:ModelField Name="location" ServerMapping="Location" Type="String" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <ColumnModel>
                                <Columns>
                                    <ext:Column ID="Column2" runat="server"                         
                                        Text="Location" 
                                        DataIndex="location" 
                                        Flex ="1">
                                        <Editor>
                                            <ext:TextField ID="TextField2" runat="server" AllowBlank="false" />
                                        </Editor>
                                    </ext:Column>
                                    <ext:NumberColumn ID="NumberColumn2"
                                        runat="server"
                                        Text="Quantity" 
                                        DataIndex="quantity">
                                        <Editor>
                                            <ext:NumberField ID="NumberField2" 
                                                runat="server" 
                                                AllowBlank="false" 
                                                MinValue="1" 
                                                MaxValue="150000">
                                            </ext:NumberField>
                                        </Editor>
                                    </ext:NumberColumn>
                                </Columns>
                            </ColumnModel>
                            <Plugins>
                                <ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
                            </Plugins>
                        </ext:GridPanel>
                    </Component>
                </ext:RowExpander>
            </Plugins>                       
            <ColumnModel>
                <Columns>
                    <ext:Column ID="Column1" runat="server"                         
                        Text="Name" 
                        DataIndex="name" 
                        Flex="1">
                        <Editor>
                            <ext:TextField ID="TextField1" runat="server" AllowBlank="false" />
                        </Editor>
                    </ext:Column>
                    <ext:NumberColumn ID="NumberColumn1"
                        runat="server"
                        Text="Salary" 
                        DataIndex="salary" 
                        Format="$0,0">
                        <Editor>
                            <ext:NumberField ID="NumberField1" 
                                runat="server" 
                                AllowBlank="false"
                                MinValue="1" 
                                MaxValue="150000">
                            </ext:NumberField>
                        </Editor>
                    </ext:NumberColumn>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </form>  
</body>
</html>

Steps to reproduce

Steps to reproduce:
a. good behavior

Click a cell in the 'salary' column.
Once the editor box is displayed, click somewhere inside the editor box, or change the value thru the buttons inside it. You can click and the editor is only dismissed once you click outside the box (or hit Esc).

b. bad behavior

Expand one of the employees clicking on the [+] icon
Click a cell in the 'Quantity' column.
Once the editor box is displayed, by clicking anywhere inside the editor area dismisses the editor as if the click was outside the editor.

Debugging

Debugging this issue is not trivial. It is needed to add breakpoints that trigger in more than one hit, so you can click the cell (so it is displayed) and then have the breakpoint trigger the moment it is mis-dismissing the editor.

Good values are to trigger the breakpoint in 2 or 4 hits of the point.

To get to where the code differs, add a breakpoint to trigger every 4th hit (when multiple of 4) on Ext.View.View.handleEvent() (~ line 95236 of ext-all-debug.js).
Notice how e.item receives a value when the breakpoint is hit when clicking the broken field (b: bad behavior above). In contrast, e.item does not return anything when clicking the working field (a: good behavior above).

The item is returned in the line which reads e.item = e.getTarget(me.itemSelector);; getTarget calls Ext.dom.Element.findParent() which in turn, cycles all parents of the clicked grid cell until

For (a), it reaches the topmost <HTML> node of the document.
For (b), it reaches a <TABLE> element with ID tableview-1018-record-1, for which the click is forwarded. As the click focus somewhere else, the edit controller loses focus consequently hiding back.

The text was updated successfully, but these errors were encountered:

fabriciomurta · 2015-07-06T00:50:35Z

##Workaround
In order to exempt editor controls from traversing all the way thru the table view layer (which is the selectable control), you can limit de depth of the search with the following override.

    <script>
        Ext.define('Ext.event.Event_override', {
            override: 'Ext.event.Event',
            getTarget: function (selector, maxDepth, returnEl) {
                if (this.view && this.view.editingPlugin) maxDepth = 12;
                return selector ? Ext.fly(this.target).findParent(selector, maxDepth, returnEl) : (returnEl ? Ext.get(this.target) : this.target);
            }
        });
    </script>

The value of 12 was found on trial-and-error. When depth == 13 is the point where the code finds the "clickable" layer and moves the focus out.

The workaround above will exempt any controls that are from the CellEditing (or RowEditing) plugins from seeking deeper than 12 HTML nodes' depth for clickable stuff.

While this does not break/fix other controls, it also does not disallow any expected interaction of the editors with sub-controls down to nearby the sub-table view layer that RowExpander creates.

This issue can be interpreted as an incompatibility between the Cell Editor and Row Expander plugins.

For a permanent fix, one choice is to have this override take place whenever Ext.grid.plugin.CellEditing is used.

DaniilVeriga · 2015-07-08T12:02:53Z

Fixed in the revision 6465 (trunk). It goes to 3.2.0.

The bug has been fixed on the level of Ext.view.View. There was already a check to make an outer GridPanel ignoring events from its inner GridPanel, but it was not enough for this scenario. So, I added an additional check and it appears to behave fine. Please let me know if you find a scenario where it breaks.

fabriciomurta · 2016-11-21T00:20:45Z

This bug is no longer reproducible when merged ExtJS 6.2.0 to Ext.NET! Tested both main case and related issue with combo box (refer to second forum thread mentioned on first post).

fabriciomurta added 3.x 1 - Ready labels Jul 5, 2015

fabriciomurta self-assigned this Jul 5, 2015

fabriciomurta removed the 2 - Working label Jul 6, 2015

DaniilVeriga added this to the Release 3.2.0 milestone Jul 8, 2015

DaniilVeriga closed this as completed Jul 8, 2015

DaniilVeriga removed the 1 - Ready label Sep 17, 2015

fabriciomurta added sencha review 4.x defect labels Apr 17, 2016

fabriciomurta removed the review label May 2, 2016

fabriciomurta added the fixed-in-latest-extjs label Nov 21, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RowExpander: GridPanels inside RowExpander misforwards clicks on CellEdit components #826

RowExpander: GridPanels inside RowExpander misforwards clicks on CellEdit components #826

fabriciomurta commented Jul 5, 2015

fabriciomurta commented Jul 6, 2015

DaniilVeriga commented Jul 8, 2015

fabriciomurta commented Nov 21, 2016

RowExpander: GridPanels inside RowExpander misforwards clicks on CellEdit components #826

RowExpander: GridPanels inside RowExpander misforwards clicks on CellEdit components #826

Comments

fabriciomurta commented Jul 5, 2015

Overview

Code to reproduce issue

Steps to reproduce

Debugging

fabriciomurta commented Jul 6, 2015

DaniilVeriga commented Jul 8, 2015

fabriciomurta commented Nov 21, 2016