Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Touch Premium Member bts's Avatar
    Join Date
    Mar 2011
    Location
    Mexicali, Mexico
    Posts
    33
    Vote Rating
    0
    bts is on a distinguished road

      0  

    Question enableOverFlow in Toolbar doesn't work propertly

    enableOverFlow in Toolbar doesn't work propertly


    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.



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

    Best Regards

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,509
    Vote Rating
    374
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Shouldn't this belong to Designer Bugs thread? Do you want me to move it there?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  3. #3
    Touch Premium Member bts's Avatar
    Join Date
    Mar 2011
    Location
    Mexicali, Mexico
    Posts
    33
    Vote Rating
    0
    bts is on a distinguished road

      0  

    Default


    Ok please...

    Best Regards

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,509
    Vote Rating
    374
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Moved.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  5. #5
    Sencha - Architect Dev Team Phil.Strong's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,848
    Vote Rating
    57
    Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice

      0  

    Default


    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
    @philstrong
    #SenchaArchitect
    Sencha Architect Development Team

  6. #6
    Sencha - Architect Dev Team Phil.Strong's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,848
    Vote Rating
    57
    Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice

      0  

    Default


    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.
    Phil Strong
    @philstrong
    #SenchaArchitect
    Sencha Architect Development Team

  7. #7
    Touch Premium Member bts's Avatar
    Join Date
    Mar 2011
    Location
    Mexicali, Mexico
    Posts
    33
    Vote Rating
    0
    bts is on a distinguished road

      0  

    Post The same result with ExtJS 4.0.7 - There is no button arrow for the overflow...

    The same result with ExtJS 4.0.7 - There is no button arrow for the overflow...


    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

  8. #8
    Touch Premium Member bts's Avatar
    Join Date
    Mar 2011
    Location
    Mexicali, Mexico
    Posts
    33
    Vote Rating
    0
    bts is on a distinguished road

      0  

    Post Here it is the Ext Designer 1.2 generated code for the issue Toolbar

    Here it is the Ext Designer 1.2 generated code for the issue Toolbar


    The code generated by Ext Designer 1.2 just for the Panel with the Toolbar issue is this:
    Code:
    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

  9. #9
    Touch Premium Member bts's Avatar
    Join Date
    Mar 2011
    Location
    Mexicali, Mexico
    Posts
    33
    Vote Rating
    0
    bts is on a distinguished road

      0  

    Thumbs up [SOLUTION] For this issue that i founded !!!

    [SOLUTION] For this issue that i founded !!!


    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:

    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

  10. #10
    Touch Premium Member bts's Avatar
    Join Date
    Mar 2011
    Location
    Mexicali, Mexico
    Posts
    33
    Vote Rating
    0
    bts is on a distinguished road

      0  

    Default


    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 ?