Mar 29, 2012, 2:48 PM
[CLOSED] How I select a specific CSS in a ext:MenuItem.BaseCls property?
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
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(StartColorStr='#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>
Last edited by Daniil; Mar 29, 2012 at 4:39 PM.
Reason: [CLOSED]