EXTJS4扩展实例:一个调用Ext.picker.Color的颜色选择菜单
2014-02-26 09:47
651 查看
运行环境:Extjs4.2.1
运行效果:
![](http://images.cnitblog.com/blog/337289/201402/260944376998278.png)
调用代码:
源代码:
运行效果:
![](http://images.cnitblog.com/blog/337289/201402/260944376998278.png)
调用代码:
Ext.require(['MyExtend.Form.Field.ColorField']); Ext.onReady(function() { var combo = Ext.create('MyExtend.Form.Field.ColorField', { renderTo: Ext.getBody() });
源代码:
Ext.define('MyExtend.Form.Field.ColorField', { extend: 'Ext.form.field.Trigger', alias: 'widget.colorfield', triggerTip: '请选择一个颜色', onTriggerClick: function() { var me = this; if (!me.picker) { me.picker = Ext.create('Ext.picker.Color', { pickerField: this, ownerCt: this, renderTo: Ext.getBody(), floating: true, //hidden: true, focusOnShow: true, style: { backgroundColor: "#fff" }, listeners: { scope: this, select: function(field, value, opts) { me.setValue('#' + value); me.inputEl.applyStyles({ backgroundColor: '#' + value }); me.picker.hide(); } } }); me.picker.alignTo(me.inputEl, 'tl-bl?'); } me.picker.show(); var attached = me.attached || false; me.lastShow = new Date(); if (!attached) { Ext.getDoc().on('mousedown', me.onMouseDown, me, { buffer: Ext.isIE9m ? 10 : undefined }); me.attached = true; } }, onMouseDown: function(e) { var lastShow = this.lastShow, doHide = true; if (Ext.Date.getElapsed(lastShow) > 50 && !e.getTarget('#' + this.picker.id)) { if (Ext.isIE9m && !Ext.getDoc().contains(e.target)) { doHide = false; } if (doHide) { this.picker.hide(); Ext.getDoc().un('mousedown', this.onMouseDown, this); this.attached = false; } } } });
相关文章推荐
- Js获取下拉框选定项的值和文本的实现代码
- js自动查找select下拉的菜单并选择(示例代码)
- EXTJS 4:在renderer中如何控制一个CheckColumn的行为,如显示,只读等属性
- javascript 获取form表单中radio选中值
- js dorado 返回path
- JsonHelper 帮助类
- 原生js--异步请求
- window.location.href的用法
- js 赋值 包含 单引号 双引号 解决方法
- JSON资料整理
- 如何判断Javascript对象是否存在
- xml,json,txt
- xml 与json 的比较
- JSON资料整理
- js(JavaScript)实现TAB标签切换效果的简单实例
- js自动查找select下拉的菜单并选择(示例代码)
- Js获取下拉框选定项的值和文本的实现代码
- JS获取文本框,下拉框,单选框的值的简单实例
- js获取当前地址 JS获取当前URL的示例代码
- JS获取几种URL地址的方法小结