examples/slider/slider.js

   1 Ext.require('Ext.slider.*');
   2
   3 Ext.onReady(function(){
   4
   5     Ext.create('Ext.slider.Single', {
   6         renderTo: 'basic-slider',
   7         width: 214,
   8         minValue: 0,
   9         hideLabel: true,
  10         useTips: false,
  11         maxValue: 100
  12     });
  13
  14     Ext.create('Ext.slider.Single', {
  15         renderTo: 'increment-slider',
  16         hideLabel: true,
  17         useTips: false,
  18         width: 214,
  19         value:50,
  20         increment: 10,
  21         minValue: 0,
  22         maxValue: 100
  23     });
  24
  25     Ext.create('Ext.slider.Single', {
  26         renderTo: 'vertical-slider',
  27         hideLabel: true,
  28         useTips: false,
  29         height: 214,
  30         vertical: true,
  31         minValue: 0,
  32         maxValue: 100
  33     });
  34
  35     Ext.create('Ext.slider.Single', {
  36         renderTo: 'tip-slider',
  37         hideLabel: true,
  38         width: 214,
  39         minValue: 0,
  40         maxValue: 100
  41     });
  42
  43
  44
  45     Ext.create('Ext.slider.Single', {
  46         renderTo: 'custom-tip-slider',
  47         hideLabel: true,
  48         width: 214,
  49         increment: 10,
  50         minValue: 0,
  51         maxValue: 100,
  52         tipText: function(thumb){
  53             return Ext.String.format('<b>{0}% complete</b>', thumb.value);
  54         }
  55     });
  56
  57     Ext.create('Ext.slider.Single', {
  58         renderTo: 'custom-slider',
  59         hideLabel: true,
  60         width: 214,
  61         increment: 10,
  62         minValue: 0,
  63         maxValue: 100
  64     });
  65
  66     Ext.create('Ext.slider.Multi', {
  67         renderTo: 'multi-slider-horizontal',
  68         hideLabel: true,
  69         width: 214,
  70         minValue: 0,
  71         maxValue: 100,
  72         values: [10, 50, 90]
  73     });
  74
  75     Ext.create('Ext.slider.Multi', {
  76         renderTo: 'multi-slider-vertical',
  77         hideLabel: true,
  78         vertical: true,
  79         height: 214,
  80         minValue: 0,
  81         maxValue: 100,
  82         values: [10, 50, 90]
  83     });
  84 });