PDA

View Full Version : [CLOSED] How I select a specific CSS in a ext:MenuItem.BaseCls property?



supera
Mar 29, 2012, 2:48 PM
Hi!

I want that ext:menuitem background is a gradient color.
I have differents styles to each browser.
I have a function that return a style name, depending the current browser.
How I set in the ext:menuItem baseCls the result returned that javascript function?

Styles


<style>

.menu-item-background-explorer {
background: #696969 !Important;
filter: progid:DXImageTransform.Microsoft.Gradient(StartCo lorStr='#FFFAFA', EndColorStr='#696969', GradientType=1);
}

.menu-item-background-firefox {
background: -moz-linear-gradient(left, #FFFAFA, #696969) !Important;
}

.menu-item-background-chrome {
background: -webkit-gradient(linear, left top, right top, from(#FFFAFA), to(#696969)) !Important;
}

.menu-item-background {
background: #696969 !Important;
}

</style>


JavaScript function


<script type="text/javascript">

var getCls = function () {
var browser = "";

switch (BrowserDetect.browser) {
case "Explorer":
browser = "-explorer";
break;
case "Firefox":
browser = "-firefox";
break; /*mozilla e firefox é o mesmo*/
case "Mozilla":
browser = "-firefox";
break; /*mozilla e firefox é o mesmo*/
case "Chrome":
browser = "-chrome";
break; /*chrome e safari é o mesmo*/
case "Safari":
browser = "-chrome";
break; /*chrome e safari é o mesmo*/
case "Opera":
browser = "";
break; /*opera não faz gradient*/
default: break;
}

return 'menu-item-background'+browser;
}

</script>


How I'm trying now (and failed):


<ext:MenuItem ID="mnSchedules" runat="server" Text="Agenda" Cls="icon-32x32" IconUrl="/resources/images/toolbar/48x48/agendas.png">
<Listeners>
<AfterRender Handler="alert(getCls()); this.BaseCls = getCls();" />
<BeforeRender Handler="alert(getCls()); this.BaseCls = getCls();" />
</Listeners>
</ext:MenuItem>

Daniil
Mar 29, 2012, 4:01 PM
Hi,

Client side config options are lower-case.

Please try:

<BeforeRender Handler="this.baseCls = getCls();" />

supera
Mar 29, 2012, 4:36 PM
Works!!!

Thanks a lot, Daniil

supera
Mar 29, 2012, 4:54 PM
Oops... sorry... I said that works... but, doesn't works.

Daniil
Mar 29, 2012, 4:58 PM
Please provide more details.

Are the styles not applied?

Please check the "baseCls" is actually applied (or not) to an HTML element.

By the way, do you really need to use baseCls? I think it can break MenuItem styles.

I would try to use the "cls" config option and statically:

<ext:MenuItem runat="server" Cls="your-class-to-override-background">

supera
Mar 29, 2012, 5:17 PM
Hi!...



I would try to use the "cls" config option and statically:

Well, in Cls property I set other CSS style to redim the icon of menuitem to 32x32....
And I try set the property by BeforeRender because the cls is returned by a javascript funtion... This function return the specific CSS by current browser. I'm using a javascript function to return a Css because the CSS to make a gradient background is different for each browser.

But, If you has a suggestion, I will like listen this.

It is my source code... May be clarify this...



<%@ Page Language="vb" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>SuperaWeb® - Organizador pessoal</title>
<link href="~/Resources/Styles/SuperaWeb.css" rel="stylesheet" type="text/css" />
<link href="~/Resources/Styles/ExtNet.css" rel="stylesheet" type="text/css" />
<script src="/scripts/utils.js" type="text/javascript"> </script>
<script src="/scripts/masks.js" type="text/javascript"> </script>
<script src="/scripts/validators.js" type="text/javascript"> </script>
<script src="/scripts/jsDate.js" type="text/javascript"> </script>

<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles"/>
<script src="/scripts/ExtJS.js" type="text/javascript"> </script>
<script src="/scripts/ExtNex2xWorkArrounds.js" type="text/javascript"> </script>

<style>

.x-box-scroller-top .x-menu-scroll-top
{
background-color: #A2B5CD !Important;
}

.x-box-scroller-bottom .x-menu-scroll-bottom
{
background-color: #A2B5CD !Important;
}

.x-menu-icon-separator
{
background: transparent !Important;
}

.menuIe .x-menu-body
{
background-color: #CAE1FF !Important;
filter: progid:DXImageTransform.Microsoft.Gradient(StartCo lorStr='#CAE1FF', EndColorStr='#A2B5CD', GradientType=1);
}

.menuFirefox .x-menu-body
{
background: -moz-linear-gradient(left, #CAE1FF, #A2B5CD) !Important;
}

.menuChrome .x-menu-body
{
background: -webkit-gradient(linear, left top, right top, from(#CAE1FF), to(#A2B5CD)) !Important;
}

.menuDefault .x-menu-body
{
background: #CAE1FF !Important;
}


/*##################################*/
/* MENUITEMS - ALTERAÇÃO DO TAMANHO DOS ÍCONES */
/*##################################*/

.menu-big-icons .x-menu-icon-separator {
left: 59px;
}

.menu-big-icons .x-menu-item-link {
padding-left: 64px;
}

.icon-24x24 .x-menu-item-icon {
width: 24px;
height: 24px;
line-height: 24px;
}

.icon-32x32 .x-menu-item-icon {
width: 32px;
height: 32px;
line-height: 32px;
}

.icon-32x32 .x-menu-item-link {
line-height: 32px;
}

.icon-48x48 .x-menu-item-icon {
width: 48px;
height: 48px;
line-height: 48px;
}

.icon-48x48 .x-menu-item-link {
line-height: 48px;
}

</style>

<script type="text/javascript">

var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i = 0; i < data.length; i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
},
dataBrowser: [
{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
},
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari",
versionSearch: "Version"
},
{
prop: window.opera,
identity: "Opera",
versionSearch: "Version"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS: [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.userAgent,
subString: "iPhone",
identity: "iPhone/iPod"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]

};

BrowserDetect.init();

var getCls = function (rad) {
var browser = "";

switch (BrowserDetect.browser) {
case "Explorer":
browser = "Ie";
break;
case "Firefox":
browser = "Firefox";
break; /*mozilla e firefox é o mesmo*/
case "Mozilla":
browser = "Firefox";
break; /*mozilla e firefox é o mesmo*/
case "Chrome":
browser = "Chrome";
break; /*chrome e safari é o mesmo*/
case "Safari":
browser = "Chrome";
break; /*chrome e safari é o mesmo*/
case "Opera":
browser = "Default";
break; /*opera não faz gradient*/
default: break;
}

return rad + browser;
}

</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" Locale="pt-BR" />
<form id="form1" runat="server">
<ext:Viewport runat="server" ID="viewPort2" Layout="BorderLayout">
<Items>
<ext:Panel ID="panelLeft" runat="server" Region="West" Flex="1" Width="200" layout="AnchorLayout" BodyPadding="0">
<Items>
<ext:Panel ID="panelFilter" runat="server" layout="FitLayout" AnchorHorizontal="100%" AnchorVertical="60%" BodyPadding="0" />
<ext:MenuPanel ID="panelMain" runat="server" Cls="menu-big-icons" layout="FitLayout" AnchorHorizontal="100%" AnchorVertical="40%" BodyPadding="0" >
<Listeners>
<BeforeRender Handler="this.baseCls=getCls('menu');" />
</Listeners>
<Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem ID="mnSchedules" runat="server" Text="Agenda" Cls="icon-32x32" IconUrl="agendas.png" />
<ext:MenuItem ID="mnEmails" runat="server" Text="Email" Cls="icon-32x32" IconUrl="email2.png" />
<ext:MenuItem ID="mnTasks" runat="server" Text="Tarefas" Cls="icon-32x32" IconUrl="tarefas.png" />
<ext:MenuItem ID="mnNotes" runat="server" Text="Notas" Cls="icon-32x32" IconUrl="notes2.png" />
<ext:MenuItem ID="mnMural" runat="server" Text="Mural" Cls="icon-32x32" IconUrl="mural.png" />
<ext:MenuItem ID="mnBirthDate" runat="server" Text="Aniversários" Cls="icon-32x32" IconUrl="aniversarios.png" />
</Items>
</Menu>
</ext:MenuPanel>
</Items>
</ext:Panel>
<ext:Panel ID="panelCenter" runat="server" Region="Center" Flex="1" layout="FitLayout" BodyPadding="6" />
</Items>
</ext:Viewport>
</form>
</body>
</html>

Daniil
Mar 29, 2012, 6:18 PM
Well, in Cls property I set other CSS style to redim the icon of menuitem to 32x32

You can set up several classes separated by white spaces.

Cls="class1 class2"

So, I think it should look this way:

<BeforeRender Handler="this.cls += " " + getCls();" />

supera
Mar 29, 2012, 6:24 PM
Works fine...

I am very grateful for your help.

thanks a lot, Daniil!