Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext User
    Join Date
    Dec 2010
    Posts
    2
    Vote Rating
    0
    tuak is on a distinguished road

      0  

    Default [CLOSED] IE Bug with datefield and combobox (anchor '100%')

    [CLOSED] IE Bug with datefield and combobox (anchor '100%')


    Ext versions tested:
    • Ext 3.3.1, 3.2.1, 3.0.3, 3.0.0 and 2.2.1
    Adapter used:
    • ext
    CSS used:
    • only default ext-all.css
    Browser versions tested against:
    • IE6, IE8 and FF3.6
    Operating System:
    • WinXP Pro
    Description:

    Hi,

    sorry for the double post but I think this is a bug. That's why I open a new thread in "Ext: Bugs".

    In my first code I use a border layout with a center tabpanel and an east panel. I put in this tabpanel a formpanel with some form elements in it (anchor '100%'). The position of the datefield is not correct in IE6 & IE8. Only FF 3.6 shows the elements as expected. I've tried the code with different Ext JS 3 Versions. The code only works with Ext JS 2.2.1 for IE6, IE8 and FF3.6.

    My second code is similar. I just use a border layout with a center formpanel with some form elements in it (anchor '100%'). If I collapse the east panel and then expand it the position of the combobox is not correct anymore in IE6 and IE8. Also this code has been tested with different Ext JS 3 versions. It only works with Ext JS 2.2.1 for the different browsers.

    I've attached some screenshots and the codes. I hope someone can help me. Thanks in advance.

    @Forum moderators or administrators
    Can one of you please delete my other thread to avoid the double post? (http://www.sencha.com/forum/showthre...ut+form+anchor)

    Test Case Nr. 1:

    Code:
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="../3.3.1/resources/css/ext-all.css">
            <script type="text/javascript" src="../3.3.1/adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="../3.3.1/ext-all-debug.js"></script>
            <script type="text/javascript">
    
            Ext.BLANK_IMAGE_URL = '../3.3.1/resources/images/default/s.gif';
                    
            Ext.onReady(function(){
                var myViewPort = new Ext.Viewport({
                    layout: 'border',
                    items: [{
                        xtype: 'tabpanel',
                        region: 'center',
                        activeTab: 0,
                        items: [{
                            xtype: 'form',
                            title: 'myFormPanelInMyTabPanel',
                            labelWidth: 120,
                            frame: true,
                            /*
                            defaults: {
                                anchor: '100%'
                            },
                            */
                            items: [{
                                xtype: 'textfield',
                                fieldLabel: 'myTextField1',
                                anchor: '100%'
                            },{
                                xtype: 'datefield',
                                fieldLabel: 'myDateField1',
                                anchor: '100%'
                                //anchor: '70%'
                            },{
                                xtype: 'textfield',
                                fieldLabel: 'myTextField2',
                                anchor: '100%'
                            },{
                                xtype: 'textfield',
                                fieldLabel: 'myTextField3',
                                anchor: '100%'
                            }]
                        }]
                    },{
                        xtype: 'panel',
                        region: 'east',
                        title: 'myPanel',
                        frame: true,
                        collapsible: true,
                        width: 400
                    }]
                });
            });
            
            </script>
        </head>
        <body>
        </body>
    </html>


    Screenshots for Test Case Nr. 1:


    IE6:
    IE6.JPG

    IE8:
    IE8.jpg

    Test Case Nr. 2:
    Code:
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="../3.3.1/resources/css/ext-all.css">
            <script type="text/javascript" src="../3.3.1/adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="../3.3.1/ext-all-debug.js"></script>
            <script type="text/javascript">
    
            Ext.BLANK_IMAGE_URL = '../3.3.1/resources/images/default/s.gif';
                    
            Ext.onReady(function(){
            
                var myViewPort = new Ext.Viewport({
                    layout: 'border',
                    items: [{
                            xtype: 'form',
                            region: 'center',
                            title: 'myFormPanel',
                            labelWidth: 120,
                            frame: true,
                            /*
                            defaults: {
                                anchor: '100%'
                            },
                            */
                            items: [{
                                xtype: 'textfield',
                                fieldLabel: 'myTextField',
                                anchor: '100%'
                            },{
                                xtype: 'combo',
                                fieldLabel: 'myComboBox',
                                anchor: '100%'
                                //anchor: '70%'
                            },{
                                xtype: 'textfield',
                                fieldLabel: 'myTextField2',
                                anchor: '100%'
                            }]
                    },{
                        xtype: 'panel',
                        region: 'east',
                        title: 'myPanel',
                        frame: true,
                        collapsible: true,
                        width: 400
                    }]
                });
            
            });
            </script>
        </head>
        <body>
        </body>
    </html>


    Screenshots for Test Case Nr. 2:


    IE6 - after expand:
    IE6 - after expand.JPG

    IE8 - after expand:
    IE8 - after expand.png

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Default


    It's a repaint problem. You'll notice that if you mouseover the incorrectly aligned combobox is snaps into place.

    To avoid it, anchor layout would have to resize the child items before resizing the container when it shrinks but the other way around when it grows.

  3. #3
    Ext User
    Join Date
    Dec 2010
    Posts
    2
    Vote Rating
    0
    tuak is on a distinguished road

      0  

    Default


    Thank you Condor. Your hint solved my problem.

Similar Threads

  1. Change Anchor '100% 50%' to '100% 100%' at runtime?
    By FlyFoxUK in forum Ext 3.x: Help & Discussion
    Replies: 7
    Last Post: 13 Aug 2011, 2:40 PM
  2. [CLOSED][DUP][3.0.0] labelAlign 'top' and anchor 100%
    By kristoph in forum Ext 3.x: Bugs
    Replies: 4
    Last Post: 11 Aug 2009, 4:56 PM
  3. Combobox with Anchor 100% doesn't scale
    By timo.nuros in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 22 Oct 2007, 7:30 PM
  4. [2.0a1][DUPLICATE] ComboBox Anchor:100% broken in IE
    By fancellu in forum Ext 2.x: Bugs
    Replies: 1
    Last Post: 4 Oct 2007, 6:02 AM

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar