Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-1156 in a recent build.
  1. #1
    Sencha User geekflyer's Avatar
    Join Date
    Nov 2011
    Location
    Mannheim, Germany
    Posts
    52
    Vote Rating
    2
    geekflyer is on a distinguished road

      0  

    Default Setting the Config centered : true of an Ext.Container --> Container never hides

    Setting the Config centered : true of an Ext.Container --> Container never hides


    Hi guys i found a Problem with the centered config of an Ext.Container.

    I'm using an Container with Cardlayout, which regularly should only show one the cards. However, in one card, which is also an Container, i did set the config centered to true, so that the contents of that card are relatively in the middle of he Page (i use it for an login page).
    However this causes the specific card to never dissapear, instead it overlays one of the other cards. With other cards i mean the card, which i want to be active after pressing the login button. So there are 2 cards shown parallely, mixing up in a mess

    Do you have another idea of centering ui controls in the View?

    Here's part of my code, this the View, where i define the Container with the CardLayout and it's initial items:

    Code:
    /**
     * Created by JetBrains WebStorm.
     * User: geekflyer
     * Date: 30.11.11
     * Time: 15:23
     * To change this template use File | Settings | File Templates.
     */
    Ext.define('NeqMobile.view.Workspace', {
            extend:'Ext.Panel',
            requires:['NeqMobile.view.login.LoginForm'],
            alias: 'widget.workspace',
    
    
    
    
            config: {
    
    
                layout: {
                    type: 'card',
                    animation: {
                        type: 'slide',
                        direction: 'left'
                    }
                },
    
    
                items: [
                    {
                        xtype:'loginform'
                    }
    
    
                    ,
                    {
                        html: 'This here you can see in parellel, with the loginform, which is a bug.'
                    },
    
    
                    {
                        html: 'This here you cannot see at the beginning, but after activating the item, it would also show up in parallel with the loginform.'
                    }
                ]
            }}
    
    
    );

    This is the Container / Card, with the centered : true config, which causes it to be always visible (overlays the other), even when another card is activated.

    Code:
    /**
     * @author geekflyer
     */
    
    
    Ext.define('NeqMobile.view.login.LoginForm', {
        extend:'Ext.Container',
       // requires:'NeqMobile.store.Users',
        alias:'widget.loginform',
    
    
    
    
        // this causes the bug, if i remove it, it works like a charm, except that the items in the Container are not centered.
        centered: true,
    
    
        config:{
    
    
           centered: true,     // this causes the bug too, no difference at all
            items:[{
    
    
                    xtype:'fieldset',
                    title:'Login',
                    width:400,
    
    
                    instructions:'Enter your credentials',
    
    
                    items:[
                        {
                            xtype:'textfield',
                            label:'Name',
                            name:'name'
                        },
                        {
                            xtype:'passwordfield',
                            label:'Password',
                            name:'password'
                        },
                        {
                            xtype:'selectfield',
                            label:'Server',
                            name:'server',
                            options:[
                                { text:'First Server ', value:'first' },
                                { text:'Second Server', value:'second' }
                            ]
                        }
                 ,
                         {
                    xtype:'button',
                    ui:'confirm',
                    text:'Login',
                    width:400
                }
                    ]
               },
    
    
                {
                    xtype: 'button',
                    ui :'action',
                    id: 'settingsButton',
                    text:'Settings',
                    width:200}
    
    
            ]
        }
    });

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Thank you for the report.

    Sencha Inc

    Jamie Avins

    @jamieavins

  3. #3
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    This looks like expected behavior to me. It happens because all cards are actually laid on top of each other, and because your top one is centered and not stretched to fit, you can see the one below.

    To fix the problem, wrap the centered item in another container, and it will then take the full-size of the card layout.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  4. #4
    Sencha User geekflyer's Avatar
    Join Date
    Nov 2011
    Location
    Mannheim, Germany
    Posts
    52
    Vote Rating
    2
    geekflyer is on a distinguished road

      0  

    Default


    Hello again, i think the bug is not completely fixed yet. The behaviour in PR4 changed and improved a bit, so that i don't have this mess with the card layout, however there are still some bugs.

    Here is the sample code, which demonstrates some typically buggy behaviour:
    Code:
    Ext.application({
        name:'centeredBug',
        launch:function () {
    
    
            var container = Ext.create('Ext.Container',
                {
                    fullscreen:true,
                    items:[
    
    
                        {
                            docked:'top',
                            xtype:'toolbar',
                            title:'blabla',
                            items:[
                                {xtype:'spacer'},
                                {
                                    xtype:'button',
                                    itemId:'settingsbutton',
                                    iconCls:'settings',
                                    iconMask:true
                                }
                            ]
                        },
                        {xtype:'button',
                            centered:true,
                            text:'Click Me',
                            handler:function () {
                               // Ext.Viewport.setMasked(true);
                                Ext.Msg.alert('Choose a Connection', 'Choose a connection.', Ext.emptyFn);
                               // Ext.Viewport.setMasked(false);
                            }
                        }
                    ]
                }
            );
            Ext.Viewport.add(container);
        }
    });
    This code shows a Container with a toolbar and a button in the middle. The button is centered with the attribute centered: true
    When i click on the Button a MessageBox is shown up, however - and that is the problem - the MessageBox is shown behind the Button (even you can see the MessageBox partly). If you remove the centered attribute, everything works as expected.

    This is just one part of the story. I tried to figure out the problem or to find a workaround and i found some even more strange behaviour which i list here:

    • The bug can be bypassed by setting Ext.Viewport.setMasked(true) before the MessageBox is shown and Ext.Viewport.setMasked(false) after it
    • When i try to wrap the centered button (or some other centered component) into another container, the button is not shown at all (i get an empty container)
    • when i remove the toolbar in my example from the items array, the button works as expected.
    So plz open the bug ticket again.

    And plz, plz fix that bug for the next release or give me a hint how to correct it in the framework files. I really need that for an horizontally and vertically centered login component.

    greets geekflyer

  5. #5
    Sencha User geekflyer's Avatar
    Join Date
    Nov 2011
    Location
    Mannheim, Germany
    Posts
    52
    Vote Rating
    2
    geekflyer is on a distinguished road

      0  

    Default


    push, still open.

  6. #6
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Fair enough.

    Sencha Inc

    Jamie Avins

    @jamieavins

  7. #7
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Strange.

    Okay so the issue seems to be the the Ext.Msg global instance is created before anything else, so the zIndex is always the lowest.

    I've updated MessageBox zIndex to always start at 10, considering it almost always needs to be higher than everything else. People can override this if they need to.

    You can override this configuration in the current release by using the following override:

    Code:
    Ext.define('Ext.overrides.messagebox.zIndexIssues', {
        overrides: 'Ext.MessageBox',
    
        config: {
            zIndex: 10
        }
    });
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  8. #8
    Sencha User geekflyer's Avatar
    Join Date
    Nov 2011
    Location
    Mannheim, Germany
    Posts
    52
    Vote Rating
    2
    geekflyer is on a distinguished road

      0  

    Default


    hmm for me that doesn't help. I tried your suggested code and the issue remains.
    I also don't think the problem is caused by the zIndex of the Messagebox. I guess it's a problem with the zIndex of ANY component, when you set the centered config to true.
    Can you reproduce this with my code?

  9. #9
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    The zIndex is set when your component is instantiated. So if we did this:

    - instantiate something centered - zIndex: 1
    - instantiate something centered - zIndex: 2
    - instantiate something centered - zIndex: 3
    - instantiate something centered - zIndex: 4

    Now the problem is that in your application this is the order:

    - instantiate Ext.Msg - zIndex: 1
    - instantiate centered button - zIndex: 2

    So to get around it we give Ext.MessageBox a zIndex of 10 so it is always above anything else.

    And you are correct about the override. Not sure why it isn't working, some timing issue. Anyway, this will fix it:

    Code:
    Ext.Msg.setZIndex(10);
    Just call that at the start of your launch method.

    Thanks for the detailed help.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.