[CLOSED] TriggerField loses focus after ToolTip disappeared

[Leonid_Veriga]

Hello guys,

I've faced with the problem when TriggerField loses focus after Tooltip disappeared.
I have a Window with a GridPanel inside.
GridPanel has ToolTip with Delegate=".x-grid-cell".
The TriggerField is in HeaderItems of one of the columns.

The steps are:
1) Click on the TriggerField (set cursor inside the field). The field is focused now.
2) Move mouse pointer to grid cell - the ToolTip will be showed.
3) Move mouse pointer back to the TriggerField (or any other control). The ToolTip disappears, the TriggerField loses the focus.

I've found the next solution and it seems it works for me:

Ext.require('Ext.ZIndexManager',
    function() {
        Ext.override(Ext.ZIndexManager, {
            _setActiveChild: function(comp, oldFront) {
                var front = this.front;
                if (comp !== front) {
                    if (front && !front.destroying) {
                        front.setActive(false, comp);
                    }
                    this.front = comp;
                    if (comp && comp != oldFront) {
                        if (!(oldFront instanceof Ext.tip.ToolTip)) {
                            comp.setActive(true);
                            if (comp.modal) {
                                this._showModalMask(comp);
                            }
                        }
                    }
                }
            },
        });
    }
);

Could you please confirm if the workaround is acceptable?
Thank you.

[Daniil]

Hi,

I am unable to reproduce the issue using the test case below.

I tried with the trunk, the 2.1.1 release and your dlls that you sent me recently.

Please provide your test case. Maybe, it is somehow related with the ToolTip's content.

Example

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.Store1.DataSource = new object[]
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
            };

            this.Store1.DataBind();
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>GridPanel Cell with ToolTip - Ext.NET Examples</title>

    <script>
        var template = '<span style="color:{0};">{1}</span>';

        var change = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value);
        };

        var pctChange = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
        };
        
        var onBeforeShow = function () {
            this.update("Hello!");
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Window 
            runat="server" 
            Width="600" 
            Height="350" 
            Layout="FitLayout">
            <Items>
                <ext:GridPanel 
                    ID="GridPanel1" 
                    runat="server"
                    Title="Array Grid">
                    <Store>
                        <ext:Store ID="Store1" runat="server">
                            <Model>
                                <ext:Model runat="server">
                                    <Fields>
                                        <ext:ModelField Name="company" />
                                        <ext:ModelField Name="price" Type="Float" />
                                        <ext:ModelField Name="change" Type="Float" />
                                        <ext:ModelField Name="pctChange" Type="Float" />
                                        <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel runat="server">
                        <Columns>
                            <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1">
                                <HeaderItems>
                                    <ext:TriggerField runat="server" />
                                </HeaderItems>
                            </ext:Column>
                            <ext:Column runat="server" Text="Price" DataIndex="price">
                                <Renderer Format="UsMoney" />
                            </ext:Column>
                            <ext:Column runat="server" Text="Change" DataIndex="change">
                                <Renderer Fn="change" />
                            </ext:Column>
                            <ext:Column runat="server" Text="Change" DataIndex="pctChange">
                                <Renderer Fn="pctChange" />
                            </ext:Column>
                            <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:RowSelectionModel runat="server" Mode="Single" />
                    </SelectionModel>
                    <View>
                        <ext:GridView runat="server" StripeRows="true" TrackOver="true" />
                    </View>
                </ext:GridPanel> 
            </Items>
        </ext:Window>
        
        <ext:ToolTip 
            runat="server" 
            Target="={#{GridPanel1}.getView().el}"
            Delegate=".x-grid-cell"
            TrackMouse="true">
            <Listeners>
                <Show Fn="onBeforeShow" /> 
            </Listeners>
        </ext:ToolTip>     
    </form>
</body>
</html>

[Leonid_Veriga]

Hi Daniil,

Thank you for the response!
I was able to reproduse the issue for your example when I set Modal="true" for the Window.

[Daniil]

Yes, it was a key. Yesterday I tried to set up Modal="true" for the ToolTip (despite the fact that it doesn't have such a property:) ), but did not guess to try with the Window. Just it was too late for me and I had to relax a bit:)

I think your solution is good. But I will discuss with my colleagues for sure.

By the way, it is not reproducible with the trunk. Although there is another problem.

[Daniil]

Vladimir also can't foresee potential problems with your fix.

I am marking the thread closed. Please update if you will face any problems.

[Leonid_Veriga]

Thank you!