Extjs-Silder的使用

posted by David Chen at May 22, 2008, 8:55 AM    

Silder 是2.1出的,没有任何api说明,最好去 看看它的源码, 还是css和和BoxCompanet的实现.
我去看了example的例子,发现没法监听事件,也想改改样子,代码如下:

这是html代码
<h3>CSS Customized Slider</h3>
<style>
   .mydiv { width: 214px; text-align: center; }
   .mytable { border: 0px; height: 16px; overflow-y: hidden; width: 99%; }
   .mytable TD { width: 10%; height: 16px; font-size: 12px; }
</style>
<div class='mydiv'>
    <table class='mytable'>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
            </tr>
    <table>
    <div id="custom-slider"></div>
</div>

这是js代码, 
    new Ext.Slider({
        renderTo: 'custom-slider',
        width: 214, // 和上面定义的 html一样
        increment: 1,
        minValue: 0,
        maxValue: 9,
        plugins: new Ext.ux.SliderTip({
                        getText : function(slider){ // 用于 tip 的显示内容
                                //return slider.getValue();
                                return (parseInt(slider.getValue()) + 1) + '';
                        },
                        listeners: {
                                // 这里无用的，只有重写面的 init函数才行, 没法监听,
                                dragend: function(slider) { alert(1); }
                        }
                })
    });

    跟着要引用 examples/slider中的slider.js,重写 init函数
    init : function(slider){
        slider.on('dragstart', this.onSlide, this);
        slider.on('drag', this.onSlide, this);
        slider.on('dragend', function(slider) { alert(slider.getValue()) }, this); 
        // 取得值, 只有重写这个方法在拖放结束后取得最终的value
        slider.on('destroy', this.destroy, this);
    },