Jul 21, 2017, 7:29 PM
[CLOSED] Positioning Badges on the Tab of a panel?
Is there a setting for Badges that will put them on the tab instead of the panel body? and also be visible on the tab even though the tab isn't the active panel? So the badges are specific to a tab (showing there are items in the tab that are required or need attention in some way. In the real world case there are many tabs with many subpanels and I need to direct the users to the panels/tabs that need attention, without them having to click on each individual tab to see if there are things that need attention (not necessarily required fields).
Somthing similar to this:
Somthing similar to this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager runat="server" />
<ext:FormPanel id="formPnlSettings" runat="server" Layout="FitLayout">
<items>
<ext:TabPanel
id="pnlTabs"
runat="server"
MarginSpec="0 0 20 0">
<Defaults>
<ext:Parameter Name="bodyPadding" Value="10" Mode="Raw" />
<ext:Parameter Name="autoScroll" Value="true" Mode="Raw" />
</Defaults>
<Items>
<ext:Panel
id="pnlTabOne"
runat="server"
Title="Tab One"
AutoDataBind="true" >
<Items>
<ext:Panel runat="server" Title="Cash Triggers" ID="plnCashTriggers" Padding="20" DefaultAnchor="100%"
Collapsible="true">
<Items>
<ext:NumberField ID="TriggerFloor" runat="server" labelwidth="200" FieldLabel="Trigger Floor" AllowBlank="false" Disabled="true" />
<ext:NumberField ID="TriggerTarget" runat="server" labelwidth="200" FieldLabel="Trigger Target" AllowBlank="false" Disabled="true" />
<ext:NumberField ID="TriggerCeiling" runat="server" labelwidth="200" FieldLabel="Trigger Ceiling" AllowBlank="false" Disabled="true" />
</Items>
</ext:Panel>
<ext:Panel runat="server" Title="Withdrawals" Padding="20" DefaultAnchor="100%" Collapsed="true" Collapsible="true">
<Items>
<ext:FieldSet runat="server" Title="Primary Withdrawal" DefaultAnchor="100%" Padding="10" LabelWidth="120">
<Items>
<ext:Checkbox ID="Withdrawal" runat="server" FieldLabel="Enable?"/>
<ext:DateField ID="WithdrawalStartDate" runat="server" FieldLabel="Start Date" AllowBlank="false" Disabled="true" />
<ext:NumberField ID="WithdrawalAmount" runat="server" FieldLabel="Amount ($)" AllowBlank="false" Disabled="true" AllowDecimals="true" AllowNegative="false" MinValue="1" />
<ext:Checkbox ID="IncludeWithholdingPrimary" runat="server" FieldLabel="Include Withholding" />
</Items>
</ext:FieldSet>
</Items>
</ext:Panel>
</Items>
<Plugins>
<ext:Badge runat="server" ID="badgeHardPanelCashManagement" Text="2" AlignmentSpec="l-tl" ></ext:Badge>
<ext:Badge runat="server" ID="badgeSoftPanelCashManagement" Text="2" AlignmentSpec="l-tl" OffsetX="20" UI="Warning" ></ext:Badge>
</Plugins>
</ext:Panel>
<ext:Panel
id="pnlTradingRebalancing"
runat="server"
Title="Trading/Rebalancing"
AutoDataBind="true" >
<Items>
<ext:Panel Title="Trading" ID="pnlTrading" runat="server"
Padding="20"
DefaultAnchor="100%"
Collapsible="true"
LabelWidth="120">
<Items>
<ext:FieldContainer runat="server" AnchorHorizontal="100%" Layout="HBoxLayout" FieldLabel="Minimum Trade Size">
<Items>
<ext:SelectBox ID="selMinimumTrade" runat="server" DisplayField="Text" MinWidth="300" ValueField="Value" Flex="1" AllowBlank="false" SelectedIndex="0">
<Items>
<ext:ListItem Text="No Minimum" Value="0" />
<ext:ListItem Text="$250" Value="250" />
<ext:ListItem Text="$500" Value="500" />
<ext:ListItem Text="$1,000" Value="1000" />
<ext:ListItem Text="$3,000" Value="3000" />
</Items>
</ext:SelectBox>
</Items>
</ext:FieldContainer>
<ext:FieldContainer ID="StepOutCompositeField" runat="server" AnchorHorizontal="100%" Layout="HBoxLayout" FieldLabel="Trading Instructions">
<Items>
<ext:SelectBox ID="TradingInstructions" runat="server" MinWidth="300" DisplayField="Text" ValueField="Value" Flex="1" AllowBlank="false" SelectedIndex="0">
<Items>
<ext:ListItem Text="OK to Stepout" Value="0" />
<ext:ListItem Text="Trade Only with Custodian" Value="1" />
</Items>
</ext:SelectBox>
</Items>
</ext:FieldContainer>
</Items>
</ext:Panel>
</Items>
<Plugins>
<ext:Badge runat="server" ID="badgeHardTradingRebalancing" Text="2" AlignmentSpec="l-tl" ></ext:Badge>
<ext:Badge runat="server" ID="badgeSoftTradingRebalancing" Text="2" AlignmentSpec="l-tl" OffsetX="20" UI="Warning" ></ext:Badge>
</Plugins>
</ext:Panel>
</Items>
</ext:TabPanel>
</items>
</ext:FormPanel>
</div>
</form>
</body>
</html>
Last edited by fabricio.murta; Jul 24, 2017 at 5:32 PM.
