[CLOSED] GroupTabPanel node without +/- sign

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] GroupTabPanel node without +/- sign

    Hi

    I wonder if it is possible to show a node the grouptabpanel without the +/- sign?
    Please see attached mockup picture, (like the cart icon in the mockup)

    Thanks

    /Mikael
    Attached Thumbnails Click image for larger version. 

Name:	grouptabpanel.jpg 
Views:	166 
Size:	5.7 KB 
ID:	1322  
    Last edited by geoffrey.mcgill; Jul 07, 2010 at 2:50 AM.
  2. #2
    Hi,

    Try the following sample
    <%@ Page Language="C#" ValidateRequest="false" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Ext.NET Example</title>
        
        <style type="text/css">
            .startIcon .x-tab-first a.x-grouptabs-expand{        
                background: url(/icons/basket-png/ext.axd) no-repeat !important;
            }
            .startIcon .x-tab-first ul.x-grouptabs-sub{
                display:none;
            }
        </style>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="Fit">
            <Items>
                <ext:BorderLayout ID="BorderLayout1" runat="server">
                    <Center>
                        <ext:GroupTabPanel ID="GroupTabPanel1" runat="server" TabWidth="160"
                            ActiveGroupIndex="0" Cls="startIcon">
                            <Groups>
                                <ext:GroupTab ID="gtHome1" runat="server">
                                    <Items>
                                        <ext:Panel ID="pnlStart" runat="server" Title="Start" Layout="Fit" TabTip="Start"
                                            Padding="5" Html="test">
                                        </ext:Panel>
                                    </Items>
                                </ext:GroupTab>
                                <ext:GroupTab ID="gtHome2" runat="server" MainItem="0">
                                    <Items>
                                        <ext:Panel ID="Panel2_1" runat="server" Title="Tab2_1" Layout="Fit" Padding="5" Html="test">
                                        </ext:Panel>
                                        <ext:Panel ID="Panel2_2" runat="server" Title="Tab2_2" Layout="Fit" Icon="Package"
                                            Padding="5">                                        
                                        </ext:Panel>
                                    </Items>
                                </ext:GroupTab>
                            </Groups>
                           
                        </ext:GroupTabPanel>
                    </Center>
                </ext:BorderLayout>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
  3. #3
    Thanks, but the icon does not show in the menu, tried in both IE7 and FF.

    How is this solution applied to more nodes then the first?

    /Mikael
  4. #4
    Hi,

    For me the icon is visible (pnlStart icon) under IE and FF, just be sure that you use correct image url
    Another nodes can use custom icon via own id
    <%@ Page Language="C#" ValidateRequest="false" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Ext.NET Example</title>
        
        <style type="text/css">
            .startIcon .x-tab-first a.x-grouptabs-expand{        
                background: url(/icons/basket-png/ext.axd) no-repeat !important;
            }
            .startIcon .x-tab-first ul.x-grouptabs-sub{
                display:none;
            }
            
            #GroupTabPanel1__gtHome2 a.x-grouptabs-expand{
                background: url(/icons/cart-png/ext.axd) no-repeat !important;        
            }
        </style>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="Fit">
            <Items>
                <ext:BorderLayout ID="BorderLayout1" runat="server">
                    <Center>
                        <ext:GroupTabPanel ID="GroupTabPanel1" runat="server" TabWidth="160"
                            ActiveGroupIndex="0" Cls="startIcon">
                            <Groups>
                                <ext:GroupTab ID="gtHome1" runat="server">
                                    <Items>
                                        <ext:Panel ID="pnlStart" runat="server" Title="Start" Layout="Fit" TabTip="Start"
                                            Padding="5" Html="test">
                                        </ext:Panel>
                                    </Items>
                                </ext:GroupTab>
                                <ext:GroupTab ID="gtHome2" runat="server" MainItem="0">
                                    <Items>
                                        <ext:Panel ID="Panel2_1" runat="server" Title="Tab2_1" Layout="Fit" Padding="5" Html="test">
                                        </ext:Panel>
                                        <ext:Panel ID="Panel2_2" runat="server" Title="Tab2_2" Layout="Fit" Icon="Package"
                                            Padding="5">                                        
                                        </ext:Panel>
                                    </Items>
                                </ext:GroupTab>
                            </Groups>
                           
                        </ext:GroupTabPanel>
                    </Center>
                </ext:BorderLayout>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
  5. #5
    Hi
    Please look at the attached image, this is how it looks in my browser?

    /Mikael
    Attached Thumbnails Click image for larger version. 

Name:	tabpanel.jpg 
Views:	140 
Size:	12.7 KB 
ID:	1325  
  6. #6
    Hi,

    What image url do you use? Just my url can be invalid in your application. Use own image url
  7. #7
    Hi
    I use same as you code "background: url(/icons/Cart-png/ext.axd) no-repeat !important; ".
    I thougt that would find the Ext icon package.

    /Mikael
  8. #8
    Hi,

    That url depends from your current application. For example, add button with icon
    <ext:Button runat="server" Icon="Add"/>
    and see what css style wil be generated for Add icon
  9. #9
    Hi
    Okay
    it looks like this

    .icon-add {
    background-image:url(/eHandel1.0/WebResource.axd?d=LLYkoefsR3EQrz2NCerMyBI2XM6SuN1fnHtipiRUfuKj6WJpGxgCjg5PJnI2-vxl0&amp;t=634140255429220000) !important;
    }
    How can I use this?

    /Mikael
  10. #10
    Hi,

    Your application uses WebResource.axd handler instead ext.axd
    It can be if
    - you set CleanResourceUrl="false"
    - you did not register ResourceHandler in the web.config
    - your browser doesn't support compressing (deactivating in the settings or some antivirus/firewalls can deactivate compressing support to save ability scanning network traffic)

    Possible solutions:
    - remove CleanResourceUrl="false"
    - register ResourceHandler in the web.config
    - check browser compressing support (need to check 'Accept-Encoding' in the Header of the request)

    You can get icon url dynamically and register required css on the server side using the following methods of the ResourceManager
    - get icon url: ResourceManager1.GetIconUrl
    - register css block: ResourceManager1.RegisterClientScriptBlock
Page 1 of 2 12 LastLast

Similar Threads

  1. Currency sign.
    By cisco in forum 2.x Help
    Replies: 0
    Last Post: Aug 01, 2012, 4:10 PM
  2. Replies: 8
    Last Post: Jun 20, 2012, 6:48 PM
  3. Replies: 16
    Last Post: Jul 19, 2011, 3:53 AM
  4. Replies: 1
    Last Post: Nov 24, 2010, 3:04 PM
  5. Replies: 1
    Last Post: Jun 05, 2009, 8:03 AM

Posting Permissions