enableOverFlow in Toolbar doesn't work propertly

[bts]

Hello everyone, i have an issue in Ext Designer 1.2 when trying to enable the property "enableOverFlow" from a Toolbar using Button Groups on it, but when i resize the browser the arrow that have to appear for the overflow functionality didn't appear.

I include the images of an interface that i made in Ext Designer 1.2 using a Viewport with a border layout and subpanels to create some kind of control panel.

interface01.jpg

interface02.jpg

If any had any solution for this problem or doubt, please post it here.

Best Regards

[jsakalos]

Shouldn't this belong to Designer Bugs thread? Do you want me to move it there?

[bts]

Ok please...

Best Regards

[jsakalos]

Moved.

[Phil.Strong]

It would appear your using 4.x

The overflow button is in fact there but simply not getting the image correctly .. curious
Screen Shot 2011-11-07 at 10.09.59 AM.png

[Phil.Strong]

This is a framework bug in 4.0.5 that is now fixed in 4.0.7 (release). Try exporting and including 4.0.7 download

I'm sure yet if we'll be upgrade 1.2.x to use 4.0.7 but until then it will be broken on the canvas and the preview as well.

[bts]

The same result with ExtJS 4.0.7 - There is no button arrow for the overflow Toolbar Menu as you can see in the following image:

image01.jpg

[bts]

The code generated by Ext Designer 1.2 just for the Panel with the Toolbar issue is this:

Ext.define('Medidas.view.ui.MyPanel2', {
    extend: 'Ext.panel.Panel',

    border: 0,
    height: 110,
    id: 'panelInferior',
    layout: {
        type: 'fit'
    },
    collapsed: false,
    collapsible: true,
    title: 'Barra de Procesos',
    titleCollapse: true,
    region: 'south',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'toolbar',
                    border: 0,
                    enableOverflow: true,
                    layout: {
                        align: 'stretchmax',
                        type: 'hbox'
                    },
                    items: [
                        {
                            xtype: 'buttongroup',
                            height: 77,
                            defaults: {
                                scale: 'large',
                                iconAlign: 'top',
                                margin: '10, 5, 0, 5'
                            },
                            bodyPadding: '\'0 20 0 0\'',
                            headerPosition: 'left',
                            title: 'Grupo Uno',
                            items: [
                                {
                                    xtype: 'button',
                                    allowDepress: false,
                                    iconCls: 'iconProceso',
                                    text: 'Proceso 1',
                                    menu: {
                                        xtype: 'menu',
                                        items: [
                                            {
                                                xtype: 'menuitem',
                                                iconCls: 'iconProceso01',
                                                text: 'Sub Proceso 1'
                                            },
                                            {
                                                xtype: 'menuseparator'
                                            },
                                            {
                                                xtype: 'menuitem',
                                                iconCls: 'iconProceso02',
                                                text: 'Sub Proceso 2'
                                            },
                                            {
                                                xtype: 'menuitem',
                                                iconCls: 'iconProceso03',
                                                text: 'Sub Proceso 3'
                                            }
                                        ]
                                    }
                                },
                                {
                                    xtype: 'button',
                                    iconCls: 'iconProceso',
                                    text: 'Proceso 2'
                                },
                                {
                                    xtype: 'button',
                                    iconCls: 'iconProceso',
                                    text: 'Proceso 3'
                                },
                                {
                                    xtype: 'button',
                                    iconCls: 'iconProceso',
                                    text: 'Proceso 4'
                                },
                                {
                                    xtype: 'button',
                                    iconCls: 'iconProceso',
                                    text: 'Proceso 5'
                                }
                            ]
                        },
                        {
                            xtype: 'buttongroup',
                            height: 77,
                            defaults: {
                                scale: 'large',
                                iconAlign: 'top',
                                margin: '10, 5, 0, 5'
                            },
                            bodyPadding: '\'0 20 0 0\'',
                            headerPosition: 'left',
                            title: 'Grupo Dos',
                            items: [
                                {
                                    xtype: 'button',
                                    allowDepress: false,
                                    iconCls: 'iconProceso',
                                    text: 'Proceso 1'
                                },
                                {
                                    xtype: 'button',
                                    iconCls: 'iconProceso',
                                    text: 'Proceso 2'
                                },
                                {
                                    xtype: 'button',
                                    iconCls: 'iconProceso',
                                    text: 'Proceso 3'
                                },
                                {
                                    xtype: 'button',
                                    iconCls: 'iconProceso',
                                    text: 'Proceso 4'
                                }
                            ]
                        },
                        {
                            xtype: 'buttongroup',
                            height: 77,
                            defaults: {
                                scale: 'large',
                                iconAlign: 'top',
                                margin: '10, 5, 0, 5'
                            },
                            bodyPadding: '\'0 20 0 0\'',
                            headerPosition: 'left',
                            title: 'Grupo Tres',
                            items: [
                                {
                                    xtype: 'button',
                                    allowDepress: false,
                                    iconCls: 'iconProceso',
                                    text: 'Proceso 1'
                                },
                                {
                                    xtype: 'button',
                                    iconCls: 'iconProceso',
                                    text: 'Proceso 2'
                                },
                                {
                                    xtype: 'button',
                                    iconCls: 'iconProceso',
                                    text: 'Proceso 3'
                                },
                                {
                                    xtype: 'button',
                                    iconCls: 'iconProceso',
                                    text: 'Proceso 4'
                                }
                            ]
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }
});

Is there an issue with some combination of attributes ? or some mistake that i made?

Best Regards

[bts]

After spend a time in Ext Designer, i found the "enableOverFlow" issue in a config of the Toolbar that is in "align" config of the "layout" section. If you set the values "middle, stretch or stretchmax" the overFlow functionality of the Toolbar disappear but if set it to "top" the overFlow space menu at the end of the Toolbar appears and the Third Button Group disappear like in this image:

image01.jpg

But when i export the code to the webserver using pointing to ExtJS 4.0.7 appears that space without any button arrow menu for the third button group like in the next image:

image02.png

So, then i remove the button groups and only left the buttons and then scale the buttons to "SMALL" with the icon align to the "LEFT" like in the following code:

... Panel ...
items: [
    {
        xtype: 'toolbar',
        border: 0,
        enableOverflow: true,
        defaults: {
            scale: 'small',
            iconAlign: 'left'
        },
        items: [
            {
                 ... Buttons ...

And after that modification the Toolbar finally appears OK like in the following image:

image03.png

In summary, we need a Toolbar with LARGE buttons and the icon align to the TOP with the OVERFLOW functionality, but with this issue we can't create it. Do you know how can we accomplish the request?

I hope help with this kind of solution that i founded.

Best Regards

[bts]

The overFlow button arrow menu at the end of a Toolbar disappear when you set the "scale" of a button to other value than "small" ... is there a solution for this issue ?