examples/toolbar/toolbars.js

   1 Ext.require([
   2     'Ext.panel.*',
   3     'Ext.toolbar.*',
   4     'Ext.button.*',
   5     'Ext.container.ButtonGroup',
   6     'Ext.layout.container.Table'
   7 ]);
   8
   9 Ext.onReady(function() {
  10     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.";
  11
  12     var SamplePanel = Ext.extend(Ext.Panel, {
  13         width    : 500,
  14         height   : 250,
  15         style    : 'margin-top:15px',
  16         bodyStyle: 'padding:10px',
  17         renderTo : Ext.getBody(),
  18         html     : fakeHTML,
  19         autoScroll: true
  20     });
  21
  22     new SamplePanel({
  23         title: 'Standard',
  24         tbar: [{
  25             xtype:'splitbutton',
  26             text: 'Menu Button',
  27             iconCls: 'add16',
  28             menu: [{text: 'Menu Button 1'}]
  29         },'-',{
  30             xtype:'splitbutton',
  31             text: 'Cut',
  32             iconCls: 'add16',
  33             menu: [{text: 'Cut Menu Item'}]
  34         },{
  35             text: 'Copy',
  36             iconCls: 'add16'
  37         },{
  38             text: 'Paste',
  39             iconCls: 'add16',
  40             menu: [{text: 'Paste Menu Item'}]
  41         },'-',{
  42             text: 'Format',
  43             iconCls: 'add16'
  44         }]
  45     });
  46
  47     new SamplePanel({
  48         title: 'Multi columns',
  49         tbar: [{
  50             xtype: 'buttongroup',
  51             title: 'Clipboard',
  52             columns: 2,
  53             defaults: {
  54                 scale: 'small'
  55             },
  56             items: [{
  57                 xtype:'splitbutton',
  58                 text: 'Menu Button',
  59                 iconCls: 'add16',
  60                 menu: [{text: 'Menu Item 1'}]
  61             },{
  62                 xtype:'splitbutton',
  63                 text: 'Cut',
  64                 iconCls: 'add16',
  65                 menu: [{text: 'Cut Menu Item'}]
  66             },{
  67                 text: 'Copy',
  68                 iconCls: 'add16'
  69             },{
  70                 text: 'Paste',
  71                 iconCls: 'add16',
  72                 menu: [{text: 'Paste Menu Item'}]
  73             },{
  74                 text: 'Format',
  75                 iconCls: 'add16'
  76             }]
  77         },{
  78             xtype: 'buttongroup',
  79             title: 'Other Bogus Actions',
  80             columns: 2,
  81             defaults: {
  82                 scale: 'small'
  83             },
  84             items: [{
  85                 xtype:'splitbutton',
  86                 text: 'Menu Button',
  87                 iconCls: 'add16',
  88                 menu: [{text: 'Menu Button 1'}]
  89             },{
  90                 xtype:'splitbutton',
  91                 text: 'Cut',
  92                 iconCls: 'add16',
  93                 menu: [{text: 'Cut Menu Item'}]
  94             },{
  95                 text: 'Copy',
  96                 iconCls: 'add16'
  97             },{
  98                 text: 'Paste',
  99                 iconCls: 'add16',
 100                 menu: [{text: 'Paste Menu Item'}]
 101             },{
 102                 text: 'Format',
 103                 iconCls: 'add16'
 104             }]
 105         }]
 106     });
 107
 108     new SamplePanel({
 109         title: 'Multi columns (No titles, double stack)',
 110         tbar: [{
 111             xtype: 'buttongroup',
 112             columns: 3,
 113             defaults: {
 114                 scale: 'small'
 115             },
 116             items: [{
 117                 xtype:'splitbutton',
 118                 text: 'Menu Button',
 119                 iconCls: 'add16',
 120                 menu: [{text: 'Menu Item 1'}]
 121             },{
 122                 xtype:'splitbutton',
 123                 text: 'Cut',
 124                 iconCls: 'add16',
 125                 menu: [{text: 'Cut Menu Item'}]
 126             },{
 127                 text: 'Copy',
 128                 iconCls: 'add16'
 129             },{
 130                 text: 'Paste',
 131                 iconCls: 'add16',
 132                 menu: [{text: 'Paste Menu Item'}]
 133             },{
 134                 text: 'Format',
 135                 iconCls: 'add16'
 136             }]
 137         },{
 138             xtype: 'buttongroup',
 139             columns: 3,
 140             defaults: {
 141                 scale: 'small'
 142             },
 143             items: [{
 144                 xtype:'splitbutton',
 145                 text: 'Menu Button',
 146                 iconCls: 'add16',
 147                 menu: [{text: 'Menu Item 1'}]
 148             },{
 149                 xtype:'splitbutton',
 150                 text: 'Cut',
 151                 iconCls: 'add16',
 152                 menu: [{text: 'Cut Menu Item'}]
 153             },{
 154                 text: 'Copy',
 155                 iconCls: 'add16'
 156             },{
 157                 text: 'Paste',
 158                 iconCls: 'add16',
 159                 menu: [{text: 'Paste Menu Item'}]
 160             },{
 161                 text: 'Format',
 162                 iconCls: 'add16'
 163             }]
 164         }]
 165     });
 166
 167     new SamplePanel({
 168         title: 'Mix and match icon sizes to create a huge unusable toolbar',
 169         tbar: [{
 170             xtype: 'buttongroup',
 171             columns: 3,
 172             title: 'Clipboard',
 173             items: [{
 174                 text: 'Paste',
 175                 scale: 'large',
 176                 rowspan: 3, iconCls: 'add',
 177                 iconAlign: 'top',
 178                 cls: 'x-btn-as-arrow'
 179             },{
 180                 xtype:'splitbutton',
 181                 text: 'Menu Button',
 182                 scale: 'large',
 183                 rowspan: 3,
 184                 iconCls: 'add',
 185                 iconAlign: 'top',
 186                 arrowAlign:'bottom',
 187                 menu: [{text: 'Menu Item 1'}]
 188             },{
 189                 xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
 190             },{
 191                 text: 'Copy', iconCls: 'add16'
 192             },{
 193                 text: 'Format', iconCls: 'add16'
 194             }]
 195         },{
 196             xtype: 'buttongroup',
 197             columns: 3,
 198             title: 'Other Actions',
 199             items: [{
 200                 text: 'Paste',
 201                 scale: 'large',
 202                 rowspan: 3, iconCls: 'add',
 203                 iconAlign: 'top',
 204                 cls: 'x-btn-as-arrow'
 205             },{
 206                 xtype:'splitbutton',
 207                 text: 'Menu Button',
 208                 scale: 'large',
 209                 rowspan: 3,
 210                 iconCls: 'add',
 211                 iconAlign: 'top',
 212                 arrowAlign:'bottom',
 213                 menu: [{text: 'Menu Button 1'}]
 214             },{
 215                 xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
 216             },{
 217                 text: 'Copy', iconCls: 'add16'
 218             },{
 219                 text: 'Format', iconCls: 'add16'
 220             }]
 221         }]
 222     });
 223
 224     new SamplePanel({
 225         title: 'Medium icons, arrows to the bottom',
 226         tbar: [{
 227             xtype: 'buttongroup',
 228             title: 'Clipboard',
 229             defaults: {
 230                 scale: 'medium',
 231                 iconAlign:'top'
 232             },
 233             items: [{
 234                 xtype:'splitbutton',
 235                 text: 'Menu Button',
 236                 iconCls: 'add24',
 237                 arrowAlign:'bottom',
 238                 menu: [{text: 'Menu Item 1'}]
 239             },{
 240                 xtype:'splitbutton',
 241                 text: 'Cut',
 242                 iconCls: 'add24',
 243                 arrowAlign:'bottom',
 244                 menu: [{text: 'Cut Menu Item'}]
 245             },{
 246                 text: 'Copy',
 247                 iconCls: 'add24',
 248                 cls: 'x-btn-as-arrow'
 249             },{
 250                 text: 'Paste',
 251                 iconCls: 'add24',
 252                 arrowAlign:'bottom',
 253                 menu: [{text: 'Paste Menu Item'}]
 254             },{
 255                 text: 'Format<br/>Stuff',
 256                 iconCls: 'add24'
 257             }]
 258         },{
 259             xtype: 'buttongroup',
 260             title: 'Other Bogus Actions',
 261             defaults: {
 262                 scale: 'medium',
 263                 iconAlign:'top'
 264             },
 265             items: [{
 266                 xtype:'splitbutton',
 267                 text: 'Menu Button',
 268                 iconCls: 'add24',
 269                 arrowAlign:'bottom',
 270                 menu: [{text: 'Menu Item 1'}]
 271             },{
 272                 xtype:'splitbutton',
 273                 text: 'Cut',
 274                 iconCls: 'add24',
 275                 arrowAlign:'bottom',
 276                 menu: [{text: 'Cut Menu Item'}]
 277             },{
 278                 text: 'Copy',
 279                 iconCls: 'add24',
 280                 cls: 'x-btn-as-arrow'
 281             },{
 282                 text: 'Paste',
 283                 iconCls: 'add24',
 284                 arrowAlign:'bottom',
 285                 menu: [{text: 'Paste Menu Item'}]
 286             },{
 287                 text: 'Format',
 288                 iconCls: 'add24',
 289                 cls: 'x-btn-as-arrow'
 290             }]
 291         }]
 292     });
 293
 294
 295     new SamplePanel({
 296         title: 'Medium icons, text and arrows to the left',
 297         tbar: [{
 298             xtype:'buttongroup',
 299             items: [{
 300                 text: 'Cut',
 301                 iconCls: 'add24',
 302                 scale: 'medium'
 303             },{
 304                 text: 'Copy',
 305                 iconCls: 'add24',
 306                 scale: 'medium'
 307             },{
 308                 text: 'Paste',
 309                 iconCls: 'add24',
 310                 scale: 'medium',
 311                 menu: [{text: 'Paste Menu Item'}]
 312             }]
 313         }, {
 314             xtype:'buttongroup',
 315             items: [{
 316                 text: 'Format',
 317                 iconCls: 'add24',
 318                 scale: 'medium'
 319             }]
 320         }]
 321     });
 322
 323     new SamplePanel({
 324         title: 'Small icons, text and arrows to the left',
 325         tbar: [{
 326             xtype:'buttongroup',
 327             items: [{
 328                 text: 'Cut',
 329                 iconCls: 'add16',
 330                 scale: 'small'
 331             },{
 332                 text: 'Copy',
 333                 iconCls: 'add16',
 334                 scale: 'small'
 335             },{
 336                 text: 'Paste',
 337                 iconCls: 'add16',
 338                 scale: 'small',
 339                 menu: [{text: 'Paste Menu Item'}]
 340             }]
 341         }, {
 342             xtype:'buttongroup',
 343             items: [{
 344                 text: 'Format',
 345                 iconCls: 'add16',
 346                 scale: 'small'
 347             }]
 348         }]
 349     });
 350 });