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                 textAlign: 'left',
  99                 iconCls: 'add16',
 100                 menu: [{text: 'Cut Menu Item'}]
 101             },{
 102                 text: 'Copy',
 103                 textAlign: 'left',
 104                 iconCls: 'add16'
 105             },{
 106                 text: 'Paste',
 107                 textAlign: 'left',
 108                 iconCls: 'add16',
 109                 menu: [{text: 'Paste Menu Item'}]
 110             },
 111             //'-',
 112             {
 113                 text: 'Format',
 114                 textAlign: 'left',
 115                 iconCls: 'add16'
 116             }
 117         ]
 118     });
 119
 120     new SamplePanel({
 121         title: 'Standard w/Long Text',
 122         rbar: [{
 123                 xtype:'splitbutton',
 124                 text: 'Menu Button',
 125                 iconCls: 'add16',
 126                 textAlign: 'left',
 127                 menu: [{text: 'Menu Button 1'}]
 128             },'-',{
 129                 xtype:'splitbutton',
 130                 text: 'Cut Selection',
 131                 iconCls: 'add16',
 132                 textAlign: 'left',
 133                 menu: [{text: 'Cut Menu Item'}]
 134             },{
 135                 text: 'Copy Selection',
 136                 textAlign: 'left',
 137                 iconCls: 'add16'
 138             },{
 139                 text: 'Paste',
 140                 iconCls: 'add16',
 141                 textAlign: 'left',
 142                 menu: [{text: 'Paste Menu Item'}]
 143             },'-',{
 144                 text: 'Format',
 145                 textAlign: 'left',
 146                 iconCls: 'add16'
 147             }
 148         ]
 149     });
 150
 151     new SamplePanel({
 152         title: 'One of Everything',
 153         tbar: [{
 154                 iconCls: 'add16',
 155                 text: 'Button 1'
 156             },
 157             '-',
 158             {
 159                 iconCls: 'add16',
 160                 text: 'Button 2'
 161             },{
 162                 iconCls: 'add16'
 163             },{
 164                 iconCls: 'add16'
 165             },
 166             '-',
 167             {
 168                 iconCls: 'add16'
 169             }
 170         ],
 171         lbar: [{
 172                 iconCls: 'add16',
 173                 tooltip: 'Button 1'
 174             },
 175             '-',
 176             {
 177                 iconCls: 'add16',
 178                 tooltip: {
 179                     text: 'Button 2',
 180                     anchor: 'left'
 181                 }
 182             },{
 183                 iconCls: 'add16'
 184             },{
 185                 iconCls: 'add16'
 186             },
 187             '-',
 188             {
 189                 iconCls: 'add16'
 190             }
 191         ],
 192         rbar: [{
 193                 iconCls: 'add16',
 194                 tooltip: 'Button 1'
 195             },
 196             '-',
 197             {
 198                 iconCls: 'add16',
 199                 tooltip: {
 200                     text: 'Button 2',
 201                     anchor: 'left'
 202                 }
 203             },{
 204                 iconCls: 'add16'
 205             },{
 206                 iconCls: 'add16'
 207             },
 208             '-',
 209             {
 210                 iconCls: 'add16'
 211             }
 212         ],
 213         bbar: [{
 214                 iconCls: 'add16',
 215                 text: 'Button 3'
 216             },
 217             '-',
 218             {
 219                 iconCls: 'add16',
 220                 text: 'Button 4'
 221             },{
 222                 iconCls: 'add16'
 223             },{
 224                 iconCls: 'add16'
 225             },
 226             '-',
 227             {
 228                 iconCls: 'add16',
 229                 text: 'Button 5',
 230                 menu: [
 231                     { text: "Menu Item 1" }
 232                 ]
 233             }
 234         ]
 235     });
 236 });
 237