滚轴控件 Ext.slider

1.滚轴控件的定义

下面我们定义三个具有代表意义滚轴控件，分别展示滚轴横向、纵向，以及单值、多值选择的特性：

[html]

?

1 2 3 4 5 6 7 8 9 10 11

< h1 >滚轴控件</ h1 > < div  class = "content" >      < h2 >横向，初始值50</ h2 >      < div  id = "slider1" ></ div >        < h2 >纵向，带提示</ h2 >      < div  id = "slider2" ></ div >         < h2 >多值，自定义提示</ h2 >      < div  id = "slider3" ></ div > </ div >

[Js]

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

//横向，初始值50 var slider1 = Ext.create( 'Ext.slider.Single' , {      renderTo: 'slider1' ,      width: 214,      minValue: 0,      maxValue: 100,      value: 50 });   //纵向，带提示 new  Ext.create( 'Ext.slider.Single' , {      renderTo: 'slider2' ,      height: 150,      minValue: 0,      maxValue: 20,      vertical: true ,      plugins: new  Ext.slider.Tip() });   //多值，自定义提示 var slider3 = Ext.create( 'Ext.slider.Multi' , {      renderTo: 'slider3' ,      width: 214,      minValue: 0,      maxValue: 20,      values: [5, 12],      plugins: new  Ext.slider.Tip({          getText: function (thumb) {              return  Ext.String.format( '当前：<b>{0}/20</b>' , thumb.value);          }      }) });

2.获取、设置滚轴控件的值

[html]

?

1 2 3 4 5 6 7

< h1 >操作滚轴控件</ h1 > < div  class = "content" > < button  id