Toolbar overflow with some buttons hidden does not fire listeners

[carlos.lemos]

Hi,

I have a toolbar overflow with some buttons hidden because of the size of the panel in which is contained toolbar, all the buttons hidden have presented the same problems:
1 - Not show tooltip.
2 - Listeners does not fire.

Any help is greatly appreciated!

<ext:ResourceManager ID="Resourcemanager1" runat="server" />
<ext:Panel ID="Panel2" runat="server" Title="Panel with toolbars" Resizable="true"
    Width="300" Height="300">
    <TopBar>
        <ext:Toolbar ID="Toolbar1" runat="server" Width="300" EnableOverflow="true">
            <Items>
                <ext:Button ID="Button1" runat="server" Icon="Add" StandOut="true">
                    <Listeners>
                        <Click Handler="Ext.Msg.alert('Click','Click on Add');" />
                    </Listeners>
                    <ToolTips>
                        <ext:ToolTip ID="ToolTip1" runat="server" Html="StandOut button" />
                    </ToolTips>
                </ext:Button>
                <ext:Button ID="Button2" runat="server" Icon="Accept" StandOut="true">
                    <Listeners>
                        <Click Handler="Ext.Msg.alert('Click','Click on Accept');" />
                    </Listeners>
                    <ToolTips>
                        <ext:ToolTip ID="ToolTip2" runat="server" Html="StandOut button" />
                    </ToolTips>
                </ext:Button>
                <ext:Button ID="Button3" runat="server" Icon="Delete" StandOut="true">
                    <Listeners>
                        <Click Handler="Ext.Msg.alert('Click','Click on Delete');" />
                    </Listeners>
                    <ToolTips>
                        <ext:ToolTip ID="ToolTip3" runat="server" Html="StandOut button" />
                    </ToolTips>
                </ext:Button>
                <ext:ToolbarSeparator />
                <ext:Button ID="Button4" runat="server" Icon="Add">
                    <Listeners>
                        <Click Handler="Ext.Msg.alert('Click','Click on Add');" />
                    </Listeners>
                    <ToolTips>
                        <ext:ToolTip ID="ToolTip4" runat="server" Html="Simple button" />
                    </ToolTips>
                </ext:Button>
                <ext:Button ID="Button5" runat="server" Icon="Accept">
                    <Listeners>
                        <Click Handler="Ext.Msg.alert('Click','Click on Accept');" />
                    </Listeners>
                    <ToolTips>
                        <ext:ToolTip ID="ToolTip5" runat="server" Html="Simple button" />
                    </ToolTips>
                </ext:Button>
                <ext:Button ID="Button6" runat="server" Icon="Delete">
                    <Listeners>
                        <Click Handler="Ext.Msg.alert('Click','Click on Delete');" />
                    </Listeners>
                    <ToolTips>
                        <ext:ToolTip ID="ToolTip6" runat="server" Html="Simple button" />
                    </ToolTips>
                </ext:Button>
                <ext:ToolbarSeparator />
                <ext:Button ID="Button7" runat="server" Icon="Add" Text="Add">
                    <Listeners>
                        <Click Handler="Ext.Msg.alert('Click','Click on Add');" />
                    </Listeners>
                    <ToolTips>
                        <ext:ToolTip ID="ToolTip7" runat="server" Html="Button with text" />
                    </ToolTips>
                </ext:Button>
                <ext:Button ID="Button8" runat="server" Icon="Accept" Text="Accept" Disabled="true">
                    <Listeners>
                        <Click Handler="Ext.Msg.alert('Click','Click on Accept');" />
                    </Listeners>
                    <ToolTips>
                        <ext:ToolTip ID="ToolTip8" runat="server" Html="Disabled" />
                    </ToolTips>
                </ext:Button>
                <ext:Button runat="server" ID="Button9" Icon="Delete" Text="Delete">
                    <Listeners>
                        <Click Handler="Ext.Msg.alert('Click','Click on Delete');" />
                    </Listeners>
                    <ToolTips>
                        <ext:ToolTip ID="ToolTip9" runat="server" Html="Button with text" />
                    </ToolTips>
                </ext:Button>
            </Items>
        </ext:Toolbar>
    </TopBar>
</ext:Panel>

[Baidaly]

Hello.

Tooltips don't appear because ExtJS destroys all tooltips when re-rendering hidden buttons.

As solution for this problem you can use QTips, they work in many situations and in your situation particularly. For example:

<ext:Button runat="server" ID="Button9" Icon="Delete" Text="Delete">
                    <QTipCfg Text="Button with text"></QTipCfg>
                    <Listeners>
                        <Click Handler="Ext.Msg.alert('Click','Click on Delete');" />
                    </Listeners>
                </ext:Button>

About handlers I couldn't reproduce your problem. I recommend you update Ext.NET to the last version and if you will have the same problem again write in this thread.

[Daniil]

Hi all,

Re: ToolTips

Confirm, do not use a ToolTips collection in this case. Use a ToolTip or a QTipConfig properties as @Baidaly suggested.

Re: Click listener

Here is a related thread.
http://forums.ext.net/showthread.php?21851

But this bug should not be presented in the official Ext.NET v2.0 release, because this bug appeared in ExtJS 4.1.2 only.

Please clarify what Ext.NET sources do you use?

Anyway, you can use a Button's Handler property to overcome this issue.

[carlos.lemos]

Thanks all, problem solved!