PDA

View Full Version : [CLOSED] Customize Toolbar Control



opendat2000
Oct 07, 2014, 3:23 PM
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

Daniil
Oct 08, 2014, 3:34 PM
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 (http://vimeo.com/10076549)

opendat2000
Oct 08, 2014, 7:04 PM
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.

Daniil
Oct 09, 2014, 8:27 AM
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.

opendat2000
Oct 09, 2014, 2:27 PM
Thank you for your support and comments Daniil.

You can mark this thread with CLOSED

Saludos
Mauricio.