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