examples/button/button.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('Ext.button.*');
  16 Ext.onReady(function() {
  17     var genericConfig = [{
  18             _name: 'Text Only'
  19         },{
  20             _name   : 'Disabled',
  21             disabled: true
  22         },{
  23             _name  : 'Icon Only',
  24             text   : null,
  25             iconCls: 'add'
  26         },{
  27             _name  : 'Icon and Text (left)',
  28             iconCls: 'add',
  29             iconAlign: 'left'
  30         },{
  31             _name  : 'Icon and Text (top)',
  32             iconCls: 'add',
  33             iconAlign: 'top'
  34         },{
  35             _name  : 'Icon and Text (right)',
  36             iconCls: 'add',
  37             iconAlign: 'right'
  38         },{
  39             _name  : 'Icon and Text (bottom)',
  40             iconCls: 'add',
  41             iconAlign: 'bottom'
  42         }],
  43         menu = {
  44             items: [{
  45                     text:'Menu Item 1'
  46                 },{
  47                     text:'Menu Item 2'
  48                 },{
  49                     text:'Menu Item 3'
  50             }]
  51         };
  52
  53     function renderButtons(title, configs, defaultConfig) {
  54         Ext.getBody().createChild({
  55             tag : 'h2',
  56             html: title
  57         });
  58
  59         Ext.each(configs, function(config) {
  60             var generateButtons = function(config) {
  61                 //Ext.each(['gray', 'darkgray', 'blue', 'darkblue', 'red', 'green'], function(color) {
  62                 Ext.each(['default'], function(color) {
  63                     Ext.createWidget(defaultConfig.defaultType || 'button', Ext.apply({
  64                         text : 'Small',
  65                         scale: 'small',
  66                         color: color
  67                     }, config, defaultConfig));
  68
  69                     Ext.createWidget(defaultConfig.defaultType || 'button', Ext.apply({
  70                         text : 'Medium',
  71                         scale: 'medium',
  72                         color: color
  73                     }, config, defaultConfig));
  74
  75                     Ext.createWidget(defaultConfig.defaultType || 'button', Ext.apply({
  76                         text : 'Large',
  77                         scale: 'large',
  78                         color: color
  79                     }, config, defaultConfig));
  80                 }, this);
  81             };
  82
  83             Ext.getBody().createChild({
  84                 tag : 'h3',
  85                 html: config._name
  86             });
  87
  88             var el = Ext.getBody().createChild({});
  89
  90             if (config.children) {
  91                 Ext.each(config.children, function(child) {
  92                     el = el.createChild({
  93                         children: [
  94                             {
  95                                 tag : 'h4',
  96                                 html: child._name
  97                             }
  98                         ]
  99                     });
 100                 }, this);
 101             } else {
 102                 generateButtons(Ext.apply(config, {
 103                     renderTo: el
 104                 }));
 105             }
 106         }, this);
 107     }
 108
 109     renderButtons('Normal Buttons', genericConfig, {
 110         cls: 'floater'
 111     });
 112
 113     renderButtons('Toggle Buttons', genericConfig, {
 114         cls: 'floater',
 115         enableToggle: true
 116     });
 117
 118     renderButtons('Menu Buttons', genericConfig, {
 119         cls: 'floater',
 120         menu : menu
 121     });
 122
 123     renderButtons('Split Buttons', genericConfig, {
 124         cls: 'floater',
 125         defaultType: 'splitbutton',
 126         menu : menu
 127     });
 128
 129     renderButtons('Menu Buttons (Arrow on bottom)', genericConfig, {
 130         cls: 'floater',
 131         menu : menu,
 132         arrowAlign: 'bottom'
 133     });
 134
 135     renderButtons('Split Buttons (Arrow on bottom)', genericConfig, {
 136         cls: 'floater',
 137         defaultType: 'splitbutton',
 138         menu : menu,
 139         arrowAlign: 'bottom'
 140     });
 141 });