[CLOSED] Customize Toolbar Control

  1. #1

    [CLOSED] Customize Toolbar Control

    Hi Ext.net support team !!

    I don't know is it possible or not, i would like to customize the Toolbar Control, is it possible ?? i have implemented the exercise

    
    <%@ Page Language="C#" AutoEventWireup="true" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head id="Head1" runat="server">
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       <title>Multiple Toolbars</title>
    
        <style type="text/css">
            .my-toolbar1
            {
                background-color : yellow;
                background-image : none;
                border-bottom-width: 5px;
                border-bottom-style: solid;
                border-bottom-color: red;
            }    
            .my-toolbar2
            {
                background-color : blue;
                background-image : none;
                border-bottom-width: 10px;
                border-bottom-style: solid;
                border-bottom-color: orange;
            }    
            .my-toolbar3
            {
                background-color : white;
                background-image : none;
                border-bottom-width: 15px;
                border-bottom-style: solid;
                border-bottom-color: violet;
            }    
        </style>
    </head>
    
        <body>
            <form id="Form1" runat="server">
                <ext:ResourceManager ID="ResourceManager1" runat="server" IDMode="Explicit" Theme="Neptune"/>
                
                <h3>Multiple Toolbars</h3>
                                                                               
                <ext:Panel runat="server" Title="Panel" MarginSpec="20 40 10 40">
                    <DockedItems>
                        <ext:Toolbar runat="server" Dock="Top" Cls="my-toolbar1">
                            <Items>
                                <ext:Button runat="server" Icon="Accept" />
                                <ext:Button runat="server" Icon="Add" />
                                <ext:Button runat="server" Icon="Application" />
                                <ext:Button runat="server" Icon="Bell" />
                                <ext:Button runat="server" Icon="Bomb" />
                            </Items>
                        </ext:Toolbar>
                        
                        <ext:Toolbar runat="server" Dock="Top" Cls="my-toolbar2">
                            <Items>
                                <ext:Button runat="server" Icon="Accept" />
                                <ext:Button runat="server" Icon="Add" />
                                <ext:Button runat="server" Icon="Application" />
                                <ext:Button runat="server" Icon="Bell" />
                                <ext:Button runat="server" Icon="Bomb" />
                            </Items>
                        </ext:Toolbar>
                        
                        <ext:Toolbar runat="server" Dock="Top" Cls="my-toolbar3">
                            <Items>
                                <ext:Button runat="server" Icon="Accept" />
                                <ext:Button runat="server" Icon="Add" />
                                <ext:Button runat="server" Icon="Application" />
                                <ext:Button runat="server" Icon="Bell" />
                                <ext:Button runat="server" Icon="Bomb" />
                            </Items>
                        </ext:Toolbar>
                    </DockedItems>                   
                </ext:Panel>
            </form>
        </body> 
    </html>
    Any idea or help will be appreciated.

    Thanks
    Last edited by Daniil; Oct 09, 2014 at 2:18 PM. Reason: [CLOSED]
  2. #2
    Hi @opendat2000,

    Yes, it is definitely possible. Please use the Cls property only, not others - BaseCls, CellCls, etc.

    Then you need to specify correct CSS rules. This video demonstrates some technique to do that.
    CSS Change TabPanel Header Color - Ext.NET on Vime
  3. #3
    Hi Daniil

    Thank you very much for your support and comments

    I modified the example code to avoid code repetition. It worked properly background-color, border-color not so.

    Saludos
    Mauricio.
  4. #4
    If some CSS rule doesn't work, it probably means that a selector is wrong and the CSS rule is just not applied. Or it might be overridden by a stronger rule.
  5. #5
    Thank you for your support and comments Daniil.

    You can mark this thread with CLOSED

    Saludos
    Mauricio.

Similar Threads

  1. [CLOSED] Hide Toolbar in HTML Editor control
    By rthiney in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 17, 2014, 7:07 PM
  2. [CLOSED] Customize fileupload control to import specific file formats
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Oct 02, 2013, 3:50 PM
  3. Replies: 2
    Last Post: Apr 20, 2010, 1:50 PM
  4. Customize DateField control?
    By ydnah2 in forum 1.x Help
    Replies: 2
    Last Post: Sep 18, 2009, 9:30 AM
  5. How to anchor control in toolbar?
    By dbassett74 in forum 1.x Help
    Replies: 0
    Last Post: May 12, 2009, 12:14 PM

Posting Permissions