[CLOSED] How To: Labels and TextField Controls Inline/Mixed

[iansriley]

Hi, I'm trying to have some text within a table layout cell/panel that contains some textfield (input) controls, however I don't seem to be able to make it work. The second row shows what I'm trying to do, and the first is one of my attempts using the HBoxLayout. I need the text to just display in paragraph form and have textfield controls added into the text in various places:

<ext:Viewport ID="ViewPort1" runat="server" Layout="BorderLayout">
        <Items>
            <ext:FormPanel ID="fnlDefaults" runat="server" Border="false" ButtonAlign="Left"
                AutoScroll="true" Header="false" BodyPadding="5" Region="Center" TitleAlign="Center">
                <Items>
                    <ext:FieldSet runat="server" ID="FieldSet1" Collapsible="true" Padding="5" Title="AdManagementSettings"
                        Layout="TableLayout">
                        <LayoutConfig>
                            <ext:TableLayoutConfig Columns="3">
                            </ext:TableLayoutConfig>
                        </LayoutConfig>
                        <Items>
                            <ext:Label runat="server" ID="Label2" Text="Lorem ipsum dolor sit amet" CellCls="headerStyle">
                            </ext:Label>
                            <ext:Checkbox runat="server" ID="Checkbox1" DataIndex="AllowNetAdjustments" CellCls="checkboxStyle">
                            </ext:Checkbox>
                            <ext:Panel ID="Panel1" runat="server" Layout="HBoxLayout" Border="true" Height="150">
                                <LayoutConfig>
                                    <ext:HBoxLayoutConfig Align="Middle" />
                                </LayoutConfig>
                                <Defaults>
                                    <ext:Parameter Name="margin" Value="0 5 0 0" Mode="Value" />
                                </Defaults>
                                <Items>
                                    <ext:Label runat="server" ID="Label3" Text="Fusce et fermentum mi. Sed semper vestibulum nunc in convallis. Vivamus a pharetra diam, et mollis libero... TEXT BOX HERE"
                                        CellCls="descriptionStyle">
                                    </ext:Label>
                                    <ext:TextField ID="TextField1" runat="server" Width="20"></ext:TextField>
                                    <ext:Label runat="server" ID="Label6" Text="END OF TEXT FIELD... Phasellus sagittis dolor in elit luctus, sed fringilla mauris rutrum. Fusce et fermentum mi. Sed semper vestibulum nunc in convallis. Vivamus a pharetra diam, et mollis libero. Quisque dapibus tortor eget enim lacinia congue."
                                        CellCls="descriptionStyle">
                                    </ext:Label>
                                </Items>
                            </ext:Panel>
                            <ext:Label runat="server" ID="Label4" Text="Lorem ipsum" CellCls="headerStyle">
                            </ext:Label>
                            <ext:Checkbox runat="server" ID="Checkbox2" DataIndex="AllowNetAdjustments" CellCls="checkboxStyle">
                            </ext:Checkbox>
                            <ext:Label runat="server" ID="Label5" html="dolor sit amet consectetur adipiscing elit. <input type=text size=5 />Proin blandit auctor euismod. Praesent interdum leo nisi, id eleifend est tempor eget. Phasellus sagittis dolor in elit luctus, sed fringilla mauris rutrum.<input type=text size=2 /> Fusce et fermentum mi. Sed semper vestibulum nunc in convallis. Vivamus a pharetra diam, et mollis libero. Quisque dapibus tortor eget enim lacinia congue."
                                CellCls="descriptionStyle">
                            </ext:Label>
                        </Items>
                    </ext:FieldSet>
                </Items>
            </ext:FormPanel>
        </Items>
    </ext:Viewport>

[Dimitris]

Based on the "flow layout" trick presented by @Daniil in this 1.x post (The following works with 2.x):

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .my-float {
            float: left;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Viewport runat="server" Layout="FitLayout">
        <Items>
    <ext:Panel ID="Panel1" runat="server" Height="200" Layout="ContainerLayout">
        <Defaults>
            <ext:Parameter Name="cls" Value="my-float" Mode="Value" />
        </Defaults>
        <Items>
            <ext:DisplayField ID="DisplayField2" 
                runat="server" 
                Text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit" />
            <ext:TextField ID="TextField2" runat="server" Margins="0 3 0 0" />
            <ext:DisplayField ID="DisplayField3" 
                runat="server" 
                Text="Fusce et fermentum mi." />
            <ext:TextField ID="TextField3" runat="server" Margins="0 3 0 0" />
            <ext:DisplayField ID="DisplayField4" 
                runat="server" 
                Text="Fusce et fermentum mi. Sed semper vestibulum nunc in convallis. Vivamus a pharetra diam, et mollis libero... " />
            <ext:TextField ID="TextField4" runat="server" Margins="0 3 0 0" />
            <ext:DisplayField ID="DisplayField5" 
                runat="server" 
                Text="Phasellus sagittis dolor in elit luctus, sed fringilla mauris rutrum. Fusce et fermentum mi. Sed semper vestibulum nunc in convallis. Vivamus a pharetra diam, et mollis libero. Quisque dapibus tortor eget enim lacinia congue." />
        </Items>
    </ext:Panel>
</Items>
    </ext:Viewport>
    </form>
</body>
</html>

[iansriley]

Thank you so much, that is a great solution.

-Ian

Please mark ticket as [CLOSED]