examples/button/button.js

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