Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Sencha User nak1's Avatar
    Join Date
    Jan 2008
    Posts
    266
    Vote Rating
    0
    nak1 is an unknown quantity at this point

      0  

    Default Possible Bug: Ext.Viewport.add method

    Possible Bug: Ext.Viewport.add method


    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.
    Code:
    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
    No longer a Newbie

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,065
    Vote Rating
    852
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


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

    Code:
    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'
                            });
                        }
                    }
                ]
            });
    
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User nak1's Avatar
    Join Date
    Jan 2008
    Posts
    266
    Vote Rating
    0
    nak1 is an unknown quantity at this point

      0  

    Default


    mitchellsimoens,

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

  4. #4
    Sencha User nak1's Avatar
    Join Date
    Jan 2008
    Posts
    266
    Vote Rating
    0
    nak1 is an unknown quantity at this point

      0  

    Default


    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
    No longer a Newbie

  5. #5
    Sencha User nak1's Avatar
    Join Date
    Jan 2008
    Posts
    266
    Vote Rating
    0
    nak1 is an unknown quantity at this point

      0  

    Default


    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.

    Code:
    //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;
    		    }
    		})
    No longer a Newbie

Thread Participants: 1