PDA

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



iansriley
Jan 20, 2015, 12:59 PM
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
Jan 20, 2015, 3:10 PM
Based on the "flow layout" trick presented by @Daniil in this 1.x post (http://forums.ext.net/showthread.php?13917) (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
Jan 20, 2015, 4:11 PM
Thank you so much, that is a great solution.

-Ian

Please mark ticket as [CLOSED]