[FIXED] [#711] [3.2.0] ToolBar overflow

**RCN** · Feb 02, 2015, 7:00 PM

On the following example, click on show overflowed items button

Then resize window, wide enough that there is no overflowed items

On version 2.x, overflowed items are collapsed prior resizing.

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
</head>
<body>
    <ext:ResourceManager  Theme="Gray" runat="server" />
    <ext:Window Title="Window" Width="200" Height="200" BodyPadding="10" AutoScroll="true" Html="Content" runat="server">
        <TopBar>
            <ext:Toolbar EnableOverflow="true" runat="server">
                <Items>
                    <ext:Button Text="Button 1" Icon="Accept" runat="server" />
                    <ext:Button Text="Button 2" Icon="Add" runat="server" />
                    <ext:Button Text="Button 3" Icon="Anchor" runat="server" />
                    <ext:Button Text="Button 4" Icon="Application" runat="server" />
                    <ext:Button Text="Button 5" Icon="ArrowBranch" runat="server" />
                </Items>
            </ext:Toolbar>
        </TopBar>
    </ext:Window>
</body>
</html>

**fabricio.murta** · Feb 03, 2015, 1:20 AM

Hello Raphael!

Thank you very much for your reports (not just this but the others as well). While it is sad to see so many issues, I am glad this was found while the version is still not released/stable.

I mean, I couldn't reproduce the error in the 3.0 version. I'll be investigating this issue and will make sure to have a fix for this applied soon.

Thanks again, and keep'em coming! :)

EDIT:

Additionally, I could reproduce the issue looking on these two ExtJS samples:
Toolbars with menus (5.0.0)
Toolbars with menus (5.1.0)

So, we'll probably patching ExtJS in order to fix this issue.

**fabricio.murta** · Feb 03, 2015, 2:55 AM

It could help you to avoid the glitch:

            <ext:Toolbar runat="server">
                <LayoutConfig>
                    <ext:LayoutConfig>
                        <CustomConfig>
                            <ext:ConfigItem Name="overflowHandler" Value="scroller" />
                        </CustomConfig>
                    </ext:LayoutConfig>
                </LayoutConfig>
                <Items>
                    <ext:Button Text="Button 1" Icon="Accept" runat="server" />
                    <ext:Button Text="Button 2" Icon="Add" runat="server" />
                    <ext:Button Text="Button 3" Icon="Anchor" runat="server" />
                    <ext:Button Text="Button 4" Icon="Application" runat="server" />
                    <ext:Button Text="Button 5" Icon="ArrowBranch" runat="server" />
                </Items>
            </ext:Toolbar>

Instead of dropdown, slideable toolbar overflow, notice I omitted the EnableOverflow toolbar parameter. Its kind of a nice alternative as well, you may like it.

**RCN** · Feb 03, 2015, 10:54 AM

I prefer the following notation

<ext:Toolbar OverflowHandler="Scroller" runat="server">
    <Items>
        <ext:Button Text="Button 1" Icon="Accept" runat="server" />
        <ext:Button Text="Button 2" Icon="Add" runat="server" />
        <ext:Button Text="Button 3" Icon="Anchor" runat="server" />
        <ext:Button Text="Button 4" Icon="Application" runat="server" />
        <ext:Button Text="Button 5" Icon="ArrowBranch" runat="server" />
    </Items>
</ext:Toolbar>

**RCN** · Feb 03, 2015, 12:00 PM

**Daniil** · Feb 15, 2015, 6:41 AM

Hello everybody,

Yes, there was a lot of changes regarding focusing/bluring in ExtJS 5.1.0. I guess it is one issue more caused by the changes. Created an Issue:
https://github.com/extnet/Ext.NET/issues/711

As a workaround (besides getting rid of EnableOverflow at all) I could suggest:

<ext:Window ...>
    ...
    <Listeners>
        <AfterLayout Handler="this.down('toolbar[enableOverflow]').layout.overflowHandler.menu.hide();" />
    </Listeners>
</ext:Window>

**RCN** · Feb 15, 2015, 7:11 AM

Daniil, i confirm that your workaround overcomes the issue.

On my application i noticed the issue when resizing viewport. It's also possible to overcome it by using your workaround.

Click image for larger version.

Name: mn001.png
Views: 3
Size: 10.5 KB
ID: 21221

Click image for larger version.

Name: mn002.png
Views: 2
Size: 10.8 KB
ID: 21231

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
</head>
<body>
    <ext:ResourceManager Theme="Gray" runat="server" />
    <ext:Viewport Layout="BorderLayout" Border="false" runat="server">
        <Items>
            <%--CENTER--%>
            <ext:Panel Title="Center" Region="Center" Html="Content" Split="true" runat="server">
                <TopBar>
                    <ext:Toolbar EnableOverflow="true" runat="server">
                        <Items>
                            <ext:Button Text="Button 1" Icon="FlagAd" runat="server" />
                            <ext:Button Text="Button 2" Icon="FlagAe" runat="server" />
                            <ext:Button Text="Button 3" Icon="FlagAf" runat="server" />
                            <ext:Button Text="Button 4" Icon="FlagAg" runat="server" />
                            <ext:Button Text="Button 5" Icon="FlagAi" runat="server" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
            </ext:Panel>
            <%--EAST--%>
            <ext:Panel Title="East" Region="East" Html="Content" Width="300" Split="true" runat="server">
                <TopBar>
                    <ext:Toolbar EnableOverflow="true" runat="server">
                        <Items>
                            <ext:Button Text="Button 1" Icon="FlagAd" runat="server" />
                            <ext:Button Text="Button 2" Icon="FlagAe" runat="server" />
                            <ext:Button Text="Button 3" Icon="FlagAf" runat="server" />
                            <ext:Button Text="Button 4" Icon="FlagAg" runat="server" />
                            <ext:Button Text="Button 5" Icon="FlagAi" runat="server" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
            </ext:Panel>
        </Items>
    </ext:Viewport>
</body>
</html>

So, we'd have the following

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
</head>
<body>
    <ext:ResourceManager Theme="Gray" runat="server" />
    <ext:Viewport Layout="BorderLayout" Border="false" runat="server">
        <Items>
            <%--CENTER--%>
            <ext:Panel Title="Center" Region="Center" Html="Content" Split="true" runat="server">
                <TopBar>
                    <ext:Toolbar EnableOverflow="true" runat="server">
                        <Items>
                            <ext:Button Text="Button 1" Icon="FlagAd" runat="server" />
                            <ext:Button Text="Button 2" Icon="FlagAe" runat="server" />
                            <ext:Button Text="Button 3" Icon="FlagAf" runat="server" />
                            <ext:Button Text="Button 4" Icon="FlagAg" runat="server" />
                            <ext:Button Text="Button 5" Icon="FlagAi" runat="server" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Listeners>
                    <AfterLayout Handler="this.down('toolbar[enableOverflow]').layout.overflowHandler.menu.hide();" />
                </Listeners>
            </ext:Panel>
            <%--EAST--%>
            <ext:Panel Title="East" Region="East" Html="Content" Width="300" Split="true" runat="server">
                <TopBar>
                    <ext:Toolbar EnableOverflow="true" runat="server">
                        <Items>
                            <ext:Button Text="Button 1" Icon="FlagAd" runat="server" />
                            <ext:Button Text="Button 2" Icon="FlagAe" runat="server" />
                            <ext:Button Text="Button 3" Icon="FlagAf" runat="server" />
                            <ext:Button Text="Button 4" Icon="FlagAg" runat="server" />
                            <ext:Button Text="Button 5" Icon="FlagAi" runat="server" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Listeners>
                    <AfterLayout Handler="this.down('toolbar[enableOverflow]').layout.overflowHandler.menu.hide();" />
                </Listeners>
            </ext:Panel>
        </Items>
    </ext:Viewport>
</body>
</html>

**Daniil** · Feb 15, 2015, 7:22 AM

Thank you for the quick follow-up!

I was thinking to commit such a fix to SVN:

Ext.define('Ext.overrides.menu.Menu', {
    override: 'Ext.menu.Menu',

    onShow: function () {
        this.callParent(arguments);
        this.focus();
    }
});

But decided not to commit.

First, it doesn't fix all the known cases. It fixes some scenarios, but it doesn't fix the scenario that you reported.
Second, I am not sure it doesn't cause other problems (and, maybe, even more).

We hope it will be fixed in ExtJS 5.1.1. For now, we keep the issue in mind and ready to provide members with workarounds once something related is reported on the forums.

**RCN** · Feb 15, 2015, 10:41 PM

It's possible to overcome the issue by doing the following:

<script type="text/javascript">
    Ext.container.Container.override({
        afterLayout: function (layout) {
            this.callParent(arguments);
            if (layout != null && layout.overflowHandler != null && layout.overflowHandler.menu != null) {
                layout.overflowHandler.menu.hide();
            }
        }
    });
</script>

It's a stable workaround and fixes all known cases. It's up to you whether it should be committed to SVN.

Standard Toolbar

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <script type="text/javascript">
        Ext.container.Container.override({
            afterLayout: function (layout) {
                this.callParent(arguments);
                if (layout != null && layout.overflowHandler != null && layout.overflowHandler.menu != null) {
                    layout.overflowHandler.menu.hide();
                }
            }
        });
    </script>
</head>
<body>
    <ext:ResourceManager Theme="Gray" ScriptMode="Debug" runat="server" />
    <ext:Window Title="Window" Width="200" Height="200" BodyPadding="10" AutoScroll="true" Html="Content" runat="server">
        <TopBar>
            <ext:Toolbar EnableOverflow="true" runat="server">
                <Items>
                    <ext:Button Text="Button 1" Icon="Accept" runat="server" />
                    <ext:Button Text="Button 2" Icon="Add" runat="server" />
                    <ext:Button Text="Button 3" Icon="Anchor" runat="server" />
                    <ext:Button Text="Button 4" Icon="Application" runat="server" />
                    <ext:Button Text="Button 5" Icon="ArrowBranch" runat="server" />
                </Items>
            </ext:Toolbar>
        </TopBar>
    </ext:Window>
</body>
</html>

Docked Toolbar - Top, Left, Right and Button

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <script type="text/javascript">
        Ext.container.Container.override({
            afterLayout: function (layout) {
                this.callParent(arguments);
                if (layout != null && layout.overflowHandler != null && layout.overflowHandler.menu != null) {
                    layout.overflowHandler.menu.hide();
                }
            }
        });
    </script>
</head>
<body>
    <ext:ResourceManager Theme="Gray" ScriptMode="Debug" runat="server" />
    <ext:Window Title="Window" Width="200" Height="200" BodyPadding="10" AutoScroll="true" Html="Content" runat="server">
        <DockedItems>
            <ext:Toolbar EnableOverflow="true" Dock="Top" runat="server">
                <Items>
                    <ext:Button Text="Button 1" Icon="Accept" runat="server" />
                    <ext:Button Text="Button 2" Icon="Add" runat="server" />
                    <ext:Button Text="Button 3" Icon="Anchor" runat="server" />
                    <ext:Button Text="Button 4" Icon="Application" runat="server" />
                    <ext:Button Text="Button 5" Icon="ArrowBranch" runat="server" />
                </Items>
            </ext:Toolbar>
        </DockedItems>
    </ext:Window>
</body>
</html>

Toolbar within ViewPort

<!DOCTYPE html>
<html>
<head id="Head2" runat="server">
    <script type="text/javascript">
        Ext.container.Container.override({
            afterLayout: function (layout) {
                this.callParent(arguments);
                if (layout != null && layout.overflowHandler != null && layout.overflowHandler.menu != null) {
                    layout.overflowHandler.menu.hide();
                }
            }
        });
    </script>
</head>
<body>
    <ext:ResourceManager Theme="Gray" runat="server" />
    <ext:Viewport Layout="BorderLayout" Border="false" runat="server">
        <Items>
            <%--CENTER--%>
            <ext:Panel Title="Center" Region="Center" Html="Content" Split="true" runat="server">
                <TopBar>
                    <ext:Toolbar EnableOverflow="true" runat="server">
                        <Items>
                            <ext:Button Text="Button 1" Icon="FlagAd" runat="server" />
                            <ext:Button Text="Button 2" Icon="FlagAe" runat="server" />
                            <ext:Button Text="Button 3" Icon="FlagAf" runat="server" />
                            <ext:Button Text="Button 4" Icon="FlagAg" runat="server" />
                            <ext:Button Text="Button 5" Icon="FlagAi" runat="server" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
            </ext:Panel>
            <%--EAST--%>
            <ext:Panel Title="East" Region="East" Html="Content" Width="300" Split="true" runat="server">
                <TopBar>
                    <ext:Toolbar EnableOverflow="true" runat="server">
                        <Items>
                            <ext:Button Text="Button 1" Icon="FlagAd" runat="server" />
                            <ext:Button Text="Button 2" Icon="FlagAe" runat="server" />
                            <ext:Button Text="Button 3" Icon="FlagAf" runat="server" />
                            <ext:Button Text="Button 4" Icon="FlagAg" runat="server" />
                            <ext:Button Text="Button 5" Icon="FlagAi" runat="server" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
            </ext:Panel>
        </Items>
    </ext:Viewport>
</body>
</html>

**Daniil** · Feb 16, 2015, 5:14 AM

I think it is a good fix for such kind of scenarios. Thank you for sharing!

fixes all known cases

I beg to differ. There are many cases there a Toolbar is not used at all. It is a more common problem with Menus.

I think we will leave the things as it is for now. But if anyone encounters an issue like yours, we will point to your fix. Thanks!

Thread: [FIXED] [#711] [3.2.0] ToolBar overflow

Thread Tools

Search Thread

Display

[FIXED] [#711] [3.2.0] ToolBar overflow

Similar Threads

[CLOSED] Disable overflow for some ToolBar's items

Display error of Toolbar Overflow

toolbar overflow can't post back when it was hided

[CLOSED] Toolbar overflow icons

[CLOSED] [1.0] Toolbar Overflow

Posting Permissions

Sitemap

Downloads

Resources

Thread: [FIXED] [#711] [3.2.0] ToolBar overflow

[FIXED] [#711] [3.2.0] ToolBar overflow

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us