Ext.slider控件的用法

    <h1>滚轴控件</h1>
    <li class="content">
        <h2>横向，初始值50</h2>
        <li id="slider1"></li>

        <h2>纵向，带提示</h2>
        <li id="slider2"></li>

         <h2>多值，自定义提示</h2>
        <li id="slider3"></li>
    </li>

		

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

		

    //设置滚轴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());
    });