examples/slider/slider-field.js

   1 /*!
   2  * Ext JS Library 3.2.2
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function(){
   8     var form = new Ext.form.FormPanel({
   9         width : 400,
  10         height: 160,
  11         title : 'Sound Settings',
  12
  13         bodyStyle  : 'padding: 10px;',
  14         renderTo   : 'container',
  15         defaultType: 'sliderfield',
  16         buttonAlign: 'left',
  17
  18         defaults: {
  19             anchor: '95%',
  20             tipText: function(thumb){
  21                 return String(thumb.value) + '%';
  22             }
  23         },
  24         items: [{
  25             fieldLabel: 'Sound Effects',
  26             value: 50,
  27             name: 'fx'
  28         },{
  29             fieldLabel: 'Ambient Sounds',
  30             value: 80,
  31             name: 'ambient'
  32         },{
  33             fieldLabel: 'Interface Sounds',
  34             value: 25,
  35             name: 'iface'
  36         }],
  37         fbar: {
  38             xtype: 'toolbar',
  39             items: [{
  40                 text: 'Max All',
  41                 handler: function(){
  42                     form.items.each(function(c){
  43                         c.setValue(100);
  44                     });
  45                 }
  46             }, '->', {
  47                 text: 'Save',
  48                 handler: function(){
  49                     var values = form.getForm().getValues(),
  50                         s = ['Sounds Effects: <b>{0}%</b>',
  51                             'Ambient Sounds: <b>{1}%</b>',
  52                             'Interface Sounds: <b>{2}%</b>'];
  53
  54                     Ext.example.msg('Settings Saved', s.join('<br />'), values.fx, values.ambient, values.iface);
  55                 }
  56             },{
  57                 text: 'Reset',
  58                 handler: function(){
  59                     form.getForm().reset();
  60                 }
  61             }]
  62         }
  63     });
  64 });