PDA

View Full Version : Vertical Toolbars anyone?



davidascher
21 Feb 2007, 1:10 PM
Is there a simple trick to get a vertically aligned Toolbar? I can't find an example of such, or hints in the code...

jack.slocum
21 Feb 2007, 1:27 PM
It wouldn't be too difficult to implement (I am guessing). If you want I will take a look for you.

davidascher
21 Feb 2007, 1:32 PM
If it's trivial, fine, but I don't want to distract you from getting 1.0 out the door.

mnugter
22 Feb 2007, 12:25 AM
A +1 vote from me for a vertical toolbar. I agree with davidascher though, I prever Ext 1.0 over this :)

mxracer
7 Aug 2007, 6:50 PM
It wouldn't be too difficult to implement (I am guessing). If you want I will take a look for you.

Hi Jack.

Did you ever do anything with this?

jack.slocum
8 Aug 2007, 12:43 AM
No, it fell wayyy down the list. ;)

djudjou
21 Nov 2007, 5:35 AM
Hello
I write a simple 'patch' to display vertical toolbar.
I'm new to Ext and it's not very clean solution but it works for me.
I overrides 'nextBlock()' to add a ligne <tr>...



var tb = new Ext.Toolbar();
Ext.apply(tb, {
nextBlock : function(){
var td = document.createElement("td");
this.tr.appendChild(td);

/* Gestion de la barre d'outil verticale !*/
var tr = document.createElement("tr");
var tbl = this.el.child("tbody", true);
tbl.appendChild(tr);
this.tr = tr;
/* */

return td;
}
});

efege
21 Nov 2007, 5:55 AM
Nice trick, thanks. :)

I wrapped your code to create a quick test (see link in my signature):



Ext.getBody().update('<div id="container"></div>')
var tb = new Ext.Toolbar();
Ext.apply(tb, {
nextBlock : function(){
var td = document.createElement("td");
this.tr.appendChild(td);

/* Gestion de la barre d'outil verticale !*/
var tr = document.createElement("tr");
var tbl = this.el.child("tbody", true);
tbl.appendChild(tr);
this.tr = tr;
/* */

return td;
}
});

panel = new Ext.Panel({
width: 300,
height: 200,
renderTo: 'container',
layout: 'border',
defaults: {border: false},
items: [
{region: 'west', width: 65, tbar: tb},
{region: 'center', html: 'Panel content', bodyStyle: 'padding: 1em; border-left: 1px solid #999'}
]
});

tb.add(
{text: 'Button 1'}, {text: 'Button 2'}, {text: 'Button 3'},
{text: 'Button 4'}, {text: 'Button 5'}, {text: 'Button 6'}
);


EDIT: added border layout to show the toolbar next to a panel.

efege
21 Nov 2007, 6:17 AM
I updated the test code, adding a border layout to display the toolbar next to a panel.

crazypinger
5 Feb 2008, 6:45 PM
Here is a way I used to make the tabs align vertically but without using the above js code, this is a purely css way to do things. This css uses the script from http://rafael.adm.br/css_browser_selector which allows for OS and Browser specific styles by using a prefix, and yes it works with EXT 2.0.

I put a <div class="wrapper-tabs-vert-ext"> around where everything was to appear on the page to allow for the styling without causing inheritance issues elsewhere. This was used for a static width site, but I'm sure with minimal hacking you can get this to work on a liquid width site.


/**************************** CSS **********************/

.wrapper-tabs-vert-ext {
border-top: 1px solid #ccc;
float:left;
width: 100% !important;
}

/* This holds the <ul> which has the tabs */
.wrapper-tabs-vert-ext .x-tab-panel-header {
width: 150px;
float: left;
}

/* This is the <div> object that the tabs populate */
.wrapper-tabs-vert-ext .x-tab-panel-bwrap {
margin-left: 160px;
width: 774px;
}

/* Mozilla fix */
.gecko .wrapper-tabs-vert-ext .x-tab-panel-bwrap {
margin-left: 10px;
}

/* This is to let the background show through */
.wrapper-tabs-vert-ext .x-tab-panel-body, .wrapper-tabs-vert-ext .x-tab-panel-body .x-panel-body {
background: transparent;
}

.wrapper-tabs-vert-ext ul.x-tab-strip { /* ext-all.css (line 71) */
display:block;
width: 150px !important;
}

.wrapper-tabs-vert-ext ul.x-tab-strip-top { /* ext-all.css (line 72) */
margin: 0px;
padding: 0px;
border-bottom: none;
}

.wrapper-tabs-vert-ext ul.x-tab-strip li { /* ext-all.css (line 78) */
margin-left: 0px;
float: none;
clear: both;
}

.wrapper-tabs-vert-ext .x-tab-strip-top .x-tab-right {
border: 1px solid #ccc;
border-width: 0px 1px 1px 0px;
background: #DFEBF5;
font-size: 12px;
font-weight: bold;
padding: 6px 8px 6px 12px;
}

.wrapper-tabs-vert-ext .x-tab-strip-top .x-tab-left { /* ext-all.css (line 98) */
background: none;
padding-right:0px;
}

.wrapper-tabs-vert-ext .x-tab-strip-top .x-tab-strip-inner { /* ext-all.css (line 99) */
background: none;
}

.wrapper-tabs-vert-ext .x-tab-strip-top .x-tab-strip-active .x-tab-right span { /* ext-all.css (line 94) */
padding-bottom: 0px;
}

.wrapper-tabs-vert-ext .x-tab-strip span.x-tab-strip-text { /* ext-all.css (line 83) */
color: #365FB7;
font-family: arial,helvetica;
font-size: 12px;
font-weight: bold;
padding: 0px;
}

/* This is for an active tab <li class="x-tab-strip-active"> piece */
.wrapper-tabs-vert-ext .x-tab-strip-top li.x-tab-strip-active {
border-bottom: 1px solid #ccc;
}

/* This is for an active tab <a href> piece */
.wrapper-tabs-vert-ext .x-tab-strip-top li.x-tab-strip-active .x-tab-right {
background: #FFFFFF;
border-width: 0px 0px 1px 1px;
padding-left: 11px;
}

.wrapper-tabs-vert-ext .x-tab-strip-top .x-tab-strip-active span.x-tab-strip-text {
color: #868686;
}

.wrapper-tabs-vert-ext .x-tab-panel-header-plain .x-tab-strip-spacer { /* ext-all.css (line 76) */
display:none;
}