extjs/build/examples/kitchensink/classic/samples/view/button/RightTextButtons.js

   1 /**
   2  * This example shows how to align button text to the right. By default, buttons are sized
   3  * to the width of the text inside them, but this behavior can be overridden by giving the
   4  * button a fixed width. In such a case the alignment of the text can be controlled using
   5  * the `textAlign` config.
   6  */
   7 Ext.define('KitchenSink.view.button.RightTextButtons', {
   8     extend: 'Ext.Container',
   9     xtype: 'right-text-buttons',
  10     layout: 'vbox',
  11
  12     initComponent: function() {
  13         Ext.apply(this, {
  14             width: 680,
  15             items: [{
  16                 xtype: 'checkbox',
  17                 boxLabel: 'disabled',
  18                 margin: '0 0 0 10',
  19                 listeners: {
  20                     change: this.toggleDisabled,
  21                     scope: this
  22                 }
  23             }, {
  24                 xtype: 'container',
  25                 layout: {
  26                     type: 'table',
  27                     columns: 4,
  28                     tdAttrs: { style: 'padding: 5px 10px;' }
  29                 },
  30                 defaults: {
  31                     width: 150,
  32                     textAlign: 'right'
  33                 },
  34
  35                 items: [{
  36                     xtype: 'component',
  37                     html: 'Text Only'
  38                 }, {
  39                     xtype: 'button',
  40                     text: 'Small'
  41                 }, {
  42                     xtype: 'button',
  43                     text: 'Medium',
  44                     scale: 'medium'
  45                 }, {
  46                     xtype: 'button',
  47                     text: 'Large',
  48                     scale: 'large'
  49                 }, {
  50                     xtype: 'component',
  51                     html: 'Icon Only'
  52                 }, {
  53                     iconCls: 'button-home-small',
  54                     xtype: 'button'
  55                 }, {
  56                     xtype: 'button',
  57                     iconCls: 'button-home-medium',
  58                     scale: 'medium'
  59                 }, {
  60                     xtype: 'button',
  61                     iconCls: 'button-home-large',
  62                     scale: 'large'
  63                 }, {
  64                     xtype: 'component',
  65                     html: 'Icon and Text (left)'
  66                 }, {
  67                     xtype: 'button',
  68                     iconCls: 'button-home-small',
  69                     text: 'Small'
  70                 }, {
  71                     xtype: 'button',
  72                     iconCls: 'button-home-medium',
  73                     text: 'Medium',
  74                     scale: 'medium'
  75                 }, {
  76                     xtype: 'button',
  77                     iconCls: 'button-home-large',
  78                     text: 'Large',
  79                     scale: 'large'
  80                 }, {
  81                     xtype: 'component',
  82                     html: 'Icon and Text (top)'
  83                 }, {
  84                     xtype: 'button',
  85                     iconCls: 'button-home-small',
  86                     text: 'Small',
  87                     iconAlign: 'top'
  88                 }, {
  89                     xtype: 'button',
  90                     iconCls: 'button-home-medium',
  91                     text: 'Medium',
  92                     scale: 'medium',
  93                     iconAlign: 'top'
  94                 }, {
  95                     xtype: 'button',
  96                     iconCls: 'button-home-large',
  97                     text: 'Large',
  98                     scale: 'large',
  99                     iconAlign: 'top'
 100                 }, {
 101                     xtype: 'component',
 102                     html: 'Icon and Text (right)'
 103                 }, {
 104                     xtype: 'button',
 105                     iconCls: 'button-home-small',
 106                     text: 'Small',
 107                     iconAlign: 'right'
 108                 }, {
 109                     xtype: 'button',
 110                     iconCls: 'button-home-medium',
 111                     text: 'Medium',
 112                     scale: 'medium',
 113                     iconAlign: 'right'
 114                 }, {
 115                     xtype: 'button',
 116                     iconCls: 'button-home-large',
 117                     text: 'Large',
 118                     scale: 'large',
 119                     iconAlign: 'right'
 120                 }, {
 121                     xtype: 'component',
 122                     html: 'Icon and Text (bottom)'
 123                 }, {
 124                     xtype: 'button',
 125                     iconCls: 'button-home-small',
 126                     text: 'Small',
 127                     iconAlign: 'bottom'
 128                 }, {
 129                     xtype: 'button',
 130                     iconCls: 'button-home-medium',
 131                     text: 'Medium',
 132                     scale: 'medium',
 133                     iconAlign: 'bottom'
 134                 }, {
 135                     xtype: 'button',
 136                     iconCls: 'button-home-large',
 137                     text: 'Large',
 138                     scale: 'large',
 139                     iconAlign: 'bottom'
 140                 }]
 141             }]
 142         });
 143         this.callParent();
 144     },
 145
 146     toggleDisabled: function(checkbox, newValue, oldValue) {
 147         var toggleFn = newValue ? 'disable' : 'enable';
 148
 149         Ext.each(this.query('button'), function(item) {
 150             item[toggleFn]();
 151         });
 152     }
 153
 154 });