Possible Bug: Ext.Viewport.add method

[nak1]

Guys,

I'm not certain this is a bug, so I wanted to run through what I'm doing to determine if what I'm doing is causing the bug.

I've got a process in which I add a floating panel to the Ext.Viewport using the add method. This is floating panel is added based on an action taken by the user. Once they have completed the action they will close the window and the floating panel is removed.

Ext.Viewport.add({
					xtype: 'formcreation',
					itemId:'creation',
					centered: true,
					modal: true,
					width: '90%',
					height:'90%',
					listeners:{
						save:function(o){
							try {
								Ext.Msg.alert('Success','The items were successfully submitted!');
								params.store.load();
								Ext.Viewport.remove(o);
							} 
							catch (e) {
								global.handleError(e);
							}
						},
						cancel:function(o){
							try {
								Ext.Viewport.remove(o);
							} 
							catch (e) {
								global.handleError(e);
							}
						}
					}
				})

Then at some later point the user can then add the floating panel again. The oddity that occurs on this second add, is that the Ext.field.Select object's list then appears behind the panel (see attachment)

bug.png

[mitchellsimoens]

I created this full test case and tried with 2.1.0 and the select field picker always shows on top:

Ext.define('Floater', {
    extend : 'Ext.Panel',
    xtype  : 'floater',

    config : {
        width      : '90%',
        height     : '90%',
        modal      : true,
        centered   : true,
        scrollable : true,
        items      : [
            {
                xtype : 'button',
                text  : 'Close Floater'
            },
            {
                xtype   : 'selectfield',
                options : [
                    { text : 'First Option',  value : 'first'  },
                    { text : 'Second Option', value : 'second' },
                    { text : 'Third Option',  value : 'third'  }
                ]
            }
        ],
        control : {
            'button' : {
                tap : 'destroy'
            }
        }
    }
});

Ext.application({
    name : 'Test',

    launch : function () {

        Ext.Viewport.add({
            items : [
                {
                    xtype   : 'button',
                    text    : 'Open Floater',
                    handler : function() {
                        Ext.Viewport.add({
                            xtype : 'floater'
                        });
                    }
                }
            ]
        });

    }
});

[nak1]

mitchellsimoens,

Thanks for testing that. Perhaps it's an override or some snippet of code that I've included.

[nak1]

Upon further inspection, somehow the z-index of the Ext.field.Select's list is the same as the floating Ext.Panel. I've attached a screen shot of the HTML elements as they appear in Chrome. As you can see the z-index is off for the list is off, as it's the same as the z-index used by the floating Ext.Panel.

Any thoughts as to where that z-index is being set, and why it's off like that?
bug.jpg

[nak1]

So looks like there's some sort of issue with the way the z-index is being set and not having the proper value. I overrode the Ext.layout.Default.insertBodyItem which seems to resolve the problem.

//Fix issue with zindex after an item has been rendered once.
		Ext.define('Ux.layout.Default',{
			override:'Ext.layout.Default',
			 insertBodyItem: function(item) {
		        var zindex,ztest=false,override=false,container = this.container.setUseBodyElement(true),
		            bodyDom = container.bodyElement.dom;
			   if (item.getZIndex() === null) {
					zindex=(container.indexOf(item) + 1) * 2;
					//Make certain there are no overlapping z-indexes.
					while (!ztest){
						ztest=true;
						for (var i=0; i<container.items.items.length; i++) {
							if(!Ext.isEmpty(container.items.items[i].getZIndex)){
								if(zindex==container.items.items[i].getZIndex()){
									ztest=false;
									override=true;
									++zindex;
								};
							}
						};
					}
					item.setZIndex(zindex+1);//Add two to allow for the mask
					//This is to override any issues with the mask not being on the proper zindex
					if(!Ext.isEmpty(item.setParent) && override){
						item.setParent(container);
					}
		        }
		        bodyDom.insertBefore(item.element.dom, bodyDom.firstChild);
				
		        return this;
		    }
		})