questão largura com Ext.Panel Bbar no IE 6

StackOverflow https://stackoverflow.com/questions/90181

Pergunta

Acabei de correr em uma falha de exibição no IE6 com o quadro ExtJS. -. Espero que alguém pode me apontar na direção certa

No exemplo a seguir, o Bbar para o painel é apresentado 2ems mais estreito do que o painel se encontra ligado a (isto é alinhada à esquerda) no IE6, onde, como no Firefox é apresentado como a mesma largura que o painel.

Alguém pode sugerir como corrigir isso?

Eu pareço ser capaz de trabalhar em torno de qualquer especificando a largura do painel em ems ou o preenchimento em pixels, mas presumo que seria esperado para o trabalho como eu tê-lo abaixo. 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all-debug.js"></script>
    <script type="text/javascript">

    Ext.onReady(function(){        
        var main = new Ext.Panel({
            renderTo: 'content',
            bodyStyle: 'padding: 1em;',
            width: 500,
            html: "Alignment issue in IE - The bbar's width is 2ems less than the main panel in IE6.",
            bbar: [
                    "->",
                {id: "continue", text: 'Continue'}
            ]
        });
    });

    </script>
</head>
<body>
    <div id="content"></div>
</body>
</html>
Foi útil?

Solução

O problema vem do preenchimento bodystyle personalizado. Isso torna o conteúdo do painel maior, mas não a barra de ferramentas.

Uma solução possível é a mais ninho um painel Ext, como: 

    var main = new Ext.Panel({
        renderTo: 'content',
        width: 500,
        items: {
            bodyStyle: 'padding: 1em;',
            border: false,
            html: "Now alignment is fine."
        },
        bbar: [
                "->",
            {id: "continue", text: 'Continue'}
        ]
    });

A fronteira:. Falsa é necessária para evitar a dupla fronteira

Outras dicas

Talvez você deve tentar forçar a largura da Bbar: 

main.getBottomToolbar().setWidth(500)

logo após a criação do Painel?

Mas eu acho que o problema é que Bbar é processado em div interior do painel, para que diferentes navegadores interpretar preenchimento exterior de forma diferente.

Além disso, você pode tentar conjunto padding do Bbar para -1em.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top