extjs/build/examples/kitchensink/modern/src/view/Toolbars.js

   1 /**
   2  * Demonstrates several options available when using Toolbars
   3  */
   4 Ext.define('KitchenSink.view.Toolbars', {
   5     extend: 'Ext.Panel',
   6
   7     requires: [
   8         'Ext.SegmentedButton'
   9     ],
  10
  11     config: {
  12         cls: 'card',
  13         html: 'Toolbars automatically come with <code>light</code> and <code>dark</code> UIs, but you can also make your own with Sass.',
  14
  15         items: [
  16             {
  17                 xtype: 'toolbar',
  18                 docked: 'top',
  19                 scrollable: {
  20                     y: false,
  21                     indicators: false
  22                 },
  23                 items: [
  24                     {
  25                         text: 'Back',
  26                         ui: 'back',
  27                         hidden: (Ext.theme.name == "Blackberry") ? true : false
  28                     },
  29                     {
  30                         text: 'Default',
  31                         badgeText: '2',
  32                         hidden: (Ext.theme.name == "Blackberry") ? true : false
  33                     },
  34                     {
  35                         text: 'Round',
  36                         ui: 'round',
  37                         hidden: (Ext.theme.name == "Blackberry") ? true : false
  38                     },
  39                     {
  40                         xtype: 'spacer'
  41                     },
  42                     {
  43                         xtype: 'segmentedbutton',
  44                         allowDepress: true,
  45                         items: [
  46                             {
  47                                 text: 'Option 1',
  48                                 pressed: true
  49                             },
  50                             {
  51                                 text: 'Option 2'
  52                             },
  53                             {
  54                                 text: 'Option 3'
  55                             }
  56                         ]
  57                     },
  58                     {
  59                         xtype: 'spacer'
  60                     },
  61                     {
  62                         text: 'Action',
  63                         ui: 'action',
  64                         hidden: (Ext.theme.name == "Blackberry") ? true : false
  65                     },
  66                     {
  67                         text: 'Forward',
  68                         ui: 'forward',
  69                         hidden: (Ext.theme.name == "Blackberry") ? true : false
  70                     }
  71                 ]
  72             }
  73         ]
  74     },
  75
  76     // @private
  77     constructor: function() {
  78         this.on({
  79             scope: this,
  80             delegate: 'button',
  81
  82             tap: 'tapHandler'
  83         });
  84
  85         this.callParent(arguments);
  86     },
  87
  88     /**
  89      * Called when any button in these view is tapped
  90      */
  91     tapHandler: function(button) {
  92         this.setHtml("<span class=action>User tapped " + button.getText() + "</span>");
  93     }
  94 });