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

[geekflyer]

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:



/**
* 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.




/**
* @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}


]
}
});

[Jamie Avins]

Thank you for the report.

[rdougan]

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.

[geekflyer]

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:

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

[geekflyer]

push, still open.

[Jamie Avins]

Fair enough.

[rdougan]

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:


Ext.define('Ext.overrides.messagebox.zIndexIssues', {
overrides: 'Ext.MessageBox',

config: {
zIndex: 10
}
});

[geekflyer]

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?

[rdougan]

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:


Ext.Msg.setZIndex(10);

Just call that at the start of your launch method.

Thanks for the detailed help.