Extjs-Slider和GroupView的使用例子

posted by David Chen at May 26, 2008, 1:14 AM

在下面的截图中,当拖放Slider后,自动展开GridPanel中对应的group,

这里只列出Slider的js代码,不列出html和css的代码, 也不列出groupPanel的代码了
    new Ext.Slider({
        renderTo: 'custom-slider',
        frame: true,
        width: 340,
        increment: 1, // 增量值
        minValue: 0, // 最小值
        maxValue: 9, // 最大值
        onClickChange : function(local){
        // 必须重写它的onClickChange事件以监听点击改变值的情况
            if(local.top > this.clickRange[0] && local.top < this.clickRange[1]){
                this.setValue(Math.round(local.left/this.getRatio()));
            }
            // 这里是监听代码, for test
            alert(e);
        }
    });

    var prevGID = null; //用于记下展开的gid, 以收缩起来

    var s = function(slider) {
        try {
            var v = weekGrid.getView(); // gridPanel的id为'weekGrid', 这里是取得对应的groupView
            if( prevGID ) { //先收起一次展开的
                v.toggleGroup(prevGID, false); // 将prevGID对应的group收缩起来
            }
            var gid = v.getGroupId( (parseInt(slider.getValue()) + 1) + '' );
            // 通过分组的field取得该groupView中的组的 gid值, 记得这种情况是slider.getValue()) 是
               对应 groupView中按某个field分组的值
            if( gid ) {
                v.toggleGroup(gid, true); //展开该组
                prevGID = gid; // 记下当前展的 gid
            }
        } catch(e) {}
    }