PDA

View Full Version : ComboBox rendering problem on IE8



jon222
20 May 2011, 5:48 AM
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:


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)

fay
20 May 2011, 7:25 AM
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:



<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>

matejka
16 Aug 2011, 11:53 PM
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