PDA

View Full Version : [CLOSED] Set background of Panel to transparent



supera
Feb 28, 2013, 8:40 PM
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>

geoffrey.mcgill
Feb 28, 2013, 8:47 PM
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.

supera
Mar 01, 2013, 11:05 AM
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.

Vladimir
Mar 01, 2013, 11:45 AM
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;
}

supera
Mar 01, 2013, 12:57 PM
Hi Vladimir!

Thanks a lot... Works very fine!