HBox Layout in IE7, bug?

[David Pelaez]

Hi,

I have an ext window that simulate a search with criterias that the user provides.
Leaving this aside, in IE8 it renders fine, but the same code in IE8 with compatibility (to simulate IE7) provides another result.

<ext:Window ID="SearchWindow" runat="server" Icon="Magnifier" Width="310" Height="125"
    Layout="Fit" Modal="true" Hidden="true" Resizable="false" Title="Search">
    <Items>
        <ext:Panel runat="server" Layout="HBox" Border="false" LabelAlign="Top" Frame="true">
            <Defaults>
                <ext:Parameter Name="margins" Value="0 5 0 0" Mode="Value" />
            </Defaults>
            <Items>
                <ext:ComboBox ID="cmbColumnaBusqueda" runat="server" Editable="false" SelectedIndex="0"
                    ForceSelection="true" FieldLabel="Search Field"
                    Width="125" DisplayField="key" ValueField="value" />
                <ext:TextField ID="txtValor" runat="server" FieldLabel=Search Value""
                    Width="125" MaxLength="20" />
            </Items>
            <Buttons>
                <ext:Button ID="btnAceptar" runat="server" Text="Accept" />
                <ext:Button ID="btnCancelar" runat="server" Text="Cancel" />
            </Buttons>
        </ext:Panel>
    </Items>
</ext:Window>

In IE8 developer tool (F12) i've seen that it has an inline style with a position absolute in the first div of the controls:

<DIV style="POSITION: absolute; PADDING-LEFT: 0px; WIDTH: 125px; OVERFLOW: visible; LEFT: 0px" id=ext-gen268 class=x-form-element>
<DIV style="WIDTH: 125px" id=ext-gen264 class="x-form-field-wrap x-form-field-trigger-wrap">
<INPUT id=ext-gen266 value=Identificador type=hidden name=cmbColumnaBusqueda_Value>
<INPUT style="WIDTH: 100px" id=cmbColumnaBusqueda class="x-form-text x-form-field x-trigger-noedit" value=Identificador readOnly size=24 name=cmbColumnaBusqueda autocomplete="off" qtip>
<IMG id=ext-gen265 class="x-form-trigger x-form-arrow-trigger" src="http://localhost:50943/extjs/resources/images/slate/s-gif/ext.axd">
<INPUT id=cmbColumnaBusqueda_SelIndex class=" x-form-hidden x-form-field" value=0 type=hidden name=cmbColumnaBusqueda_SelIndex autocomplete="off">

I disable it with the developer tool and it renders ok.
Could it be a compatibility bug with IE7?

[Vladimir]

Hi,

Remove FieldLabel for each field

or

Wrap each field by Container with Layout="Form"

[David Pelaez]

Yes it solves it, but why IE7 has another workaround than IE8?

Controls are compatible with all browsers or we have to make it compatible?

[Vladimir]

Hi,

Generally, FieldLabel must be used inside container with form layout only. In this case field label will be displayed correctly in all browsers
Here is FieldLabel note from ExtJS docs

Note: this config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').