[CLOSED] apply background color and border to the nested panels with Frame attribute

  1. #1

    [CLOSED] apply background color and border to the nested panels with Frame attribute

    Hi,
    In ext V2.5 look and feel not getting same as in V1.7. We have nested panels under a main panel, main panel has Frame="true" but background color is not applying to all panels as like in 1.7.

    Please see the attached file, the design should be like that.
    What needs to change in below code?
    What exactly 'Frame' means?

    Thank you.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Basic Panel - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:Panel ID="TabPrintAds" runat="server" Title="Details" BodyStyle="padding:10px;"
                    Border="true" Height="500" AutoScroll="true" ButtonAlign="Center">
                    <Items>
                        <ext:Panel ID="ColumnLayout2" runat="server" Frame="true" Layout="ColumnLayout"
                            Border="false">                        
                            <Items>
                                <ext:Panel ID="Panel9" ColumnWidth=".50" runat="server" Border="false">
                                    <Items>
                                        <ext:Panel ID="FormLayout4" runat="server" Border="false" Layout="FormLayout" Height="200">
                                            <Items>
                                                <ext:ComboBox ID="cboAdPosPrint2" runat="server" Width="500" DisplayField="AdPos"
                                                    ValueField="AdPosID" Editable="false" FieldLabel="Position">
                                                    <ToolTips>
                                                        <ext:ToolTip runat="server" ID="ttAdPos">
                                                        </ext:ToolTip>
                                                    </ToolTips>
                                                </ext:ComboBox>
                                                <ext:ComboBox ID="cboAdSectPrint2" runat="server" Width="500" DisplayField="AdSec"
                                                    ValueField="AdSecID" Editable="false" FieldLabel="Special Section">
                                                    <ToolTips>
                                                        <ext:ToolTip runat="server" ID="ttAdSec">
                                                        </ext:ToolTip>
                                                    </ToolTips>
                                                </ext:ComboBox>
                                                <ext:TextArea runat="server" ID="txt_PrintAds_Notes" Width="500" Height="75" FieldLabel="Notes:"
                                                    MaxLength="999">
                                                </ext:TextArea>
                                                <ext:Image ID="Image1" runat="server" Width="500" Height="1" ImageUrl="/intranet/images/clear.gif">
                                                </ext:Image>
                                            </Items>
                                        </ext:Panel>
                                    </Items>
                                </ext:Panel>
                                <ext:Panel ID="Panel11" ColumnWidth=".50" runat="server" Border="false" Layout="ColumnLayout"
                                    Height="200">
                                    <Items>
                                        <ext:Panel ID="Panel2" ColumnWidth=".20" Border="false" runat="server" >
                                            <Items>
                                                <ext:Label ID="Label2" runat="server" StyleSpec="padding:20px;" Html="&nbsp;">
                                                </ext:Label>
                                            </Items>
                                        </ext:Panel>
                                        <ext:Panel ID="Panel3" ColumnWidth=".80" Border="false" runat="server" >
                                            <Items>
                                                <ext:Panel ID="FormLayout5" runat="server" Layout="FormLayout" Border="false" >
                                                    <Items>
                                                        <ext:NumberField ID="numProductionCharges" runat="server" FieldLabel="Production Charges"
                                                            HideTrigger="true" MinValue="0" Visible="false" LabelWidth="120" Width="220"
                                                            AllowDecimals="true" TrimTrailedZeros="false">
                                                            <ToolTips>
                                                                <ext:ToolTip ID="ToolTip9" runat="server" Title="Production Charges" Html="Enter the Production Charges amount for this ad. This will NOT adjust the net amounts; be sure to set up the proposal and invoice display options appropriately.">
                                                                </ext:ToolTip>
                                                            </ToolTips>
                                                        </ext:NumberField>
                                                        <ext:NumberField ID="numBarterPrint" runat="server" FieldLabel="Barter" Width="220"
                                                            HideTrigger="true" MinValue="0" AllowDecimals="true" LabelWidth="120" TrimTrailedZeros="false">
                                                            <ToolTips>
                                                                <ext:ToolTip ID="ToolTip25" runat="server" Title="Barter" Html="Enter the trade amount being given for this ad. This will NOT adjust the net amounts; be sure to set up the proposal and invoice display options appropriately.">
                                                                </ext:ToolTip>
                                                            </ToolTips>
                                                        </ext:NumberField>
                                                        <ext:TextField runat="server" ID="txt_PrintAds_ImpressionsActual" LabelWidth="120"
                                                            Width="220" FieldLabel="Actual Impressions">
                                                            <ToolTips>
                                                                <ext:ToolTip ID="ToolTip19" runat="server" Title="Actual Impressions" Html="Use this field to track the actual number of impressions for this order.">
                                                                </ext:ToolTip>
                                                            </ToolTips>
                                                        </ext:TextField>
                                                        <ext:TextField runat="server" ID="txt_PrintAds_QtyActual" LabelWidth="120" Width="220"
                                                            FieldLabel="Actual Quantity">
                                                            <ToolTips>
                                                                <ext:ToolTip ID="ToolTip20" runat="server" Title="Actual Quantity" Html="Use this field to track the actual quantity for this order.">
                                                                </ext:ToolTip>
                                                            </ToolTips>
                                                        </ext:TextField>
                                                        <ext:ComboBox ID="cboPosReq5" runat="server" LabelWidth="120" Width="350" FieldLabel="Comp Pg"
                                                            ForceSelection="true" Editable="false">
                                                            <Items>
                                                                <ext:ListItem Text="N/A" Value="0" />
                                                                <ext:ListItem Text="1" Value="1" />
                                                              
                                                            </Items>
                                                        </ext:ComboBox>
                                                        <ext:DisplayField ID="lblWordCount" runat="server" LabelWidth="120" FieldLabel="Text/Images:"
                                                            Text="0 words - 0 characters - 0 image(s)" Hidden="true">
                                                        </ext:DisplayField>
                                                        <ext:CheckboxGroup ID="cbgrpOptions" runat="server" LabelWidth="120" ColumnsNumber="2"
                                                            FieldLabel="Options">
                                                            <Items>
                                                                <ext:Checkbox ID="chkIsBleed" runat="server" BoxLabel="Bleed" />
                                                                <ext:Checkbox ID="chkPosReq2" runat="server" BoxLabel="Within Edit" />
                                                                <ext:Checkbox ID="chkPosReq3" runat="server" BoxLabel="Across Edit" />
                                                                <ext:Checkbox ID="chkPosReq4" runat="server" BoxLabel="Right Hand Only" />
                                                                <ext:Checkbox ID="chkAutoRenew" runat="server" BoxLabel="Auto-Renew" />
                                                            </Items>
                                                        </ext:CheckboxGroup>
                                                    </Items>
                                                </ext:Panel>
                                            </Items>
                                        </ext:Panel>
                                    </Items>
                                </ext:Panel>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	FrameSettings_V.17.GIF 
Views:	22 
Size:	37.0 KB 
ID:	11481  
    Last edited by Daniil; Jun 02, 2014 at 1:57 PM. Reason: [CLOSED]
  2. #2
    Hi @iansriley,

    Please set up this setting for all the Panel which you want to be transparent.
    BodyStyle="background-color: transparent;"
    Or you can set it with a Panel's BodyCls and a respective CSS class.

    Quote Originally Posted by iansriley View Post
    What exactly 'Frame' means?
    Well, Frame="true" means that a Panel will be rendered with a frame.
    http://docs.sencha.com/extjs/4.2.1/#...anel-cfg-frame

    Also it appears to change a Panel's background, but it doesn't change background of inner Panels which is white by default (at least, in v2.x).
  3. #3
    Thanks for solution, It is working fine. Close this thread.

Similar Threads

  1. [CLOSED] Change TreePanel background color and toolbar color
    By jchau in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 07, 2012, 4:42 PM
  2. [CLOSED] So many panels and nested panels
    By thchuong in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 03, 2012, 5:23 AM
  3. [CLOSED] Panel Frame Style - Set Background and Font
    By iansriley in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 11, 2011, 4:26 PM
  4. [CLOSED] [1.0] Issuewith tabPanel border when frame=true
    By edigital in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 09, 2010, 12:37 PM
  5. Change Tab background color or background image
    By georgelanes in forum 1.x Help
    Replies: 0
    Last Post: Nov 06, 2008, 3:55 PM

Tags for this Thread

Posting Permissions