Ext slider 组

wuzijingaip

浏览: 329728 次
性别:
来自: 广州

最近访客更多访客>>

jerry_shen

xsjwan

wmyydyzyq

lijun1191997

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

EXT J#



<div id="param-set-win" class="x-hidden">
    <div class="x-window-header"></div>
    <div id="param-tabs">
        <!-- Auto create tab 1 -->
        <div class="x-tab" title="Parame1">
			<div id="slid_group1" name = "slid_group1" class="my_slidergroup1">
				<table>
					<tr>
						<td>Black:</td><td><div id="black" class="my_slider" max="255" def="40" min="0" width="255" onclick="alert(getSlider('black').value);" onmouseup="alert(getSlider('black').value);"></div></td>
					</tr>
					<tr>
						<td>Red:</td><td><div id="red"  class="my_slider" max="1000" def="890"  min="0" width="255" onclick="alert(getSlider('red').value);" onchange="alert(getSlider('red').value);"></div></td>
					</tr>
					<tr>
						<td>Green:</td><td><div id="green" c class="my_slider" max="255" def="10"  min="0" width="255"></div></td>
					</tr>
					<tr>
						<td>Blue:</td><td><div id="blue"  class="my_slider" max="100" def="40"  min="0" width="255"></div></td>
					</tr>
					<tr>
						<td>testadd:</td><td id="testadd">&nbsp;</td>
					</tr>
				</table>
				
			</div>
			<div id="custom-tip-slider"></div>
        </div>
        <div class="x-tab" title="Parame2">
        <div id="slid_group1" name = "slid_group1" class="my_slidergroup1">
           <table>
					<tr>
						<td>Black:</td><td><div id="black1" class="my_slider" max="255" def="40" min="0" width="255" onclick="alert(getSlider('black1').value);" onmouseup="alert(getSlider('black1').value);"></div></td>
					</tr>
					<tr>
						<td>Red:</td><td><div id="red1"  class="my_slider" max="1000" def="890"  min="0" width="255" onclick="alert(getSlider('red1').value);" onchange="alert(getSlider('red1').value);"></div></td>
					</tr>
					<tr>
						<td>Green:</td><td><div id="green1" c class="my_slider" max="255" def="10"  min="0" width="255"></div></td>
					</tr>
					<tr>
						<td>Blue:</td><td><div id="blue1"  class="my_slider" max="100" def="40"  min="0" width="255"></div></td>
					</tr>
					<tr>
						<td>testadd:</td><td id="testadd1">&nbsp;</td>
					</tr>
				</table>
				</div>
        </div>
        <div class="x-tab" title="Parame3">
        <div id="slid_group1" name = "slid_group1" class="my_slidergroup1">
        	<table>
					<tr>
						<td>Black:</td><td><div id="black2" class="my_slider" max="255" def="40" min="0" width="255" onclick="alert(getSlider('black2').value);" onmouseup="alert(getSlider('black2').value);"></div></td>
					</tr>
					<tr>
						<td>Red:</td><td><div id="red2"  class="my_slider" max="1000" def="890"  min="0" width="255" onclick="alert(getSlider('red2').value);" onchange="alert(getSlider('red2').value);"></div></td>
					</tr>
					<tr>
						<td>Green:</td><td><div id="green2" c class="my_slider" max="255" def="10"  min="0" width="255"></div></td>
					</tr>
					<tr>
						<td>Blue:</td><td><div id="blue2"  class="my_slider" max="100" def="40"  min="0" width="255"></div></td>
					</tr>
					<tr>
						<td>testadd:</td><td id="testadd2">&nbsp;</td>
					</tr>
				</table>
				</div>
        </div>
    </div>
</div>
   


	<input type="button" value="testadd" onclick="testadd()">
	<script type="text/javascript">
		function testadd(){
			var test = document.getElementById('testadd');
			var test1 = document.getElementById('testadd1');
			var test2 = document.getElementById('testadd2');
			
			test.innerHTML = '<div id="abc"  class="my_slider" max="100" def="40"  min="0" width="255" onclick="alert(getSlider(\'abc\').value);" ></div>';
			test1.innerHTML = '<div id="abcd"  class="my_slider" max="100" def="40"  min="0" width="255" onclick="alert(getSlider(\'abcd\').value);" ></div>';
			test2.innerHTML = '<div id="abcde"  class="my_slider" max="100" def="40"  min="0" width="255" onclick="alert(getSlider(\'abcde\').value);" ></div>';
					
			my_sliderGroups('my_slidergroup1','my_slider');
		}
	</script>

/*
 * MAP对象，实现MAP功能 written by danny zhou, 2005-04-15
 * 
 * 接口： size() 获取MAP元素个数 isEmpty() 判断MAP是否为空 clear() 删除MAP所有元素 put(key, value)
 * 向MAP中增加元素（key, value) remove(key) 删除指定KEY的元素，成功返回True，失败返回False get(key)
 * 获取指定KEY的元素值VALUE，失败返回NULL element(index)
 * 获取指定索引的元素（使用element.key，element.value获取KEY和VALUE），失败返回NULL containsKey(key)
 * 判断MAP中是否含有指定KEY的元素 containsValue(value) 判断MAP中是否含有指定VALUE的元素 values()
 * 获取MAP中所有VALUE的数组（ARRAY） keys() 获取MAP中所有KEY的数组（ARRAY）
 * 
 * 例子： var map = new Map();
 * 
 * map.put("key", "value"); var val = map.get("key") ……
 * 
 */
function Map() {
	this.elements = new Array();

	// 获取MAP元素个数
	this.size = function() {
		return this.elements.length;
	}

	// 判断MAP是否为空
	this.isEmpty = function() {
		return (this.elements.length < 1);
	}

	// 删除MAP所有元素
	this.clear = function() {
		this.elements = new Array();
	}

	// 向MAP中增加元素（key, value)
	this.put = function(_key, _value) {
		this.elements.push({
					key : _key,
					value : _value
				});
	}
	
	//增加元素并覆盖
	this.putOverride = function(_key,_value){
		this.remove(_key);
		this.put(_key,_value);
	}

	// 删除指定KEY的元素，成功返回True，失败返回False
	this.remove = function(_key) {
		var bln = false;
		try {
			for (i = 0; i < this.elements.length; i++) {
				if (this.elements[i].key == _key) {
					this.elements.splice(i, 1);
					return true;
				}
			}
		} catch (e) {
			bln = false;
		}
		return bln;
	}

	// 获取指定KEY的元素值VALUE，失败返回NULL
	this.get = function(_key) {
		try {
			for (i = 0; i < this.elements.length; i++) {
				if (this.elements[i].key == _key) {
					return this.elements[i].value;
				}
			}
		} catch (e) {
			return null;
		}
	}

	// 获取指定索引的元素（使用element.key，element.value获取KEY和VALUE），失败返回NULL
	this.element = function(_index) {
		if (_index < 0 || _index >= this.elements.length) {
			return null;
		}
		return this.elements[_index];
	}

	// 判断MAP中是否含有指定KEY的元素
	this.containsKey = function(_key) {
		var bln = false;
		try {
			for (i = 0; i < this.elements.length; i++) {
				if (this.elements[i].key == _key) {
					bln = true;
				}
			}
		} catch (e) {
			bln = false;
		}
		return bln;
	}

	// 判断MAP中是否含有指定VALUE的元素
	this.containsValue = function(_value) {
		var bln = false;
		try {
			for (i = 0; i < this.elements.length; i++) {
				if (this.elements[i].value == _value) {
					bln = true;
				}
			}
		} catch (e) {
			bln = false;
		}
		return bln;
	}

	// 获取MAP中所有VALUE的数组（ARRAY）
	this.values = function() {
		var arr = new Array();
		for (i = 0; i < this.elements.length; i++) {
			arr.push(this.elements[i].value);
		}
		return arr;
	}

	// 获取MAP中所有KEY的数组（ARRAY）
	this.keys = function() {
		var arr = new Array();
		for (i = 0; i < this.elements.length; i++) {
			arr.push(this.elements[i].key);
		}
		return arr;
	}
}

function NumberArray(){
	
	this.elements = new Array();
	this.addandReturnMax = function(num){
		this.add(num);
		this.sort();
		return this.max();
	}
	this.add = function(num){
		num = num.replace(/\D/g,'');
		this.elements.push(num);
	}
	this.sort = function(){
		this.elements = this.bubbleSort();
		return this.elements;
	}
	this.max = function(){
		return this.elements.slice(0,1);
	}
	this.min = function(){
		return this.elements.slice(-1,0);
	}
	
	this.bubbleSort = function() {
		var arr = this.elements;
		// 外层循环，共要进行arr.length次求最大值操作
		for (var i = 0; i < arr.length; i++) {
			// 内层循环，找到第i大的元素，并将其和第i个元素交换
			for (var j = i; j < arr.length; j++) {
				if (parseInt(arr[i]) < parseInt(arr[j])) {
					// 交换两个元素的位置
					var temp = arr[i];
					arr[i] = arr[j];
					arr[j] = temp;
				}
			}
		}
		return arr;
	} 
	this.clear = function(){
		this.elements = new Array();
	}
}


/*
 * Ext JS Library 3.0 Pre-alpha
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */


/**
 * @class Ext.ux.SliderTip
 * @extends Ext.Tip
 * Simple plugin for using an Ext.Tip with a slider to show the slider value
 */
Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
    minWidth: 10,
    offsets : [0, -10],
    init : function(slider){
        slider.on('dragstart', this.onSlide, this);
        slider.on('drag', this.onSlide, this);
        slider.on('dragend', this.hide, this);
        slider.on('destroy', this.destroy, this);
    },

    onSlide : function(slider){
        this.show();
        this.body.update(this.getText(slider));
        this.doAutoWidth();
        this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
    },

    getText : function(slider){
        return slider.getValue();
    }
});
var my_sliderGroups ;
var allSliderArr = new Array();
Ext.onReady(function(){
	
    var tip = new Ext.ux.SliderTip({
        getText: function(slider){
            return String.format('<b>{0}% complete</b>', slider.getValue());
        }
    });
    
//    var slider = new Ext.Slider({
//        renderTo: 'custom-tip-slider',
//        width: 214,
//        increment: 10,
//        minValue: 0,
//        maxValue: 100,
//        plugins: tip
//    });
    
    
    my_sliderGroups = function(groupclassname,itemclassname){
    	clearSliders();
    	var sliders = Ext.query("*[class="+groupclassname+"] *[class="+itemclassname+"]");
    	
    	for(var i=0;i<sliders.length;i++){
//    		alert("slider_"+sliders[i].id +  "  "+ sliders[i].def);
    		var item = new Ext.Slider({
//    			id: sliders[i].id,
    			id: "slider_"+sliders[i].id,
		        renderTo: sliders[i].id,
		        width: sliders[i].width,
		        minValue: sliders[i].min,
		        maxValue: sliders[i].max,
		        value:sliders[i].def,
		        plugins: new Ext.ux.SliderTip()
		    })
		    item.on({
		    		
		    	'dragend':function(){
//		    			alert( this.getValue() );
		    		}
		    	,'change':function(slider, newValue, oldValue){
//		    			alert(this.getValue());
//		    		 	alert(this.maxValue+"=="+this.value +"---"+this.minValue+"===" + this.getId() + " newValue:" + newValue + " oldValue:" + oldValue);   
		    		 	var params = new Array();
//			    		params.push(this.minValue);
//			    		params.push();
//			    		params.push(this.maxValue);
			    		
			    		var ls_p = new _param();
			    		ls_p.setMin(this.minValue);
			    		ls_p.setMax(this.maxValue);
			    		ls_p.setValue(this.value);
			    		
			    		params.push(ls_p);
			    		
			    		paramValues.putOverride(this.getId(),params);
//			    		alert(paramValues.get(this.getId())[0].value);
		    		}
		    });
//		    item.destroy() ;
		    allSliderArr.push(item);
    	}
//    	var grup = Ext.get(groupid).dom;
//    	for(var i=0;i<grup.children.length;i++){
//    		var itemslider = new Ext.Slider({
//		        renderTo: grup.children[i].id,
//		        width: 214,
//		        minValue: 0,
//		        maxValue: 100,
//		        plugins: new Ext.ux.SliderTip()
//		    });
//    	}
    }
    var my_slideAllByClass = function(classname){
    	var sliders = Ext.query("*[class="+classname+"]");
    	for(var i=0;i<sliders.length;i++){
    		var itemslider = new Ext.Slider({
		        renderTo: sliders[i].id,
		        width: sliders[i].width,
		        minValue: sliders[i].min,
		        maxValue: sliders[i].max,
		        value:sliders[i].def,
		        plugins: new Ext.ux.SliderTip()
		    });
    	}
    }
    
	my_sliderGroups('my_slidergroup1','my_slider');
//	my_slideAllByClass('my_slider');
    ////////////////////////base window//////////////////////////
    
    var win;
    var button = Ext.get('show-param-btn');
 // Panel for the west
    var panel = new Ext.Panel({
                    el: 'param-tabs',
        region: 'west',
        split: true,
        width: 500,
        height:280,
        collapsible: true,
        margins:'3 0 3 3',
        cmargins:'3 3 3 3'
    });
    var tabs = new Ext.TabPanel({
                    el: 'param-tabs',
                    autoTabs:true,
                    activeTab:0,
                    deferredRender:false,
                    border:false
                });
    button.on('click', function(){
        // create the window on the first click and reuse on subsequent clicks
        if(!win){
            win = new Ext.Window({
                el:'param-set-win',
                layout:'fit',
                width:500,
                height:385,
                closeAction:'hide',
                plain: true,
                
                items: [tabs],
                buttons: [
                {
                    text:getTextByInput('button_add'),
                    handler: function(){
						alert(getSlider('green') .value );
                        //alert(my_GetGridValue(grid,2,2,'id'));
                    }
                },
                {
                    text:getTextByInput('button_edit'),
                    handler: function(){
						addOrEdit = 'add';
                    	my_editMatrix(grid);
                        //alert(my_GetGridValue(grid,2,2,'id'));
                    }
                },
                {
                    text:getTextByInput('button_delete'),
                    handler: function(){
                    	my_deleteMatrix(grid);
                        //alert(my_GetGridValue(grid,2,2,'id'));
                    }
                },{
                    text: getTextByInput('button_close'),
                    handler: function(){
                        win.hide();
                    }
                }]
            });
        }
        win.show(this);
    });

});


function setDisabled(id,type){
	var obj = document.getElementById(id);
	if(type == 'auto'){
		if(obj.disabled == true){
			obj.disabled = false;
		}else{
			obj.disabled = true;
		}
	}else{
		obj.disabled = type;
	}
}

function getTextByInput(id){
	return Ext.get(id).dom.value;
}


function addSelectItem(obj,value,text){
	var opt = new Option(text,value);
	obj.add(opt);
}

function hideWin(w){
	if( w){
		w.hide();
	}
	
}

var paramValues = new Map();

var _param = function(){
	var value;
	var min;
	var max;
	
	this.setValue = function(v){
		this.value = v;
	}
	this.setMin = function(m){
		this.min = m;
	}
	this.setMax = function(m){
		this.max = m;
	}
}
var getSlider = function(id){
	return paramValues.get("slider_" + id)[0];
}
var clearSliders = function(){
	for(var i=0;i<allSliderArr.length;i++){
		allSliderArr[i].destroy()  ;
	}
	allSliderArr = new Array();
}

分享到：