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