examples/slider/slider-field.js

   1 Ext.require([
   2     'Ext.slider.*',
   3     'Ext.form.*',
   4     'Ext.window.MessageBox'
   5 ]);
   6
   7 Ext.onReady(function(){
   8     Ext.create('Ext.form.Panel', {
   9         width: 400,
  10         height: 160,
  11         title: 'Sound Settings',
  12         bodyPadding: 10,
  13         renderTo: 'container',
  14         defaultType: 'sliderfield',
  15         defaults: {
  16             anchor: '95%',
  17             tipText: function(thumb){
  18                 return String(thumb.value) + '%';
  19             }
  20         },
  21         items: [{
  22             fieldLabel: 'Sound Effects',
  23             value: 50,
  24             name: 'fx'
  25         },{
  26             fieldLabel: 'Ambient Sounds',
  27             value: 80,
  28             name: 'ambient'
  29         },{
  30             fieldLabel: 'Interface Sounds',
  31             value: 25,
  32             name: 'iface'
  33         }],
  34         dockedItems: {
  35             xtype: 'toolbar',
  36             dock: 'bottom',
  37             ui: 'footer',
  38             items: [{
  39                 text: 'Max All',
  40                 handler: function(){
  41                     this.up('form').items.each(function(c){
  42                         c.setValue(100);
  43                     });
  44                 }
  45             }, '->', {
  46                 text: 'Save',
  47                 handler: function(){
  48                     var values = this.up('form').getForm().getValues(),
  49                         s = ['Sounds Effects: <b>{0}%</b>',
  50                             'Ambient Sounds: <b>{1}%</b>',
  51                             'Interface Sounds: <b>{2}%</b>'];
  52
  53                     Ext.Msg.alert({
  54                         title: 'Settings Saved',
  55                         msg: Ext.String.format(s.join('<br />'), values.fx, values.ambient, values.iface),
  56                         icon: Ext.Msg.INFO,
  57                         buttons: Ext.Msg.OK
  58                     });
  59                 }
  60             },{
  61                 text: 'Reset',
  62                 handler: function(){
  63                     this.up('form').getForm().reset();
  64                 }
  65             }]
  66         }
  67     });
  68 });