Ext.slider控件的用法

<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>

//横向，初始值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);


}


})


});

<h1>操作滚轴控件</h1>


<div class="content">


<button id="button1">设置滚轴1的值为10</button>


<button id="button2">获取滚轴1的值</button>


<button id="button3">设置滚轴3的值为10,15</button>


<button id="button4">获取滚轴3的值集合</button>


</div>

//设置滚轴1的值为10


Ext.fly("button1").on('click', function () {


slider1.setValue(10);


});




//获取滚轴1的值


Ext.fly("button2").on('click', function () {


Ext.MessageBox.alert("获取值", "滚轴1的值：" + slider1.getValue());


});




//设置滚轴3的值为10,15


Ext.fly("button3").on('click', function () {


slider3.setValue(0, 10);


slider3.setValue(1, 15);


});




//获取滚轴3的值集合


Ext.fly("button4").on('click', function () {


Ext.MessageBox.alert("获取值", "滚轴3的值集合：" + slider3.getValues());


});

//横向，初始值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);


}


})


});