Results 1 to 3 of 3

Thread: ComboBox rendering problem on IE8

  1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    1

    Default ComboBox rendering problem on IE8

    Hi,
    I have a problem with IE8 rendering combobox on card layout on a card which is not visible from the beginning, but after you click 'Card 2' (lower right). See the 'Per page:' combo, the arrow is rendered on the left and hiding the text.
    Thanks for help.

    Here's the code:
    Code:
             Ext.onReady(function(){
    
                function createGridPanel(config) {
                    return new Ext.Panel(Ext.apply({
                        layout: 'border',
                        items: [{
                                region: 'center',
                                title: 'center'
                            },{
                                region: 'south',
                                xtype: 'grid',
                                height: 300,
                                title: 'Grid',
                                split: true,
                                store: {},
                                colModel: new Ext.grid.ColumnModel({}),
                                bbar: new Ext.PagingToolbar({
                                    displayInfo: true,
                                    items: [
                                        '-','Per page: ',
                                        {
                                            xtype: 'combo',
                                            width: 50,
                                            value: 5,
                                            editable: false,
                                            triggerAction: 'all',
                                            store: [[5, '5'], [10, '10'],  [20, '20']]                          
                                        }
                                     ]           
                                })
                            }]
                    }, config));            
                }
                           
                panel1 = createGridPanel({
                    title: 'panel 1',
                    id: 'card-1'
                });
                           
                panel2 = createGridPanel({
                    title: 'panel 2',
                    id: 'card-2'
                }); 
                            
                panel = new Ext.Panel({
                    tite: 'Panel',
                    region: 'center',
                    height: 200,
                    width: 500,
                    layout: 'card',
                    activeItem: 0,
                    bbar: ['->', {
                        text: 'Card 1',
                        handler: function(){
                            panel.layout.setActiveItem(0);
                        }
                    },{
                        text: 'Card 2',
                        handler: function(){
                            panel.layout.setActiveItem(1);
                        }
                    }],
                    items: [
                            panel1,
                            panel2
                    ]
                });
        
                var viewport = new Ext.Viewport({
                    layout: 'border',
                    items: [
                            panel
                            ]
                });
                  
            });
    To test it, just copy it to html page with extjs (3.3.1) setup and run it on IE8. (Anyway it works on IE8 compatibility view, but that is not solution to fix it)


  2. #2
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750

    Default

    Actually that works for me in IE8 (with Compatibility View off and on). Have you something else in your test file? I included your code as is with the following:

    Code:
     
    <html>
    <head>
    <title></title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all-debug.js"></script>
    <script>
    
    // YOUR CODE HERE
     
    </script>
    </head>
    <body>
    </body>
    </html>

  3. #3
    Sencha User
    Join Date
    Oct 2010
    Posts
    4

    Default

    Came accross the same issue and found a workaround (litle bit silly but working): when the card changes just extended the width of the combo by 1px and shrink back again. It has no impact on layout and resolves this issue.

    regards

    Jiri

Posting Permissions

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