extjs/build/examples/kitchensink/classic/samples/view/form/SliderField.js

   1 /**
   2  * Shows how the Slider control can be used in a form and participate like a form field.
   3  */
   4 Ext.define('KitchenSink.view.form.SliderField', {
   5     extend: 'Ext.form.Panel',
   6
   7     requires: [
   8         'Ext.slider.Single'
   9     ],
  10     xtype: 'slider-field',
  11     //<example>
  12     exampleTitle: 'Slider field example',
  13     profiles: {
  14         classic: {
  15             labelWidth: 125
  16         },
  17         neptune: {
  18             labelWidth: 125
  19         },
  20         'neptune-touch': {
  21             labelWidth: 150
  22         }
  23     },
  24     //</example>
  25
  26     width: 400,
  27     title: 'Sound Settings',
  28     bodyPadding: 10,
  29
  30     initComponent: function(){
  31         this.msgTpl = new Ext.Template(
  32             'Sounds Effects: <b>{fx}%</b><br />',
  33             'Ambient Sounds: <b>{ambient}%</b><br />',
  34             'Interface Sounds: <b>{iface}%</b>'
  35         );
  36         Ext.apply(this, {
  37             defaults: {
  38                 labelWidth: this.profileInfo.labelWidth,
  39                 anchor: '95%',
  40                 tipText: function(thumb){
  41                     return String(thumb.value) + '%';
  42                 }
  43             },
  44             defaultType: 'slider',
  45             items: [{
  46                 fieldLabel: 'Sound Effects',
  47                 value: 50,
  48                 name: 'fx'
  49             },{
  50                 fieldLabel: 'Ambient Sounds',
  51                 value: 80,
  52                 name: 'ambient'
  53             },{
  54                 fieldLabel: 'Interface Sounds',
  55                 value: 25,
  56                 name: 'iface'
  57             }],
  58             bbar: [{
  59                 text: 'Max All',
  60                 scope: this,
  61                 handler: this.onMaxAllClick
  62             }, '->', {
  63                 text: 'Save',
  64                 scope: this,
  65                 handler: this.onSaveClick
  66             }, {
  67                 text: 'Reset',
  68                 scope: this,
  69                 handler: this.onResetClick
  70             }]
  71         });
  72         this.callParent();
  73     },
  74
  75     onMaxAllClick: function(){
  76         Ext.suspendLayouts();
  77         this.items.each(function(c){
  78             c.setValue(100);
  79         });
  80         Ext.resumeLayouts(true);
  81     },
  82
  83     onSaveClick: function(){
  84         Ext.Msg.alert({
  85             title: 'Settings Saved',
  86             msg: this.msgTpl.apply(this.getForm().getValues()),
  87             icon: Ext.Msg.INFO,
  88             buttons: Ext.Msg.OK
  89         });
  90     },
  91
  92     onResetClick: function(){
  93         this.getForm().reset();
  94     }
  95 });