EXTJS4扩展实例:一个调用Ext.picker.Color的颜色选择菜单
运行环境:Extjs4.2.1
运行效果:
调用代码:
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;
}
}
}
});
EXTJS4扩展实例:一个调用Ext.picker.Color的颜色选择菜单的更多相关文章
- EXTJS4扩展实例:如何使用filter查询treepanel
我们在使用普通的store时,extjs提供了filterBy,filter等多种方法来过滤数据达到查询效果,但在treepanel中的streeStore却没有实现这个查询,于是,就有了这篇文章. ...
- [转载]ExtJs4 笔记(11) Ext.ListView、Ext.view.View 数据视图
本篇介绍两个用来展示数据的容器控件,分别是Ext.ListView和Ext.view.View.Ext.ListView就是大名鼎鼎的 Ext GridPanel的前身,不过现在的Ext4已经将它整合 ...
- ExtJs4 笔记(11) Ext.ListView、Ext.view.View 数据视图
本篇介绍两个用来展示数据的容器控件,分别是Ext.ListView和Ext.view.View.Ext.ListView就是大名鼎鼎的Ext GridPanel的前身,不过现在的Ext4已经将它整合到 ...
- 真实世界:使用WCF扩展记录服务调用时间
WCF 可扩展性 WCF 提供了许多扩展点供开发人员自定义运行时行为. WCF 在 Channel Layer 之上还提供了一个高级运行时,主要是针对应用程序开发人员.在 WCF 文档中,它常被称为服 ...
- ExtJs4 笔记(4) Ext.XTemplate 模板
ExtJs4 笔记(4) Ext.XTemplate 模板 摘自:http://www.cnblogs.com/lipan/ 本篇将涉及到ExtJs中一个重要的概念,模板.话说Razor很神奇,但是我 ...
- 使用WCF扩展记录服务调用时间
随笔- 64 文章- 0 评论- 549 真实世界:使用WCF扩展记录服务调用时间 WCF 可扩展性 WCF 提供了许多扩展点供开发人员自定义运行时行为. WCF 在 Channel Lay ...
- WCF扩展记录服务调用时间
WCF 提供了许多扩展点供开发人员自定义运行时行为. WCF 在 Channel Layer 之上还提供了一个高级运行时,主要是针对应用程序开发人员.在 WCF 文档中,它常被称为服务模型层(Serv ...
- 设计和编写一个异步通用Picker选择器,用于时间日期、城市、商品分类的选择
目录 一.功能规划 二.最底层基础实现 (1)Picker界面和功能实现 (2)不同类型的选择器基础实现 三.数据源层 (1)时间日期 (2)多级同步分类,如:城市 (3)多级异步分类,如:城市 四. ...
- [转]ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
随机推荐
- IIS7 windows 下安装PHP
首先要下载 php for windows 这个软件,百度一搜一大把. 1.我安装的是5.3.22版,就以这个为例给大家解说一下. 安装就是下一步,下一步,到一个选项 IIS FastCGI 选这个! ...
- 字符乱码 导致 ORA-12899: value too large
问题场景: 1.创建测试表 create table t01(name varchar2(30)) 2.插入数据 SQL> insert into t01 (name) values('所有分销 ...
- Linux 如何开启SFTP
一.SFTP讲解 SFTP 是Secure File Transfer Protocol的缩写,安全文件传送协议.可以为传输文件提供一种安全的加密方法. SFTP 与 FTP有着几乎一样的语法和功能. ...
- [原]sublime Text2
sublime Text2 升级到 2.0.2 build 2221 64位 的破破解 sublime Text2 download website 链接: http://pan.baidu.com/ ...
- 你可能不知道的shell、bash二三事(Centos 7)
个人.bashrc: ~/.bashrc: # .bashrc # User specific aliases and functions alias rm='rm -i' alias cp='cp ...
- H3C系列之三层交换机开启telnet管理的配置
环境介绍>>>>>>>>>>>>>>>>>>>>交换机名牌:H3C交换机类型:三 ...
- 【CF845F】Guards In The Storehouse 插头DP
[CF845F]Guards In The Storehouse 题意:一个n*m的房间,每个格子要么是障碍要么是空地.对于每个空地你可以选择放或者不放守卫.一个守卫能保护到的位置是:他右面的一行空地 ...
- 微信小程序APP(商超营销类)经验总结
项目介绍 这是一款主打门店营销的小程序.包括首页.门店.营销.个人设置.登录.数据统计展示.营销设置等. 本来要独立完成整个项目,包括前后端一套的,有些意外因素,项目临时收尾(说明:只完成了前端的部分 ...
- POJ-1958 Strange Towers of Hanoi(线性动规)
Strange Towers of Hanoi Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 2677 Accepted: 17 ...
- Linux:file命令显示自定义文件类型
file 命令可以查看文件类型信息,原理见: 非常Linux-file命令与magic file 修改 /ect/magic 文件后,可用 file 命令显示自定义文件类型信息. man magic ...