This issue duplicates another issue.
  1. #1
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    257
    Vote Rating
    8
    bseddon will become famous soon enough

      0  

    Default Layout regression in 4.2

    Layout regression in 4.2


    The example below illustrates a significant layout regression introduced in 4.2. When used with ExtJS 4.1.3 the same example works just fine. This has been checked with build 778.

    In the example, there are two containers used to show warning and error messages at the top of the display. These are hidden normally.

    Below the hidden message containers there are two cards, one of which is displayed by default. Navigate to the other card by pressing the button at the top of the screen.

    In the example, a warning and an error are shown when a button is pressed on the default card. This works OK. And an alert will be displayed giving handy instructions. Make a mental note of the height of the two messages show when the button was pressed.

    Now press the button 'Goto rule definitions' at the top of the window. This causes the other card to be displayed. This second card contains a tab panel with two tabs. The initial tab ('Rules') displays just fine.

    Now click on the 'Types' panel. The display is wrong. You will see a white panel at the bottom of the screen which should not be there. The height of this panel is exactly the same height as the pair of message containers. It appears because the tab panel is not high enough.

    Now go back to the 'Rules' tab. It is now wrong as well because the white panel has appeared here also.

    Now click on the 'Goto assignments' button at the top of the viewport. This goes back to the default card. You will see that the original card also has the panel at the bottom.

    There are other problems. At any time the sizing problem can be masked by resizing the browser. However this is a temporary fix. Navigation actions that cause a re-render result in the bottom panel reappearing.

    Now try this. Make your browser cover, say, half the width of your screen and display this application. Now press the button to show the warning and error messages. Hide them by pressing the buttons to the right of each message. Next, make the browser window wider or narrower by an inch or 100 pixels or so. The exact size doesn't matter but more and wider makes the issue more obvious. Finally, press the button once again to show the error messages.

    You will see that the button and the message containers have not been resized to reflect the change in the size of the browser. This is especially puzzling for the button which did resize before it was pressed.

    Code:
    Ext.define('STApp.view.STViewport', {
        extend: 'Ext.container.Viewport',
    
        layout: {
            type: 'card'
        },
    
        initComponent: function() {
            var me = this;
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'container',
                        setWarningMessage: function(message) {
                            var status = this.down("#warning");
                            status.setText(message);
                            status.ownerCt.setVisible(true);
                            status.ownerCt.animate({
                                dynamic: true,
                                duration: 500,
                                to: {
                                    height: 23
                                }
                            });
                        },
                        clearWarningMessage: function(message) {
                            var status = this.down("#warning");
                            status.setText("");
                            status.ownerCt.setHeight(0, true);
                        },
                        setErrorMessage: function(message) {
                            var status = this.down("#error");
                            status.setText(message);
                            status.ownerCt.setVisible(true);
                            status.ownerCt.animate({
                                dynamic: true,
                                duration: 500,
                                to: {
                                    height: 23
                                }
                            });
                        },
                        clearErrorMessage: function(message) {
                            var status = this.down("#error");
                            status.setText("");
                            status.ownerCt.setHeight(0, true);
                        },
                        id: 'outercontainer',
                        ui: 'red-panel',
                        layout: {
                            type: 'border'
                        },
                        items: [
                            {
                                xtype: 'toolbar',
                                region: 'north',
                                height: 26,
                                id: 'headertoolbar',
                                items: [
                                    {
                                        xtype: 'button',
                                        id: 'gotorules',
                                        padding: '0 0 4 2',
                                        text: 'Goto Rule definitions',
                                        listeners: {
                                            click: {
                                                fn: me.onGotoRulesClick,
                                                scope: me
                                            }
                                        }
                                    },
                                    {
                                        xtype: 'tbfill'
                                    },
                                    {
                                        xtype: 'button',
                                        id: 'gotoassignments',
                                        padding: '0 2 4 0',
                                        text: 'Goto Assignments',
                                        listeners: {
                                            click: {
                                                fn: me.onGotoAssignmentsClick,
                                                scope: me
                                            }
                                        }
                                    }
                                ]
                            },
                            {
                                xtype: 'container',
                                region: 'north',
                                height: 24,
                                hidden: true,
                                id: 'warningcontainer',
                                style: 'background-color: yellow; color: black;',
                                layout: {
                                    align: 'stretch',
                                    type: 'hbox'
                                },
                                items: [
                                    {
                                        xtype: 'label',
                                        flex: 1,
                                        margins: '4',
                                        id: 'warning',
                                        maxHeight: 22,
                                        minHeight: 15
                                    },
                                    {
                                        xtype: 'button',
                                        padding: '4 4 auto 4',
                                        style: 'background-color: yellow;\r\nborder: 0;',
                                        iconCls: 'icon-warning',
                                        tooltip: 'Close',
                                        listeners: {
                                            click: {
                                                fn: me.onWarningCloseButtonClick,
                                                scope: me
                                            }
                                        }
                                    }
                                ]
                            },
                            {
                                xtype: 'container',
                                region: 'north',
                                height: 24,
                                hidden: true,
                                id: 'errorcontainer',
                                style: 'background-color: pink;',
                                layout: {
                                    align: 'stretch',
                                    type: 'hbox'
                                },
                                items: [
                                    {
                                        xtype: 'label',
                                        flex: 1,
                                        margins: '4',
                                        id: 'error',
                                        maxHeight: 22,
                                        minHeight: 15
                                    },
                                    {
                                        xtype: 'button',
                                        padding: '4 4 auto 4',
                                        style: 'background-color: pink;\r\nborder: 0;',
                                        iconCls: 'icon-exclamation',
                                        tooltip: 'Close',
                                        listeners: {
                                            click: {
                                                fn: me.onErrorButtonClick,
                                                scope: me
                                            }
                                        }
                                    }
                                ]
                            },
                            {
                                xtype: 'container',
                                region: 'center',
                                id: 'mainnavigationcontainer',
                                style: 'background-color: white;',
                                layout: {
                                    type: 'card'
                                },
                                items: [
                                    {
                                        xtype: 'panel',
                                        id: 'ruleassignmentspanel',
                                        ui: 'green-panel',
                                        layout: {
                                            type: 'border'
                                        },
                                        header: false,
                                        title: 'Assign a rule to a cell',
                                        items: [
                                            {
                                                xtype: 'button',
                                                region: 'north',
                                                text: 'Press to cause the problem',
                                                listeners: {
                                                    click: {
                                                        fn: me.onButtonClick,
                                                        scope: me
                                                    }
                                                }
                                            }
                                        ]
                                    },
                                    {
                                        xtype: 'tabpanel',
                                        id: 'components',
                                        bodyBorder: false,
                                        collapsed: false,
                                        frameHeader: false,
                                        header: false,
                                        title: 'Components',
                                        activeTab: 1,
                                        deferredRender: false,
                                        items: [
                                            {
                                                xtype: 'panel',
                                                layout: {
                                                    align: 'middle',
                                                    pack: 'center',
                                                    type: 'hbox'
                                                },
                                                bodyBorder: false,
                                                bodyStyle: 'background-color: #fff0f0;',
                                                frameHeader: false,
                                                title: 'Types',
                                                items: [
                                                    {
                                                        xtype: 'textareafield',
                                                        flex: 1,
                                                        maxWidth: 400,
                                                        minHeight: 140,
                                                        width: 200,
                                                        fieldLabel: 'Label',
                                                        hideLabel: true,
                                                        value: 'The white area at the bottom of the screen should not appear.\r\n\r\nIt is the same height as the two message bars back on the assignments screen.\r\n\r\nNow goto the Rules tab again. It is wrong now also.\r\n\r\nAfter you have done that, resize the browser.  It will fix the problem.',
                                                        readOnly: true
                                                    }
                                                ]
                                            },
                                            {
                                                xtype: 'panel',
                                                layout: {
                                                    align: 'middle',
                                                    pack: 'center',
                                                    type: 'hbox'
                                                },
                                                bodyStyle: 'background-color: #f0fff0;',
                                                title: 'Rules',
                                                items: [
                                                    {
                                                        xtype: 'label',
                                                        text: 'This looks OK.  Now click to see the \'Types\' tab.'
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ],
                listeners: {
                    boxready: {
                        fn: me.onViewportBoxReady,
                        scope: me
                    }
                }
            });
    
            me.callParent(arguments);
        },
    
        onGotoRulesClick: function(button, e, eOpts) {
            var container = this.down("#mainnavigationcontainer");
            container.getLayout().setActiveItem("components");
    
            button.setVisible(false);
            this.down("#gotoassignments").setVisible(true);
    
            var container = this.down('#outercontainer');
            container.clearWarningMessage();
            container.clearErrorMessage();
    
        },
    
        onGotoAssignmentsClick: function(button, e, eOpts) {
            var container = this.down("#mainnavigationcontainer");
            container.getLayout().setActiveItem("ruleassignmentspanel");
    
            button.setVisible(false);
            this.down("#gotorules").setVisible(true);
        },
    
        onWarningCloseButtonClick: function(button, e, eOpts) {
            button.up('#outercontainer').clearWarningMessage();
    
        },
    
        onErrorButtonClick: function(button, e, eOpts) {
            button.up('#outercontainer').clearErrorMessage();
    
        },
    
        onButtonClick: function(button, e, eOpts) {
            this.down('#outercontainer').setWarningMessage("Warning");
            this.down('#outercontainer').setErrorMessage("Error");
            alert("Look at the height of the two error messages display.\nNow click on the 'Goto rule definitions' button");
        },
    
        onViewportBoxReady: function(component, width, height, eOpts) {
            var container = this.down("#mainnavigationcontainer");
    
            // Find the assignments button
            var gotoAssignmentsButton = this.down("button[id=gotoassignments]");
    
            // Find the rules button
            var gotoRulesButton = this.down("button[id=gotorules]");
    
            gotoAssignmentsButton.setVisible(container.getLayout().getActiveItem().getId() !== "ruleassignmentspanel");
            gotoRulesButton.setVisible(container.getLayout().getActiveItem().getId() !== "components");
        }
    });
    
    Ext.onReady(function(){
        Ext.create('STApp.view.STViewport');
    });

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,833
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    It's the same root cause as the other bug you posted recently. It's triggering a layout failure when the calculated width of the button is very small (0, in this case). We're looking into a fix.

    Thanks for the test case, it's tested more simply with:

    Code:
    Ext.onReady(function(){
        new Ext.button.Button({
            height: 0,
            text: 'Foo',
            renderTo: document.body,
        });
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    257
    Vote Rating
    8
    bseddon will become famous soon enough

      0  

    Default


    Well now I'm kicking myself. Thanks for the heads up about the button. I never made the connection. Yes, if I 'hide' the message by setting their heights to 1px or remove the button which is in the container that is set to a height of zero px the problem goes away. The only reason for setting the container height to zero (and implicitly the button) is to be able to animate so my obvious short term solution is to not animate.

    Thanks again.

  4. #4
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    257
    Vote Rating
    8
    bseddon will become famous soon enough

      0  

    Default


    Thanks again for the hint about buttons being the cause of the layout issues. It turns out there are several places in our apps where buttons are implicitly given a height of zero pixels because their container is given zero height for animation purposes. This information has allowed us to clear up a number of outstanding problems none which we would ever have attributed to the buttons.

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi