[CLOSED] [1.0] setting famfamfam Icon from client side

  1. #1

    [CLOSED] [1.0] setting famfamfam Icon from client side

    hi,

    i'm adding items to menu of button dynamically from the client side put the icon is not working work!

    btnAddNewSection.menu.addItem({ text: sectionTitle, icon: "ApplicationSideList", listeners: { click: { fn: function(el) { addNewSection(sId); } }} });
    i want to use same icons available and built in with Ext.Net from the client-side! please help.
    Last edited by Daniil; Jul 22, 2010 at 11:39 AM.
  2. #2
    Hello, webclouder!

    Please look at this example:
    <!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 runat="server">
        <title></title>
        <ext:ResourcePlaceHolder runat="server" Mode="Script"/>
    
        <script type="text/javascript">
            Ext.onReady(function() {
                btnAddNewSection.menu.addItem(
                    {
                        text: "Dynamically added item",                   
                        icon: "/icons/application_side_list-png/ext.axd",
                        listeners: {
                            click: {
                                fn: function(el) {
                                    addNewSection(sId);
                                }
                            }
                        }
                    });
            });
        </script>
    
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <form id="form1" runat="server">
        <ext:Button ID="btnAddNewSection" runat="server" Text="Text">
            <Menu>
                <ext:Menu ID="Menu1" runat="server">
                    <Items>
                        <ext:MenuItem ID="MenuItem1" runat="server" Text="Item 1" Icon="GroupAdd" />
                        <ext:MenuItem ID="MenuItem2" runat="server" Text="Item 2" Icon="GroupDelete" />
                        <ext:MenuItem ID="MenuItem3" runat="server" Text="Item 3" Icon="GroupEdit" />
                    </Items>
                </ext:Menu>
            </Menu>
        </ext:Button>
        </form>
    </body>
    </html>
    You just use the wrong value for the icon config item. It looks like this:
     icon: "/icons/application_side_list-png/ext.axd"
    There is the second way to do it. You could use the iconCls property but firstly you have to register an icon using the RegisterIcon method of ResourceManager control. Please look at this:
    <script runat="server">
        protected void Page_Init(object sender, EventArgs e)
        {
            this.ResourceManager1.RegisterIcon(Icon.ApplicationSideList); //There are all icons in The Icon enum
        }            
    </script>
    
    <!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 runat="server">
        <title></title>
        <ext:ResourcePlaceHolder runat="server" Mode="Script" />
    
        <script type="text/javascript">
            Ext.onReady(function() {
                btnAddNewSection.menu.addItem(
                    {
                        text: "Dynamically added item",
                        iconCls: "icon-applicationsidelist",
                        listeners: {
                            click: {
                                fn: function(el) {
                                    addNewSection(sId);
                                }
                            }
                        }
                    });
            });
        </script>
    
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <form id="form1" runat="server">
        <ext:Button ID="btnAddNewSection" runat="server" Text="Text">
            <Menu>
                <ext:Menu ID="Menu1" runat="server">
                    <Items>
                        <ext:MenuItem ID="MenuItem1" runat="server" Text="Item 1" Icon="GroupAdd" />
                        <ext:MenuItem ID="MenuItem2" runat="server" Text="Item 2" Icon="GroupDelete" />
                        <ext:MenuItem ID="MenuItem3" runat="server" Text="Item 3" Icon="GroupEdit" />
                    </Items>
                </ext:Menu>
            </Menu>
        </ext:Button>
        </form>
    </body>
    </html>
    There are all icons in The Icon enum.
  3. #3
    You just use the wrong value for the icon config item. It looks like this:
    icon:  "/icons/application_side_list-png/ext.axd"
    To get an icon url on your machine you can use the GetIconUrl method of a ResourceManager control.
    this.ResourceManager1.GetIconUrl(Icon.ApplicationSideList);

Similar Threads

  1. Disabling MenuItems Icon at client side
    By Dominik in forum 1.x Help
    Replies: 20
    Last Post: Jun 28, 2011, 10:37 AM
  2. Replies: 1
    Last Post: Dec 01, 2010, 5:14 PM
  3. Replies: 4
    Last Post: Mar 19, 2010, 11:35 AM
  4. Replies: 0
    Last Post: Sep 17, 2009, 8:04 AM
  5. Set Panel Icon Client Side
    By Tbaseflug in forum 1.x Help
    Replies: 2
    Last Post: Apr 29, 2009, 2:21 PM

Posting Permissions