examples/toolbar/vertical-toolbars.js

   1 Ext.require([
   2     'Ext.panel.*',
   3     'Ext.toolbar.*',
   4     'Ext.button.*',
   5     'Ext.container.ButtonGroup',
   6     'Ext.layout.container.Table',
   7     'Ext.tip.QuickTipManager'
   8 ]);
   9
  10 Ext.onReady(function() {
  11     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.";
  12
  13     Ext.QuickTips.init();
  14
  15     var SamplePanel = Ext.extend(Ext.Panel, {
  16         width    : 500,
  17         height   : 250,
  18         style    : 'margin-top:15px',
  19         bodyStyle: 'padding:10px',
  20         renderTo : Ext.getBody(),
  21         html     : fakeHTML,
  22         autoScroll: true
  23     });
  24
  25     new SamplePanel({
  26         title: 'Standard (lbar)',
  27         lbar: [{
  28                 iconCls: 'add16',
  29                 tooltip: 'Button 1'
  30             },
  31             '-',
  32             {
  33                 iconCls: 'add16',
  34                 tooltip: {
  35                     text: 'Button 2',
  36                     anchor: 'left'
  37                 }
  38             },{
  39                 iconCls: 'add16'
  40             },{
  41                 iconCls: 'add16'
  42             },
  43             '-',
  44             {
  45                 iconCls: 'add16'
  46             }
  47         ]
  48     });
  49
  50     new SamplePanel({
  51         title: 'Standard w/Split Buttons (rbar)',
  52         rbar: [{
  53                 iconCls: 'add16',
  54                 menu: [{text: 'Menu Button 1'}]
  55             },'-',{
  56                 iconCls: 'add16',
  57                 menu: [{text: 'Cut Menu Item'}]
  58             },{
  59                 iconCls: 'add16'
  60             },{
  61                 iconCls: 'add16',
  62                 menu: [{text: 'Paste Menu Item'}]
  63             },'-',{
  64                 iconCls: 'add16'
  65             }
  66         ]
  67     });
  68
  69     new SamplePanel({
  70         title: 'Standard w/Short Text',
  71         lbar: [{
  72                 xtype:'splitbutton',
  73                 text: 'Menu',
  74                 iconCls: 'add16',
  75                 menu: [{text: 'Menu Button 1'}]
  76             },
  77             //'-',
  78             {
  79                 xtype:'splitbutton',
  80                 text: 'Cut',
  81                 iconCls: 'add16',
  82                 menu: [{text: 'Cut Menu Item'}]
  83             },{
  84                 text: 'Copy',
  85                 iconCls: 'add16'
  86             },{
  87                 text: 'Paste',
  88                 iconCls: 'add16',
  89                 menu: [{text: 'Paste Menu Item'}]
  90             },
  91             //'-',
  92             {
  93                 text: 'Format',
  94                 iconCls: 'add16'
  95             }
  96         ]
  97     });
  98
  99     new SamplePanel({
 100         title: 'Standard w/Long Text',
 101         rbar: [{
 102                 xtype:'splitbutton',
 103                 text: 'Menu Button',
 104                 iconCls: 'add16',
 105                 menu: [{text: 'Menu Button 1'}]
 106             },'-',{
 107                 xtype:'splitbutton',
 108                 text: 'Cut Selection',
 109                 iconCls: 'add16',
 110                 menu: [{text: 'Cut Menu Item'}]
 111             },{
 112                 text: 'Copy Selection',
 113                 iconCls: 'add16'
 114             },{
 115                 text: 'Paste',
 116                 iconCls: 'add16',
 117                 menu: [{text: 'Paste Menu Item'}]
 118             },'-',{
 119                 text: 'Format',
 120                 iconCls: 'add16'
 121             }
 122         ]
 123     });
 124
 125     new SamplePanel({
 126         title: 'One of Everything',
 127         tbar: [{
 128                 iconCls: 'add16',
 129                 text: 'Button 1'
 130             },
 131             '-',
 132             {
 133                 iconCls: 'add16',
 134                 text: 'Button 2'
 135             },{
 136                 iconCls: 'add16'
 137             },{
 138                 iconCls: 'add16'
 139             },
 140             '-',
 141             {
 142                 iconCls: 'add16'
 143             }
 144         ],
 145         lbar: [{
 146                 iconCls: 'add16',
 147                 tooltip: 'Button 1'
 148             },
 149             '-',
 150             {
 151                 iconCls: 'add16',
 152                 tooltip: {
 153                     text: 'Button 2',
 154                     anchor: 'left'
 155                 }
 156             },{
 157                 iconCls: 'add16'
 158             },{
 159                 iconCls: 'add16'
 160             },
 161             '-',
 162             {
 163                 iconCls: 'add16'
 164             }
 165         ],
 166         rbar: [{
 167                 iconCls: 'add16',
 168                 tooltip: 'Button 1'
 169             },
 170             '-',
 171             {
 172                 iconCls: 'add16',
 173                 tooltip: {
 174                     text: 'Button 2',
 175                     anchor: 'left'
 176                 }
 177             },{
 178                 iconCls: 'add16'
 179             },{
 180                 iconCls: 'add16'
 181             },
 182             '-',
 183             {
 184                 iconCls: 'add16'
 185             }
 186         ],
 187         bbar: [{
 188                 iconCls: 'add16',
 189                 text: 'Button 3'
 190             },
 191             '-',
 192             {
 193                 iconCls: 'add16',
 194                 text: 'Button 4'
 195             },{
 196                 iconCls: 'add16'
 197             },{
 198                 iconCls: 'add16'
 199             },
 200             '-',
 201             {
 202                 iconCls: 'add16',
 203                 text: 'Button 5',
 204                 menu: [
 205                     { text: "Menu Item 1" }
 206                 ]
 207             }
 208         ]
 209     });
 210 });