[CLOSED] More Layout Issues

[FAS]

Hi again.Some aditional things are driving me crazy.Now I have two problems.1) I add a textField into a FieldSet, together with a CheckBoxGroup with two checks. The TextField has a FieldLabel "Días de anticipación para emitir" (what means Days before issueing). The FieldLabel shows narrowed in width and the TextField itself renders over anywhere else. I tried changing Text's width, wrapping it in a Container, Hbox, and so...2) The Grid with which I had problem now renders at the bottom (below the ColumnLayout) as I needed, but I can't make it higher. It looks thin no matters what I try to do.Here goes the screen and code.

                                                                        
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
Nombre
Descripción
Vigente desde

{CondicionesGenerales_Nombre}
{CondicionesGenerales_Descripcion}
{CondicionesGenerales_Fecha:date("d-m-Y")}

ThanksRegardsFernando

[FAS]

Code again (RichTextbox is not working well)

<form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <asp:ObjectDataSource ID="ListadoPaises" runat="server" SelectMethod="Listar" TypeName="AAV.BL.Pais">
    </asp:ObjectDataSource>
    <asp:ObjectDataSource ID="ListadoProveedores" runat="server" SelectMethod="Listar"
        TypeName="AAV.BL.Proveedor"></asp:ObjectDataSource>
    <asp:ObjectDataSource ID="ListadoCondicionesGenerales" runat="server" SelectMethod="ListarVigentesPorEmpresa"
        TypeName="AAV.BL.CondicionesGenerales">
        <SelectParameters>
            <asp:ControlParameter ControlID="hddEmpresaLocalId" Name="pEmpresaId" Type="Int32" />
        </SelectParameters>
    </asp:ObjectDataSource>
    <div style="text-align: center;">
        <ext:Hidden runat="server" ID="METODO" />
        <br />
        <div style="text-align: left;">
            <ext:FormPanel ID="FormPanel1" runat="server" Title="Producto" Padding="5" MonitorResize="true"
                Height="580" AutoWidth="true">
                <Items>
                    <ext:Container runat="server" Layout="ColumnLayout" AutoHeight="true">
                        <LayoutConfig>
                            <ext:ColumnLayoutConfig FitHeight="false" />
                        </LayoutConfig>
                        <Items>
                            <ext:Container ID="columnaIzquierda" runat="server" Layout="FormLayout" ColumnWidth=".5"
                                AutoHeight="true">
                                <Items>
                                     <ext:TextField ID="txtNombre" runat="server" Width="330" FieldLabel="Nombre" MaxLength="200"
                                        MsgTarget="Side" IsRemoteValidation="true">
                                        <RemoteValidation OnValidation="VerificarNombre">
                                        </RemoteValidation>
                                    </ext:TextField>
                                    <ext:CompositeField ID="CompositeField1" runat="server" FieldLabel="Vigencia">
                                        <Items>
                                            <ext:TextField ID="txtCodigo" runat="server" Width="70" Note="Código" NoteAlign="Top"
                                                MaxLength="200" MsgTarget="Side" IsRemoteValidation="true">
                                                <RemoteValidation OnValidation="VerificarCodigo">
                                                </RemoteValidation>
                                            </ext:TextField>
                                            <ext:TextField ID="txtVersion" runat="server" Width="55" Note="Versión" NoteAlign="Top"
                                                MaxLength="200" MsgTarget="Side" IsRemoteValidation="true">
                                                <RemoteValidation OnValidation="VerificarVersion">
                                                </RemoteValidation>
                                            </ext:TextField>
                                            <ext:DateField runat="server" ID="txtValidoDesde" Note="Válido desde" Editable="false"
                                                AutoDataBind="true" NoteAlign="Top" AllowBlank="false" Width="90" BlankText="Debe seleccionar una fecha de inicio de validez"
                                                MsgTarget="Side">
                                            </ext:DateField>
                                            <ext:TextField ID="txtIdentificacionExterna" runat="server" Width="100" Note="Id externo" NoteAlign="Top"
                                        MaxLength="200" MsgTarget="Side">
                                    </ext:TextField>
                                        </Items>
                                    </ext:CompositeField>
                                    <ext:ComboBox runat="server" ID="cmbProveedores" FieldLabel="Proveedor" Width="330"
                                        DisplayField="Persona_Denominacion" ValueField="Proveedor_Id" AllowBlank="false"
                                        EmptyText="Seleccionar" InvalidText="Debe seleccionar un Proveedor" ForceSelection="true"
                                        Editable="false" TypeAhead="false">
                                        <Store>
                                            <ext:Store ID="Store1" runat="server" DataSourceID="ListadoProveedores" OnRefreshData="ActualizarDatosProveedores">
                                                <Reader>
                                                    <ext:JsonReader IDProperty="Proveedor_Id">
                                                        <Fields>
                                                            <ext:RecordField Name="Persona_Denominacion" />
                                                            <ext:RecordField Name="Proveedor_Id" />
                                                        </Fields>
                                                    </ext:JsonReader>
                                                </Reader>
                                            </ext:Store>
                                        </Store>
                                        <DirectEvents>
                                            <Select OnEvent="cmbProveedores_OnChange">
                                            </Select>
                                        </DirectEvents>
                                    </ext:ComboBox>
                                    <ext:ComboBox runat="server" ID="cmbPaises" FieldLabel="Pais de venta" Width="330"
                                        DisplayField="Pais_Nombre" ValueField="Pais_Id" AllowBlank="false" EmptyText="Seleccionar"
                                        InvalidText="Debe seleccionar un Pais" ForceSelection="true" Editable="false"
                                        TypeAhead="false">
                                        <Store>
                                            <ext:Store ID="ListadoPaisesStore" runat="server" DataSourceID="ListadoPaises" OnRefreshData="ActualizarDatosPaises">
                                                <Reader>
                                                    <ext:JsonReader IDProperty="Pais_Id">
                                                        <Fields>
                                                            <ext:RecordField Name="Pais_Nombre" />
                                                            <ext:RecordField Name="Pais_Id" />
                                                        </Fields>
                                                    </ext:JsonReader>
                                                </Reader>
                                            </ext:Store>
                                        </Store>
                                        <DirectEvents>
                                            <Select OnEvent="cmbPaises_OnChange">
                                            </Select>
                                        </DirectEvents>
                                    </ext:ComboBox>
                                    
                                    <ext:Label runat="server" ID="txtEmpresaLocal" FieldLabel="Empresa local">
                                    </ext:Label>
                                    <ext:Hidden runat="server" ID="hddEmpresaLocalId">
                                    </ext:Hidden>
                                    
                                    
                                   
                                    <ext:TextArea ID="txtDescripcion" runat="server" Width="330" Height="90" FieldLabel="Descripción"
                                        MaxLength="200">
                                    </ext:TextArea>
                                    <ext:TextArea ID="txtObservaciones" runat="server" Cls="txtObservaciones" Width="330"
                                        Height="90" FieldLabel="Observaciones" MaxLength="200">
                                    </ext:TextArea>
                                </Items>
                            </ext:Container>
                            <ext:Container ID="columnaDerecha" runat="server" Layout="FormLayout" ColumnWidth=".5"
                                AutoHeight="true">
                                <Items>
                                    <ext:ComboBox runat="server" ID="cmbCondicionesGenerales" FieldLabel="Condiciones generales"
                                        Width="300" DisplayField="CondicionesGenerales_Nombre" ValueField="CondicionesGenerales_Id"
                                        AllowBlank="false" EmptyText="Seleccionar" InvalidText="Debe seleccionar las Condiciones Generales"
                                        ForceSelection="true" Editable="false" TypeAhead="false" BlankText="Debe seleccionar las Condiciones Generales"
                                        FireSelectOnLoad="true" ItemSelector="tr.list-item" ListWidth="400">
                                        <Store>
                                            <ext:Store ID="Store2" runat="server" DataSourceID="ListadoCondicionesGenerales"
                                                OnRefreshData="ActualizarDatosCondicionesGenerales">
                                                <Reader>
                                                    <ext:JsonReader IDProperty="CondicionesGenerales_Id">
                                                        <Fields>
                                                            <ext:RecordField Name="CondicionesGenerales_Nombre" />
                                                            <ext:RecordField Name="CondicionesGenerales_Descripcion" />
                                                            <ext:RecordField Name="CondicionesGenerales_Id" />
                                                            <ext:RecordField Name="CondicionesGenerales_Fecha" Type="Date" />
                                                        </Fields>
                                                    </ext:JsonReader>
                                                </Reader>
                                            </ext:Store>
                                        </Store>
                                        <Template ID="Template1" runat="server">
                                            <Html>
                                            <tpl for=".">
						                            <tpl if="[xindex] == 1">
							                            <table style="width: 400px; font: 11px tahoma,arial,helvetica,sans-serif;">
								                            <tr>
									                            <th style="font-weight: bold;padding: 3px;">Nombre</th>
									                            <th style="font-weight: bold;padding: 3px;">Descripción</th>
									                            <th style="font-weight: bold;padding: 3px;">Vigente desde</th>
								                            </tr>
						                            </tpl>
						                            <tr class="list-item">
							                            <td style="width:auto;:3px 0px;">{CondicionesGenerales_Nombre}</td>
							                            <td style="width:180">{CondicionesGenerales_Descripcion}</td>
							                            <td style="width:90">{CondicionesGenerales_Fecha:date("d-m-Y")}</td>
						                            </tr>
						                            <tpl if="[xcount-xindex]==0">
							                            </table>
						                            </tpl>
					                            </tpl>
                                            </Html>
                                        </Template>
                                    </ext:ComboBox>
                                    
                                    <ext:TextField ID="txtEdadMaxima" runat="server" Width="30" FieldLabel="Edad máxima"
                                        MaxLength="3" MsgTarget="Side" AllowBlank="true" Vtype="numeric" VtypeText="Debe ingresar un valor numérico">
                                    </ext:TextField>
                                   
                                    
                                    <ext:FieldSet runat="server" Title="Características de viaje" AutoHeight="true" AutoWidth="true">
                                        <Items>
                                            <ext:CheckboxGroup runat="server" ColumnsNumber="4">
                                            <Items>
                                                    <ext:Checkbox runat="server" ID="chkMultiviaje" BoxLabel="Multiviajes">
                                                </ext:Checkbox>
                                                <ext:Checkbox runat="server" ID="chkNegocios" BoxLabel="Negocios">
                                                </ext:Checkbox>
                                                <ext:Checkbox runat="server" ID="chkCruceros" BoxLabel="Cruceros">
                                                </ext:Checkbox>
                                                <ext:Checkbox runat="server" ID="chkEstudio" BoxLabel="Estudiante">
                                                </ext:Checkbox>
                                                <ext:Checkbox runat="server" ID="chkVacaciones" BoxLabel="Vacaciones">
                                                </ext:Checkbox>
                                                <ext:Checkbox runat="server" ID="chkDeportes" BoxLabel="Deportes">
                                                </ext:Checkbox>
                                                <ext:Checkbox runat="server" ID="chkAnual" BoxLabel="Anual">
                                                </ext:Checkbox>
                                        </Items>
                                            </ext:CheckboxGroup>
                                            
                                        </Items>
                                    
                                    </ext:FieldSet>
                                   <ext:FieldSet ID="FieldSet1" runat="server" Title="Emisión y conectividad" AutoHeight="true" AutoWidth="true">
                                   <LayoutConfig>
                                   <ext:ColumnLayoutConfig FitHeight="false" />
                                   </LayoutConfig>
                                    <Items>
                                        <ext:CheckboxGroup runat="server" ColumnsNumber="2">
                                            <Items>
                                                <ext:Checkbox runat="server" ID="chkEmisionEnLinea" BoxLabel="Emisión en línea">
                                                </ext:Checkbox>
                                                <ext:Checkbox runat="server" ID="chkActualizacionWebService" BoxLabel="Actualización por WebService">
                                                </ext:Checkbox>
                                            </Items>
                                        </ext:CheckboxGroup>
                                       
                                    <ext:NumberField  ID="txtDiasAnticipacionEmision" runat="server" Width="150" FieldLabel="Dias de anticipación para emitir"
                                        MaxLength="2" MsgTarget="Side" AllowBlank="true" DecimalPrecision="0" AllowDecimals="false">
                                    </ext:NumberField>
                                               
                                     
                                    </Items>
                                   </ext:FieldSet>
                                    
                                </Items>
                            </ext:Container>
                        </Items>
                    </ext:Container>
                    
                    <ext:Container runat="server" AutoWidth="true"  Height="160" Layout="HBoxLayout">
                    <LayoutConfig>
                        <ext:HBoxLayoutConfig Align="Middle" />
                    </LayoutConfig>
                        <Items>
                        <ext:GridPanel runat="server" ID="grdCondicionesParticulares"  Height="150" Width="700"
                        FieldLabel="Condiciones particulares" LabelAlign="Top" Style="margin-bottom: 10"
                        Header="false" HeaderAsText="true" Title="Condiciones particulares">
                        <Store>
                            <ext:Store ID="CondicionesParticularesStore" runat="server" OnRefreshData="ActualizarDatosCondicionesParticulares"
                                AutoLoad="True">
                                <Reader>
                                    <ext:JsonReader IDProperty="Id">
                                        <Fields>
                                            <ext:RecordField Name="IndiceColeccion" />
                                            <ext:RecordField Name="Nombre" />
                                            <ext:RecordField Name="TipoDato" Type="Int" />
                                            <ext:RecordField Name="Valor" />
                                            <ext:RecordField Name="MonedaISO" />
                                            <ext:RecordField Name="MonedaSimbolo" />
                                            <ext:RecordField Name="EdadMinima" />
                                            <ext:RecordField Name="EdadMaxima" />
                                        </Fields>
                                    </ext:JsonReader>
                                </Reader>
                                <Listeners>
                                </Listeners>
                            </ext:Store>
                        </Store>
                        <SelectionModel>
                            <ext:RowSelectionModel Enabled="true">
                            </ext:RowSelectionModel>
                        </SelectionModel>
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:Column Header="Nombre" DataIndex="Nombre" Width="300"/>
                                <ext:Column Header="Valor" Width="150">
                                    <Renderer Fn="RenderValor" />
                                </ext:Column>
                                <ext:Column Header="Límite edad" Width="140" Align="Center">
                                    <Renderer Fn="RenderEdad" />
                                </ext:Column>
                                <ext:CommandColumn Width="70" Align="Center" ButtonAlign="Center">
                                    <Commands>
                                        <ext:GridCommand Icon="NoteEdit" CommandName="Modificar">
                                        </ext:GridCommand>
                                        <ext:GridCommand Icon="Delete" CommandName="Eliminar">
                                        </ext:GridCommand>
                                    </Commands>
                                </ext:CommandColumn>
                            </Columns>
                        </ColumnModel>
                        <Listeners>
                            <Command Handler="ComandoGrdCondicionesParticulares(command, record.data.IndiceColeccion)" />
                        </Listeners>
                    </ext:GridPanel>
                        </Items>
                    </ext:Container>
                    
                </Items>
                <Buttons>
                    <ext:Button ID="btnGuardarBorrador" runat="server" Text="Guardar borrador" Visible="false"
                        Icon="DiskDownload">
                        <DirectEvents>
                            <Click OnEvent="btnGuardarBorrador_Click" Success="if(ValidarRespuestaDirectEvent(result)){DispararEvento('ProductoActualizado');parentAutoLoadControl.close();}">
                                <EventMask ShowMask="true" Msg="Procesando..." />
                            </Click>
                        </DirectEvents>
                    </ext:Button>
                    <ext:Button ID="btnEjecutar" runat="server" Text="Guardar">
                        <DirectEvents>
                            <Click OnEvent="btnEjecutar_Click" Success="if(ValidarRespuestaDirectEvent(result)){DispararEvento('ProductoActualizado');parentAutoLoadControl.close();}">
                                <EventMask ShowMask="true" Msg="Procesando..." />
                            </Click>
                        </DirectEvents>
                    </ext:Button>
                    <ext:Button ID="btnCancelar" runat="server" Text="Cancelar">
                        <Listeners>
                            <Click Handler="parentAutoLoadControl.close();" />
                        </Listeners>
                    </ext:Button>
                </Buttons>
                <BottomBar>
                    <ext:StatusBar ID="StatusBar1" runat="server">
                        <Plugins>
                            <ext:ValidationStatus ID="ValidationStatus1" runat="server" FormPanelID="FormPanel1"
                                ValidIcon="Accept" ErrorIcon="Exclamation" HideText="Hay errores en el formulario. (Click para ocultar detalles)"
                                ShowText="Hay errores en el formulario. (Click para mostrar detalles)">
                            </ext:ValidationStatus>
                        </Plugins>
                    </ext:StatusBar>
                </BottomBar>
            </ext:FormPanel>
        </div>
    </div>
    </form>

[Daniil]

Hi,

1. I don't think you need ColumnLayout for the FieldSet. Please clarify what is the reason do you set up it?

<LayoutConfig>
    <ext:ColumnLayoutConfig FitHeight="false" />
</LayoutConfig>

I would remove it.

2. I would suggest to use FormLayout.

Example

<ext:Container 
    runat="server" 
    Layout="FormLayout" 
    AutoHeight="true" 
    LabelAlign="Top">
    <Items>
        <ext:GridPanel 
            runat="server" 
            Height="150" 
            Width="700"
            FieldLabel="FieldLabel">
            ...
        </ext:GridPanel>
    </Items>
</ext:Container>

Please note that the LabelAlign should be set up for a container, not for its item.

Also I would recommend to use FieldLabel only withing a container with FormLayout to get more consistent result in all browsers.

[FAS]

1) Sorry, that ColumnLayout was just another try to fix things (you suggested it in another scenario in my last post). Without it the same happens with the TextLabel.
Indeed, you made me remember another thing. You will note that all checkboxes are inside a CheckBoxGroup (althought some of them are grouped by two). If I place the checkbox inside the FieldSet (outside the CheckBoxGroup) it looses its style (another Font, size, decorations...). But this is another issue. If you prefer I will start a new Thred later, cause I solved it with the CheckBoxGroup.
I still have troubles with the TextField inside the FieldSet as stated.




2) Solved!! Now the Grid has the height it deserves ;-)

Thanks
Regards
Fernando

[Daniil]

I still have troubles with the TextField inside the FieldSet as stated.

Yes, please start a new forum thread with a mockup of required layout within the FieldSet.