Results 1 to 10 of 10

Thread: Vertical Toolbars anyone?

  1. #1
    Ext Premium Member
    Join Date
    Mar 2007
    Posts
    21
    Vote Rating
    0
      0  

    Default Vertical Toolbars anyone?

    Is there a simple trick to get a vertically aligned Toolbar? I can't find an example of such, or hints in the code...

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    20
      0  

    Default

    It wouldn't be too difficult to implement (I am guessing). If you want I will take a look for you.

  3. #3
    Ext Premium Member
    Join Date
    Mar 2007
    Posts
    21
    Vote Rating
    0
      0  

    Default

    If it's trivial, fine, but I don't want to distract you from getting 1.0 out the door.

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    42
    Vote Rating
    0
      0  

    Default

    A +1 vote from me for a vertical toolbar. I agree with davidascher though, I prever Ext 1.0 over this

  5. #5
    Sencha User mxracer's Avatar
    Join Date
    Apr 2007
    Location
    Napoleon, OH
    Posts
    299
    Vote Rating
    0
      0  

    Default Vertical Toolbar

    Quote Originally Posted by jack.slocum View Post
    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?

  6. #6
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    20
      0  

    Default

    No, it fell wayyy down the list.
    Jack Slocum
    Sencha Co-Founder, Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum

  7. #7
    Ext User
    Join Date
    Nov 2007
    Location
    PERPIGNAN (FRANCE)
    Posts
    1
    Vote Rating
    0
      0  

    Default

    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>...

    Code:
        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;
            }
        });

  8. #8
    Sencha User
    Join Date
    Mar 2007
    Location
    Bah
    Posts
    434
    Vote Rating
    1
      0  

    Default

    Nice trick, thanks.

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

    Code:
    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.
    Fernando G

  9. #9
    Sencha User
    Join Date
    Mar 2007
    Location
    Bah
    Posts
    434
    Vote Rating
    1
      0  

    Default

    I updated the test code, adding a border layout to display the toolbar next to a panel.
    Fernando G

  10. #10
    Ext User crazypinger's Avatar
    Join Date
    Aug 2007
    Location
    San Francisco, Ca
    Posts
    2
    Vote Rating
    0
      0  

    Default CSS Hack

    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;
    }
    Last edited by crazypinger; 5 Feb 2008 at 6:46 PM. Reason: fixed comments

Similar Threads

  1. two toolbars in the same region?
    By brian in forum Ext 1.x: Help & Discussion
    Replies: 7
    Last Post: 23 May 2007, 10:41 AM
  2. How can I get 2 toolbars stacked above a Grid?
    By steve.neill in forum Ext 1.x: Help & Discussion
    Replies: 16
    Last Post: 11 Jan 2007, 5:45 AM
  3. Font on vertical ylayout
    By pomata in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 30 Nov 2006, 4:16 PM
  4. Embedding HTML / Controls In Toolbars
    By griffiti93 in forum Community Discussion
    Replies: 1
    Last Post: 26 Nov 2006, 4:43 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •