Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: [FIXED-554] Combo box list appears in background

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium User mynameisyoda's Avatar
    Join Date
    Mar 2008
    Location
    Turin, Italy
    Posts
    14
    Vote Rating
    0
      0  

    Exclamation [FIXED-554] Combo box list appears in background

    Ext version tested:

    • Ext 3.1/3.1.1



    Adapter used:

    • ext



    css used:

    • only default ext-all.css





    Browser versions tested against:

    • IE7
    • FF3.5.7 (firebug 1.5 installed)
    • Safari 4.0.4



    Operating System:

    • Mac OX X 10.4.11
    • WinXP Pro



    Description:

    • A panel contains buttons to show more than one floating window
    • Windows contain form with combo box.
    • List of values of Combo box included in floating windows appears in background after the firs time that they are displayed.



    Test Case:

    Code:
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title id='title'>Title</title>
     
            <!-- ** CSS ** -->
            <!-- base library -->
            <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
     
            <!-- overrides to base library -->
     
     
            <!-- ** Javascript ** -->
            <!-- base library -->
            <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="../../ext-all-debug.js"></script>
     
     
            <!-- overrides to base library -->
     
            <!-- extensions -->
     
            <!-- page specific -->
     
            <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
     
            Ext.onReady(function(){
    
                var addWindow=new Ext.Window({
                    title: 'Add window',
                    width:260,
                    height:100,
                    closable: true,
                    closeAction: 'hide',
                    items:[{
                        xtype: 'form',
                        frame: true,
                        items: [{
                            xtype: 'combo',
                            fieldLabel: 'Add combo',
                            width:100,
                            triggerAction: 'all',
                            lazyRender:true,
                            mode: 'local',
                            store: new Ext.data.ArrayStore({
                                id: 0,
                                fields: [
                                'myId',
                                'displayText'
                                ],
                                data: [[1, 'item1'], [2, 'item2'],[3, 'item3'],[4, 'item4'],[5, 'item5'],[6, 'item6']]
                            }),
                            valueField: 'myId',
                            displayField: 'displayText'
                        }]
                    }],
                    buttons:[{
                        text: 'Cancel',
                        handler: function(){
                            addWindow.hide();
                        }
                    }]
                });
            
                var editWindow = new Ext.Window({
                    title: 'Edit window',
                    width:260,
                    height:100,
                    closable: true,
                    closeAction: 'hide',
                    border:false,
                    items:[{
                        xtype: 'form',
                        frame: true,
                        items: [{
                            xtype: 'combo',
                            width:100,
                            fieldLabel: 'Edit combo',
                            triggerAction: 'all',
                            lazyRender:true,
                            mode: 'local',
                            store: new Ext.data.ArrayStore({
                                id: 1,
                                fields: [
                                'myId2',
                                'displayText2'
                                ],
                                data: [[1, 'item1'], [2, 'item2'],[3, 'item3'],[4, 'item4'],[5, 'item5'],[6, 'item6']]
                            }),
                            valueField: 'myId2',
                            displayField: 'displayText2'
                        }]
                    }],
                    buttons:[{
                        text: 'cancel',
                        handler: function(){
                            editWindow.hide();
                        }
                    }]
                });
            
            
                var simple = new Ext.Panel({
                    frame:true,
                    title: 'Simple panel',
                    bodyStyle:'padding:5px 5px 0',
                    width: 600,
                    height: 400,
                    items:[{
                        xtype:'button',
                        text: 'Add',
                        width:60,
                        handler: function() {
                            addWindow.show();
                        }
                    },{
                        xtype:'button',
                        text: 'Edit',
                        width:60,
                        handler: function(){
                            editWindow.show();
                        }
                    }]
                });
            
                simple.render(document.body);
            });//end onReady
            </script>
     
        </head>
        <body>
        </body>
    </html>
    Steps to reproduce the problem:

    • open the first window, display the value list
    • open the second window, display the value list
    • in the first window, display the value list again


    Screenshot or Video:

    • attached



    Debugging already done:

    • The same code with ext-3.0.3 works fine!!!!



    Possible fix:

    • no idea...
    Attached Images Attached Images
    Sergio - Ext addict
    -----------------------------
    may the force be with you

  2. #2
    Sencha User
    Join Date
    Aug 2008
    Posts
    2
    Vote Rating
    0
      0  

    Default Z-index difference

    Hello guys,

    I have the same problems here. I have implemented some Form windows, including several comboboxes.

    I tested it with version 3.0 and version 3.1.1. The main difference is the z-index. In version 3.0 the combobox list has a z-index of 11000 and in 3.1.1 an index of 3.
    If I restore the number manually, using Firebug, the list works fine.

    Clearly something is wrong with the z-indexing somehow. But I'm just a rookie. Some help of experts is needed....

    In 3.0
    Code:
    <div id="ext-gen784" class="x-layer x-combo-list " style="position: absolute; z-index: 11000; visibility: hidden; left: -10000px; top: -10000px; width: 298px; height: 100px; font-size: 12px;">
    In 3.1.1
    Code:
    <div id="ext-gen990" class="x-layer x-combo-list " style="position: absolute; z-index: 3; visibility: hidden; left: -10000px; top: -10000px; width: 304px; height: 100px; font-size: 12px;">
    Problem solved..... I'm integrating ext in an application, with some additional stylesheets.
    And in one stylesheet, there was a z-index defined for the body of -2.
    -2 + 5 (from the combobox code) gives 3..... Removing the z-index from the body, solved my problem.
    Last edited by ChrisSmeets; 10 Feb 2010 at 12:57 PM. Reason: Problem solved.

  3. #3
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    19
      0  

    Default

    Added a zindex check for expand in addition to the existing init. Fixed svn-6034.

  4. #4
    Sencha Premium User mynameisyoda's Avatar
    Join Date
    Mar 2008
    Location
    Turin, Italy
    Posts
    14
    Vote Rating
    0
      0  

    Red face Bug still persists in more complex example

    Sorry but I've posted a oversimplified test case. With a custom object (a predefined combo) the problem still persists.

    Code:
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title id='title'>Title</title>
    
            <!-- ** CSS ** -->
            <!-- base library -->
            <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    
            <!-- ** Javascript ** -->
            <!-- base library -->
            <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="../../ext-all-debug.js"></script>
    
            <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
    
            Ext.onReady(function(){
    
                var activitiesCombo = Ext.extend(Ext.form.ComboBox, {
                    // public config attributes
                    name: 'activities',
                    fieldLabel: 'Activities',
                    width: 100,
                    listWidth: 100,
                    emptyText: 'No activity selected',
    
                    initComponent:function() {
                        var config = {
                            mode: 'local',
                            store: new Ext.data.ArrayStore({
                                id: 0,
                                fields: [
                                'codActivity',
                                'description'
                                ],
                                data: [[1, 'activity 1'], [2, 'activity 2'],[3, 'activity 3'],[4, 'activity 4'],[5, 'activity 5'],[6, 'activity 6']]
                            }),
                            displayField:'description',
                            valueField:'codActivity',
                            triggerAction:'all',
                            tpl: '<tpl for="."><div ext:qtip="{description}" class="x-combo-list-item">{codActivity} {description}</div></tpl>'
                        } // eo config
                        // apply config
                        Ext.apply(this, Ext.apply(this.initialConfig, config));
    
                        // call parent
                        activitiesCombo.superclass.initComponent.apply(this, arguments);
    
                    } // eo function initComponent
                }); // eo extend
    
                Ext.reg('activitiescombo', activitiesCombo);
    
                var normalWindow=new Ext.Window({
                    title: 'Normal combo window',
                    width:260,
                    height:100,
                    closable: true,
                    closeAction: 'hide',
                    items:[{
                        xtype: 'form',
                        frame: true,
                        items: [{
                            xtype: 'combo',
                            fieldLabel: 'Normal combo',
                            width:100,
                            triggerAction: 'all',
                            lazyRender:true,
                            mode: 'local',
                            store: new Ext.data.ArrayStore({
                                id: 0,
                                fields: [
                                'myId',
                                'displayText'
                                ],
                                data: [[1, 'item1'], [2, 'item2'],[3, 'item3'],[4, 'item4'],[5, 'item5'],[6, 'item6']]
                            }),
                            valueField: 'myId',
                            displayField: 'displayText'
                        }]
                    }],
                    buttons:[{
                        text: 'Cancel',
                        handler: function(){
                            normalWindow.hide();
                        }
                    }]
                });
    
                var customWindow = new Ext.Window({
                    title: 'Custom combo window',
                    width:260,
                    height:100,
                    closable: true,
                    closeAction: 'hide',
                    border:false,
                    items:[{
                        xtype: 'form',
                        frame: true,
                        items: [{
                            xtype: 'activitiescombo'
                        }]
                    }],
                    buttons:[{
                        text: 'cancel',
                        handler: function(){
                            customWindow.hide();
                        }
                    }]
                });
    
    
                var simple = new Ext.Panel({
                    frame:true,
                    title: 'Simple panel',
                    bodyStyle:'padding:5px 5px 0',
                    width: 600,
                    height: 400,
                    items:[{
                        xtype:'button',
                        text: 'Custom',
                        width:60,
                        handler: function() {
                            customWindow.show();
                        }
                    },{
                        xtype:'button',
                        text: 'Normal',
                        width:60,
                        handler: function(){
                            normalWindow.show();
                        }
                    }]
                });
    
                simple.render(document.body);
            });
    
    </script>
    
        </head>
        <body>
        </body>
    </html>
    See Attachment Picture3 and Picture4

    Steps to reproduce:


    • Open the first Window
    • Show the list
    • Open the second Window
    • Show the list
    • Show again the first list
    Attached Images Attached Images
    Last edited by mynameisyoda; 11 Feb 2010 at 3:36 AM. Reason: Better oject naming in example; added steps to reproduce
    Sergio - Ext addict
    -----------------------------
    may the force be with you

  5. #5
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    19
      0  

    Default

    No, your 1st case was good as is your 2nd. These are both working properly in SVN 6034/6035 (3.1.x branch and 3.2.x branch).

  6. #6
    Sencha Premium User mynameisyoda's Avatar
    Join Date
    Mar 2008
    Location
    Turin, Italy
    Posts
    14
    Vote Rating
    0
      0  

    Default

    My second post is tested againts SVN #6037 and the behavior persists.
    How could I help you to reproduce it?
    Sergio - Ext addict
    -----------------------------
    may the force be with you

  7. #7
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    19
      0  

    Default

    Which branch did you check out?

  8. #8
    Sencha Premium User mynameisyoda's Avatar
    Join Date
    Mar 2008
    Location
    Turin, Italy
    Posts
    14
    Vote Rating
    0
      0  

    Default

    I'm not so expert in SVN (we use CVS daily); in
    Code:
    .svn/entries
    I found

    Code:
    dir
    6037
    http://code.extjs.com/svn/ext/trunk
    http://code.extjs.com/svn/ext
    so I suppose is trunk (ext-3.2?)
    Sergio - Ext addict
    -----------------------------
    may the force be with you

  9. #9
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    19
      0  

    Default

    We are currently committing to the 3.1.x and 3.2.x branches where it is more clear what versions you would be using. This is why you aren't seeing these changes. 3.1.x is what will become 3.1.2 currently and 3.2.x will become 3.2.0 when we tag them for release. This particular fix is in both branches.

  10. #10
    Sencha Premium User mynameisyoda's Avatar
    Join Date
    Mar 2008
    Location
    Turin, Italy
    Posts
    14
    Vote Rating
    0
      0  

    Talking 3.1.x-6054 Fix the issue! thanks!!!

    I've checked out the 3.1.x branch, rev. #6054 and the problem is fixed!
    thanks a lot for the support!
    Sergio - Ext addict
    -----------------------------
    may the force be with you

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •