docs/source/toolbars.html

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