[CLOSED] Set background of Panel to transparent

  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 & CEO
  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;
            }
    Vladimir Shcheglov
    Sr. Developer
  5. #5
    Hi Vladimir!

    Thanks a lot... Works very fine!

Similar Threads

  1. Replies: 10
    Last Post: Mar 21, 2011, 10:02 AM
  2. [CLOSED] Window transparent background.
    By alainfo in forum 1.x Premium Help
    Replies: 4
    Last Post: Jun 17, 2010, 10:24 AM
  3. Replies: 2
    Last Post: Mar 10, 2010, 4:17 PM
  4. iframe transparent background
    By pintun in forum 1.x Help
    Replies: 1
    Last Post: Nov 05, 2009, 2:50 PM
  5. Replies: 2
    Last Post: Jan 07, 2009, 11:33 AM

Posting Permissions