[CLOSED] Set background of Panel to transparent

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [CLOSED] Set background of Panel to transparent

    I have panels into frame=true Panel...

    I wish that this panels, into frame panel, there are your background as transparent...

    Is possible?

    <%@ Page Language="vb"%>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
    
            Ext.onReady(function () {
    
                var viewPort = Ext.create("Ext.net.Viewport", {
                    id: "vpMain",
                    renderTo: Ext.getBody(),
                    layout: 'fit',
                    padding: 20
                });
    
                var mainPanel = viewPort.add({
                    itemId: 'mainPanel',
                    layout: 'fit',
                    flex: 1,
                    frame: true,
                    bodyPadding: 20
                });
    
                var pane2 = mainPanel.add({
                    itemId: 'pane2',
                    layout: 'fit',
                    flex: 1,
                    border: false,
                    bodyPadding: 20
                });
    
                var txt1 = pane2.add({
                    itemId: 'txt1',
                    xtype: 'textfield',
                    fieldLabel: 'txt1',
                    labelAlign: 'top',
                    layout: {
                        type: 'hbox'
                    }
                });
    
    
            });
    
        </script>
    
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" theme="Gray" runat="server" />
        <form id="form1" runat="server">
        </form>
    </body>
    </html>
  2. #2
    I'm not entirely sure I understand what your requirements are, but if you are trying to change the css of an element on the page, the easiest thing to do is inspect the element by using a tool such as Firefox + Firebug.

    You can then experiment with the css you need to change, then add to your page as required.
    Geoffrey McGill
    Founder
  3. #3
    Hi Geoffrey

    Probably I'm using the panel an wrong way.

    I'm using the panel as a container of my components, to align in my page/container.

    If I change in css, Works... but, when I change the theme (default to gray), all backgrounds are different. So I need set the panel background to transparent.. or another container that background is transparent by default.

    I'm using javascript in client side.
  4. #4
    What exactly panel should be transparent? 'mainPanel'?
    If yes then set cls for that panel
    cls: 'transparent-frame',
    and add the following css rules
    .transparent-frame, .transparent-frame .x-panel-body-default-framed
            {
                background-color: transparent;
            }
  5. #5
    Hi Vladimir!

    Thanks a lot... Works very fine!

Similar Threads

  1. Replies: 10
    Last Post: Mar 21, 2011, 9:02 AM
  2. [CLOSED] Window transparent background.
    By alainfo in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 17, 2010, 9:24 AM
  3. [CLOSED] the css background-color:Transparent does not work for TextField
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 10, 2010, 3:17 PM
  4. iframe transparent background
    By pintun in forum 1.x Help
    Replies: 1
    Last Post: Nov 05, 2009, 1:50 PM
  5. Replies: 2
    Last Post: Jan 07, 2009, 10:33 AM

Posting Permissions