examples/toolbar/toolbars.js

   1 /*!
   2  * Ext JS Library 3.1.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7
   8 Ext.onReady(function(){
   9
  10     var SamplePanel = Ext.extend(Ext.Panel, {
  11         width: 500,
  12         height:250,
  13         style: 'margin-top:15px',
  14         bodyStyle: 'padding:10px',
  15         renderTo: 'docbody',
  16         html: Ext.example.shortBogusMarkup,
  17         autoScroll: true
  18     });
  19
  20     new SamplePanel({
  21         title: 'Standard',
  22         tbar: [{
  23             xtype:'splitbutton',
  24             text: 'Menu Button',
  25             iconCls: 'add16',
  26             menu: [{text: 'Menu Button 1'}]
  27         },'-',{
  28             xtype:'splitbutton',
  29             text: 'Cut',
  30             iconCls: 'add16',
  31             menu: [{text: 'Cut Menu Item'}]
  32         },{
  33             text: 'Copy',
  34             iconCls: 'add16'
  35         },{
  36             text: 'Paste',
  37             iconCls: 'add16',
  38             menu: [{text: 'Paste Menu Item'}]
  39         },'-',{
  40             text: 'Format',
  41             iconCls: 'add16'
  42         }]
  43     });
  44
  45     new SamplePanel({
  46         title: 'Multi columns',
  47         tbar: [{
  48             xtype: 'buttongroup',
  49             title: 'Clipboard',
  50             columns: 2,
  51             defaults: {
  52                 scale: 'small'
  53             },
  54             items: [{
  55                 xtype:'splitbutton',
  56                 text: 'Menu Button',
  57                 iconCls: 'add16',
  58                 menu: [{text: 'Menu Item 1'}]
  59             },{
  60                 xtype:'splitbutton',
  61                 text: 'Cut',
  62                 iconCls: 'add16',
  63                 menu: [{text: 'Cut Menu Item'}]
  64             },{
  65                 text: 'Copy',
  66                 iconCls: 'add16'
  67             },{
  68                 text: 'Paste',
  69                 iconCls: 'add16',
  70                 menu: [{text: 'Paste Menu Item'}]
  71             },{
  72                 text: 'Format',
  73                 iconCls: 'add16'
  74             }]
  75         },{
  76             xtype: 'buttongroup',
  77             title: 'Other Bugus Actions',
  78             columns: 2,
  79             defaults: {
  80                 scale: 'small'
  81             },
  82             items: [{
  83                 xtype:'splitbutton',
  84                 text: 'Menu Button',
  85                 iconCls: 'add16',
  86                 menu: [{text: 'Menu Button 1'}]
  87             },{
  88                 xtype:'splitbutton',
  89                 text: 'Cut',
  90                 iconCls: 'add16',
  91                 menu: [{text: 'Cut Menu Item'}]
  92             },{
  93                 text: 'Copy',
  94                 iconCls: 'add16'
  95             },{
  96                 text: 'Paste',
  97                 iconCls: 'add16',
  98                 menu: [{text: 'Paste Menu Item'}]
  99             },{
 100                 text: 'Format',
 101                 iconCls: 'add16'
 102             }]
 103         }]
 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
 351 });