examples/button/buttons.js

   1 /*!
   2  * Ext JS Library 3.2.2
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function(){
   8
   9     // This function renders a block of buttons
  10     function renderButtons(title){
  11
  12         Ext.getBody().createChild({tag: 'h2', html: title});
  13
  14         new ButtonPanel(
  15             'Text Only',
  16             [{
  17                 text: 'Add User'
  18             },{
  19                 text: 'Add User',
  20                 scale: 'medium'
  21             },{
  22                 text: 'Add User',
  23                 scale: 'large'
  24             }]
  25         );
  26
  27         new ButtonPanel(
  28             'Icon Only',
  29             [{
  30                 iconCls: 'add16'
  31             },{
  32                 iconCls: 'add24',
  33                 scale: 'medium'
  34             },{
  35                 iconCls: 'add',
  36                 scale: 'large'
  37             }]
  38         );
  39
  40         new ButtonPanel(
  41             'Icon and Text (left)',
  42             [{
  43                 text: 'Add User',
  44                 iconCls: 'add16'
  45             },{
  46                 text: 'Add User',
  47                 iconCls: 'add24',
  48                 scale: 'medium'
  49             },{
  50                 text: 'Add User',
  51                 iconCls: 'add',
  52                 scale: 'large'
  53             }]
  54         );
  55
  56         new ButtonPanel(
  57             'Icon and Text (top)',
  58             [{
  59                 text: 'Add User',
  60                 iconCls: 'add16',
  61                 iconAlign: 'top'
  62             },{
  63                 text: 'Add User',
  64                 iconCls: 'add24',
  65                 scale: 'medium',
  66                 iconAlign: 'top'
  67             },{
  68                 text: 'Add User',
  69                 iconCls: 'add',
  70                 scale: 'large',
  71                 iconAlign: 'top'
  72             }]
  73         );
  74
  75         new ButtonPanel(
  76             'Icon and Text (right)',
  77             [{
  78                 text: 'Add User',
  79                 iconCls: 'add16',
  80                 iconAlign: 'right'
  81             },{
  82                 text: 'Add User',
  83                 iconCls: 'add24',
  84                 scale: 'medium',
  85                 iconAlign: 'right'
  86             },{
  87                 text: 'Add User',
  88                 iconCls: 'add',
  89                 scale: 'large',
  90                 iconAlign: 'right'
  91             }]
  92         );
  93
  94         new ButtonPanel(
  95             'Icon and Text (bottom)',
  96             [{
  97                 text: 'Add User',
  98                 iconCls: 'add16',
  99                 iconAlign: 'bottom'
 100             },{
 101                 text: 'Add User',
 102                 iconCls: 'add24',
 103                 scale: 'medium',
 104                 iconAlign: 'bottom'
 105             },{
 106                 text: 'Add User',
 107                 iconCls: 'add',
 108                 scale: 'large',
 109                 iconAlign: 'bottom'
 110             }]
 111         );
 112     }
 113
 114     renderButtons('Normal Buttons');
 115
 116     ButtonPanel.override({
 117         enableToggle: true
 118     });
 119
 120     renderButtons('Toggle Buttons');
 121
 122     ButtonPanel.override({
 123         enableToggle : undefined,
 124         menu : {items: [{text:'Menu Item 1'},{text:'Menu Item 2'},{text:'Menu Item 3'}]}
 125     });
 126
 127     renderButtons('Menu Buttons');
 128
 129     ButtonPanel.override({
 130         split: true,
 131         defaultType: 'splitbutton'
 132     });
 133
 134     renderButtons('Split Buttons');
 135
 136     ButtonPanel.override({
 137         split: false,
 138         defaultType: 'button',
 139         arrowAlign: 'bottom'
 140     });
 141
 142     renderButtons('Menu Buttons (Arrow on bottom)');
 143
 144     ButtonPanel.override({
 145         split: true,
 146         defaultType: 'splitbutton'
 147     });
 148
 149     renderButtons('Split Buttons (Arrow on bottom)');
 150 });
 151
 152 // Helper class for organizing the buttons
 153 ButtonPanel = Ext.extend(Ext.Panel, {
 154     layout:'table',
 155     defaultType: 'button',
 156     baseCls: 'x-plain',
 157     cls: 'btn-panel',
 158     renderTo : 'docbody',
 159     menu: undefined,
 160     split: false,
 161
 162     layoutConfig: {
 163         columns:3
 164     },
 165
 166     constructor: function(desc, buttons){
 167         // apply test configs
 168         for(var i = 0, b; b = buttons[i]; i++){
 169             b.menu = this.menu;
 170             b.enableToggle = this.enableToggle;
 171             b.split = this.split;
 172             b.arrowAlign = this.arrowAlign;
 173         }
 174         var items = [{
 175             xtype: 'box',
 176             autoEl: {tag: 'h3', html: desc, style:"padding:15px 0 3px;"},
 177             colspan: 3
 178         }].concat(buttons);
 179
 180         ButtonPanel.superclass.constructor.call(this, {
 181             items: items
 182         });
 183     }
 184 });