examples/toolbar/vertical-toolbars.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.require([
  16     'Ext.panel.*',
  17     'Ext.toolbar.*',
  18     'Ext.button.*',
  19     'Ext.container.ButtonGroup',
  20     'Ext.layout.container.Table',
  21     'Ext.tip.QuickTipManager'
  22 ]);
  23
  24 Ext.onReady(function() {
  25     var fakeHTML = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
  26
  27     Ext.QuickTips.init();
  28
  29     // The default dockedItem weights have TLRB order, but TBLR matches border layout:
  30     Ext.panel.AbstractPanel.prototype.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };
  31
  32     var SamplePanel = Ext.extend(Ext.Panel, {
  33         width    : 500,
  34         height   : 250,
  35         style    : 'margin-top:15px',
  36         bodyStyle: 'padding:10px',
  37         renderTo : Ext.getBody(),
  38         html     : fakeHTML,
  39         autoScroll: true
  40     });
  41
  42     new SamplePanel({
  43         title: 'Standard (lbar)',
  44         lbar: [{
  45                 iconCls: 'add16',
  46                 tooltip: 'Button 1'
  47             },
  48             '-',
  49             {
  50                 iconCls: 'add16',
  51                 tooltip: {
  52                     text: 'Button 2',
  53                     anchor: 'left'
  54                 }
  55             },{
  56                 iconCls: 'add16'
  57             },{
  58                 iconCls: 'add16'
  59             },
  60             '-',
  61             {
  62                 iconCls: 'add16'
  63             }
  64         ]
  65     });
  66
  67     new SamplePanel({
  68         title: 'Standard w/Split Buttons (rbar)',
  69         rbar: [{
  70                 iconCls: 'add16',
  71                 menu: [{text: 'Menu Button 1'}]
  72             },'-',{
  73                 iconCls: 'add16',
  74                 menu: [{text: 'Cut Menu Item'}]
  75             },{
  76                 iconCls: 'add16'
  77             },{
  78                 iconCls: 'add16',
  79                 menu: [{text: 'Paste Menu Item'}]
  80             },'-',{
  81                 iconCls: 'add16'
  82             }
  83         ]
  84     });
  85
  86     new SamplePanel({
  87         title: 'Standard w/Short Text',
  88         lbar: [{
  89                 xtype:'splitbutton',
  90                 text: 'Menu',
  91                 iconCls: 'add16',
  92                 menu: [{text: 'Menu Button 1'}]
  93             },
  94             //'-',
  95             {
  96                 xtype:'splitbutton',
  97                 text: 'Cut',
  98                 iconCls: 'add16',
  99                 menu: [{text: 'Cut Menu Item'}]
 100             },{
 101                 text: 'Copy',
 102                 iconCls: 'add16'
 103             },{
 104                 text: 'Paste',
 105                 iconCls: 'add16',
 106                 menu: [{text: 'Paste Menu Item'}]
 107             },
 108             //'-',
 109             {
 110                 text: 'Format',
 111                 iconCls: 'add16'
 112             }
 113         ]
 114     });
 115
 116     new SamplePanel({
 117         title: 'Standard w/Long Text',
 118         rbar: [{
 119                 xtype:'splitbutton',
 120                 text: 'Menu Button',
 121                 iconCls: 'add16',
 122                 menu: [{text: 'Menu Button 1'}]
 123             },'-',{
 124                 xtype:'splitbutton',
 125                 text: 'Cut Selection',
 126                 iconCls: 'add16',
 127                 menu: [{text: 'Cut Menu Item'}]
 128             },{
 129                 text: 'Copy Selection',
 130                 iconCls: 'add16'
 131             },{
 132                 text: 'Paste',
 133                 iconCls: 'add16',
 134                 menu: [{text: 'Paste Menu Item'}]
 135             },'-',{
 136                 text: 'Format',
 137                 iconCls: 'add16'
 138             }
 139         ]
 140     });
 141
 142     new SamplePanel({
 143         title: 'One of Everything',
 144         tbar: [{
 145                 iconCls: 'add16',
 146                 text: 'Button 1'
 147             },
 148             '-',
 149             {
 150                 iconCls: 'add16',
 151                 text: 'Button 2'
 152             },{
 153                 iconCls: 'add16'
 154             },{
 155                 iconCls: 'add16'
 156             },
 157             '-',
 158             {
 159                 iconCls: 'add16'
 160             }
 161         ],
 162         lbar: [{
 163                 iconCls: 'add16',
 164                 tooltip: 'Button 1'
 165             },
 166             '-',
 167             {
 168                 iconCls: 'add16',
 169                 tooltip: {
 170                     text: 'Button 2',
 171                     anchor: 'left'
 172                 }
 173             },{
 174                 iconCls: 'add16'
 175             },{
 176                 iconCls: 'add16'
 177             },
 178             '-',
 179             {
 180                 iconCls: 'add16'
 181             }
 182         ],
 183         rbar: [{
 184                 iconCls: 'add16',
 185                 tooltip: 'Button 1'
 186             },
 187             '-',
 188             {
 189                 iconCls: 'add16',
 190                 tooltip: {
 191                     text: 'Button 2',
 192                     anchor: 'left'
 193                 }
 194             },{
 195                 iconCls: 'add16'
 196             },{
 197                 iconCls: 'add16'
 198             },
 199             '-',
 200             {
 201                 iconCls: 'add16'
 202             }
 203         ],
 204         bbar: [{
 205                 iconCls: 'add16',
 206                 text: 'Button 3'
 207             },
 208             '-',
 209             {
 210                 iconCls: 'add16',
 211                 text: 'Button 4'
 212             },{
 213                 iconCls: 'add16'
 214             },{
 215                 iconCls: 'add16'
 216             },
 217             '-',
 218             {
 219                 iconCls: 'add16',
 220                 text: 'Button 5',
 221                 menu: [
 222                     { text: "Menu Item 1" }
 223                 ]
 224             }
 225         ]
 226     });
 227 });
 228