Ext slider 组

最新推荐文章于 2018-08-09 11:41:00 发布
最新推荐文章于 2018-08-09 11:41:00 发布
阅读量91 收藏
点赞数
文章标签： EXT J#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuzijingaip/article/details/83522555
版权 



<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"> </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"> </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"> </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();
}
wuzijingaip
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
滚轴控件 Ext.slider
chenlaoyang的专栏
12-22 1367
1.滚轴控件的定义 下面我们定义三个具有代表意义滚轴控件，分别展示滚轴横向、纵向，以及单值、多值选择的特性： [html] ? 1 2 3 4 5 6 7 8 9 10 11 h1>滚轴控件h1> div class="content">     h2>横向，初始值
ext.js之xtype
09-15 634
可以直接用xtype（比如TextFiled对应的xtype是textfield）的对象形式来创建组件，比如在面板的items属性中，尤其是多个组件或需要写许多的extljs相关代码时就更值得推荐 两种形式写法如下： items[ new Ext.form.TextField({field...
ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件...
weixin_30703911的博客
12-19 129
《回到系列目录 本篇要登场的有三个控件，分别是滚轴控件、进度条控件和编辑控件。 一、滚轴控件 Ext.slider 1.滚轴控件的定义 下面我们定义三个具有代表意义滚轴控件，分别展示滚轴横向、纵向，以及单值、多值选择的特性： [html] <h1>滚轴控件</h1> <div class="content"> ...
Ext slider扩展以级范例代码----下载不扣分，回帖加1分，欢迎下载，童叟无欺
03-08
Ext slider扩展以级范例代码----下载不扣分，回帖加1分，欢迎下载，童叟无欺Ext slider扩展以级范例代码----下载不扣分，回帖加1分，欢迎下载，童叟无欺Ext slider扩展以级范例代码----下载不扣分，回帖加1分，欢迎下载，童叟无欺Ext slider扩展以级范例代码----下载不扣分，回帖加1分，欢迎下载，童叟无欺Ext slider扩展以级范例代码----下载不扣分，回帖加1分，欢迎下载，童叟无欺Ext slider扩展以级范例代码----下载不扣分，回帖加1分，欢迎下载，童叟无欺
Ext.Slider进度条使用
chenlaoyang的专栏
12-22 2182
var slider = new Ext.Slider({             renderTo: 'basic-slider', //进度条存放的标签（一般是div的id）             width: 270,//进度条长度             minValue: 1,             maxValue: 100,             clickToCha
EXT xtype
sailei666的专栏
03-04 87
基本组件： xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带下拉菜单的按钮 cycle Ext.CycleButton 带下拉选项菜单的按钮 buttongroup Ext.ButtonGroup 编组按钮(Since 3.0) slider Ext.Slider 滑动条 progress Ext.Pr...
ext xtype
didui0100的博客
08-09 54
基本组件： xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带下拉菜单的按钮 cycle Ext.CycleButton 带下拉选项菜单的按钮 buttongroup Ext.ButtonGroup 编组按钮(Since 3.0...
Ext Js详解指南
weixin_30685047的博客
02-17 1936
什么是Ext JS 走进Ext的世界 Ext JS是一款富客户端开发框架它基于javascript、HTML和CSS开发而成，无需安装任何插件即可在常用浏览器中创建出绚丽的页面效果。 个人总结Ext JS的方法 从Extjs的视图学起 例如：窗体、表单、数等等。并且可以掌握调试工具和技巧 学习使用API 学会怎么查询以及使用大牛提供的接口解决常见的问题（一般我们用到的效果，大牛们在做...
ImageSlider
10-10
整理的一些关于Android动画，有例如缩放，翻页，百叶窗等等
slider.zip
10-24
微信小程序slider自定义样式，这个样式不是真正控制在slider上的，而且用view层级覆盖来进行制作，是自己纯手工写的，不喜勿喷哦！
Slider.rar
06-12
C++ 使用滑块设置颜色值，改变RGB值选择绘值背景颜色. (C++ using the slider to set the color value, change the RGB values ​ ​ to select the background color of the plotted values.)
slider.rar
10-08
本人博客Qt开发技术(11)——输入控件中的滑块章节，具体请移步本人博客。内含Qt中的三种slider的使用。
ext3基本类说明（转）
nicelife19的专栏
12-30 120
http://www.iteye.com/topic/1021914 [code="java"] Object Ext.util.Observable：为EXT组件提供处理的最基本功能。 Ext.Component：提供了Ext组件共有的特性， 比如初始的流程、组件的配置选项应用、插件应用，组件渲染，组件公共的配置选项等，是一个抽象的东西。 Ext.BoxComponent：...
Ext 设计师预览
zhangxin09的专栏
12-19 4048
我们很高兴能分享我们的最新的Ext JS图形设计版本——设计师（Designer）。这个新版本增加了许多新功能，以提高您创建应用程序设计的效率。一旦你习惯使用这些性，那你就很难离开它了。对于那些没有时间或能力下载和试用设计器的朋友，我们特意创建了一个预览视频给大家观看。我们模拟了一些接口。我们尝试展示更多的特性和实用的功能。
数据库管理工具:dbeaver-ce-23.1.5-macos-aarch64.dmg
最新发布
06-16
1.DBeaver是一款通用数据库工具，专为开发人员和数据库管理员设计。 2.DBeaver支持多种数据库系统，包括但不限于MySQL、PostgreSQL、Oracle、DB2、MSSQL、Sybase、Mimer、HSQLDB、Derby、SQLite等，几乎涵盖了市场上所有的主流数据库。 3.支持的操作系统：包括Windows（2000/XP/2003/Vista/7/10/11）、Linux、Mac OS、Solaris、AIX、HPUX等。 4.主要特性： 数据库管理：支持数据库元数据浏览、元数据编辑（包括表、列、键、索引等）、SQL语句和脚本的执行、数据导入导出等。 用户界面：提供图形界面来查看数据库结构、执行SQL查询和脚本、浏览和导出数据，以及处理BLOB/CLOB数据等。用户界面设计简洁明了，易于使用。 高级功能：除了基本的数据库管理功能外，DBeaver还提供了一些高级功能，如数据库版本控制（可与Git、SVN等版本控制系统集成）、数据分析和可视化工具（如图表、统计信息和数据报告）、SQL代码自动补全等。
public Slider slider;
05-31
这行代码是一个变量声明，它声明了一个名为slider的Slider类型的变量。这意味着在TimerButtonWU.cs脚本中，你可以使用slider变量来引用一个Slider组件。 例如，你可以在脚本中编写以下代码来获取Slider组件，并将其...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值