Jan 15, 2016, 6:12 PM
Layout issue with composite field
<%@ Page Language="VB" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Public Sub Page_Load(sender As Object, e As System.EventArgs)
Dim section1 As New FieldSet()
section1.ID = "pnl_1_1"
section1.Title = "Section Name 1"
section1.Collapsible = False
section1.AutoHeight = True
section1.BodyStyle = "background-color:#ededed; padding:15px 10px 0px px"
section1.MonitorResize = True
section1.Padding = 5
section1.Layout = "form"
section1.HideLabels = True
section1.LabelSeparator = ""
Dim bxCmp1 = New BoxComponent
bxCmp1.Height = 10
bxCmp1.ID = "bxCmp1_1"
section1.Items.Add(bxCmp1)
Dim comFld1 = New Ext.Net.CompositeField
comFld1.ID = "comFld1"
comFld1.Flex = 1
Dim pnlFld1 = New Ext.Net.Panel
pnlFld1.Header = False
pnlFld1.Width = Unit.Pixel(20)
pnlFld1.ID = "pnlCheckList1"
pnlFld1.BodyStyle = "background-color:#ffffff"
pnlFld1.Height = Unit.Pixel(20)
Dim lblFieldDesc1 = New Ext.Net.Label
lblFieldDesc1.ID = "lblFieldDesc1"
lblFieldDesc1.Html = "<b><font color='red'></font></b>Text Field Desc 1"
lblFieldDesc1.Width = 265
comFld1.Items.Add(pnlFld1)
comFld1.Items.Add(lblFieldDesc1)
Dim txtCustomField1 = New Ext.Net.TextField()
txtCustomField1.ID = "txt_1"
txtCustomField1.Width = 240
txtCustomField1.FieldLabel = "Text Field Desc 1"
comFld1.Items.Add(txtCustomField1)
Dim btnContainer1 As Ext.Net.Container
btnContainer1 = New Ext.Net.Container
btnContainer1.ID = "btnCont1"
btnContainer1.Flex = 9
comFld1.Items.Add(btnContainer1)
Dim comFld = New Ext.Net.CompositeField
comFld.ID = "comFld2"
comFld.Flex = 1
Dim pnlFld = New Ext.Net.Panel
pnlFld.Header = False
pnlFld.Width = Unit.Pixel(20)
pnlFld.ID = "pnlCheckList2"
pnlFld.BodyStyle = "background-color:#ffffff"
pnlFld.Height = Unit.Pixel(20)
Dim lblFieldDesc = New Ext.Net.Label
lblFieldDesc.ID = "lblFieldDesc2"
lblFieldDesc.Html = "<b><font color='red'></font></b>Text Field Desc 2"
lblFieldDesc.Width = 265
comFld.Items.Add(pnlFld)
comFld.Items.Add(lblFieldDesc)
Dim txtCustomField = New Ext.Net.TextField()
txtCustomField.ID = "txt_2"
txtCustomField.Width = 240
txtCustomField.FieldLabel = "Text Field Desc 2"
comFld.Items.Add(txtCustomField)
Dim btnContainer As Ext.Net.Container
btnContainer = New Ext.Net.Container
btnContainer.ID = "btnCont2"
btnContainer.Flex = 9
Dim btRepeat As Ext.Net.Button
btRepeat = New Ext.Net.Button
btRepeat.ID = "btnRepeat_2"
btRepeat.Icon = Ext.Net.Icon.Delete
btRepeat.Text = "Remove "
btRepeat.Flex = 1
btnContainer.Items.Add(btRepeat)
comFld.Items.Add(btnContainer)
section1.Items.Add(comFld)
section1.Items.Add(comFld1)
Dim sectionPanel As New Ext.Net.Panel()
sectionPanel.ID = "pnl_1"
sectionPanel.Title = ""
sectionPanel.AutoHeight = True
sectionPanel.MonitorResize = True
sectionPanel.Border = False
sectionPanel.Margins = "5,5,5,5"
sectionPanel.BodyStyle = "background-color:#ededed;"
sectionPanel.HideMode = HideMode.Offsets
sectionPanel.Layout = "anchor"
sectionPanel.Items.Add(section1)
pnlFields.Items.Add(sectionPanel)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="resMngr" runat="server">
</ext:ResourceManager>
<ext:Panel ID="pnlFields" runat="server" Title="Loan" Header="false" Height="300"
ActiveIndex="0" Padding="20" BodyStyle="background-color:#ededed;" BodyBorder="false"
Region="Center" AutoScroll="true">
</ext:Panel>
</form>
</body>
</html>
In this sample code I have developed the composite fields and it is displaying correctly as what I am expecting, means the position of the button in composite field. It is showing as in screenshot1I have developed the same way in my actual website, but the button alignment is displaying as showing in screenshot2. I can't post the entire code here (developing the design based on data in db), it is huge.
Can you please let me know what causing that layout of button overlapping? Is there any properties of either composite field or button container can fix this issue?