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

  1. #1

    [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
        <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]
  2. #2
    Hi,

    Client side config options are lower-case.

    Please try:
    <BeforeRender Handler="this.baseCls = getCls();" />
  3. #3
    Works!!!

    Thanks a lot, Daniil
  4. #4
    Oops... sorry... I said that works... but, doesn't works.
  5. #5
    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">
  6. #6
    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(StartColorStr='#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>
  7. #7
    Quote Originally Posted by supera View Post
    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();" />
  8. #8
    Works fine...

    I am very grateful for your help.

    thanks a lot, Daniil!

Similar Threads

  1. [CLOSED] rowexpander for specific rows
    By imaa in forum 1.x Premium Help
    Replies: 6
    Last Post: Mar 21, 2012, 7:15 AM
  2. How to get parent menuItem when click menuItem?
    By zhangsir199 in forum 1.x Help
    Replies: 2
    Last Post: Jan 21, 2011, 2:58 AM
  3. [CLOSED] [1.0] Select first MenuItem?
    By Timothy in forum 1.x Premium Help
    Replies: 2
    Last Post: Aug 08, 2010, 7:27 PM
  4. Replies: 2
    Last Post: Jul 29, 2010, 6:28 PM
  5. Replies: 2
    Last Post: Apr 10, 2010, 3:34 AM

Posting Permissions