[Ext JS 4] 实战之 Picker 和 Picker Field
前言
所谓的picker , 就是弹出一个选择框,让你选择一些信息。比如选择日期, 选择颜色等;
选择的结果总是要放在一个地方的,Picker Field 就是用来放置选择结果的一个文本框。
在Ext js中综合起来使用的方式就是, 在 form 里添加一个picker 类型的 field, 这个field比较特殊的是有一个点击按钮, 点击之后可以弹出一个选择框, 在选择框里选中的值添入filed 中。
Ext JS 中的Picker
Ext JS 目前的版本有三种选择器
1. Date (Ext.picker.Date)
这个太常见的, 就是一个日期选择的窗口
2. Color (Ext.picker.Color)
颜色选择的窗口, 在office 中就经常看到
3. Time (Ext.picker.Time)
时间选择。 更通俗点说, 就是选择一天中的小时段。 选择的时间段是可以配置的。
简单的例子:
Ext.create('Ext.picker.Time', {
width: 60,
minValue: Ext.Date.parse('04:30:00 AM', 'h:i:s A'),
maxValue: Ext.Date.parse('08:00:00 AM', 'h:i:s A'),
renderTo: Ext.getBody()
});
这三个选择器的定义位于Ext.picker包下,都是从 Ext.Component继承过来(除了Time, 另外两个都是直接继承)。 这不难理解, 其实选择器只不过是Ext 中的一种组件而已。
Ext JS中的Picker Field
最常用的日期选择栏位 Ext.form.field.Date (xtype: datefield), 后面有个日期按钮, 点击后弹出一个日期选择器。
看一下它的类层次结构:
Ext.Component
Ext.form.field.Text 这是普通的form 输入框
Ext.form.field.Trigger - 从它开始就具有点击按钮的功能了。输入框最后可以显示一个按钮
Ext.form.field.Picker -- 这个比Trigger 功能更强大一些, 后面的实战开发的实例就会提到。(createPicker从这开始)
想一想机制, 其实很简单。对于picker 这种栏位, render 时多加一个按钮,点击按钮时会触发一个创建并显示选择器的事件。
实战开发
这是本篇的重点部分。
在开发中, 除了Ext JS 本身的日期和颜色选择之外, 有时候需要定制一些特殊的选择,比如说人员的选择.
思路其实很清新,
1. 需要从Ext.form.field.Trigger 或是从 Ext.form.field.Picker 继承一个新的class.
2. 需要从Ext.Component 继承一个选择器的窗口
区别就是从Trigger ?还是从Picker 继承?
这里的例子是在一个grid 中, 有一列的编辑时是要求人员选择的picker.
想法一:
从Trigger 继承, 改写onTriggerClick的内容。
onTriggerClick这里面就是创建一个组件并显示。
showUserSelWindow 这个方法需要传入当前this 的目的就是为了选中之后可以设置field的值。
Ext.define('Ext.ux.TextfieldUser', {
extend: 'Ext.form.field.Trigger',
alias: 'widget.textfielduser',
xtype: 'textfielduser',
triggerCls : 'user',
// override onTriggerClick
onTriggerClick: function() {
showUserSelWindow(this);
},
});
这种方式会出现的问题是:
在grid 中双击cell 变成编辑模式, 点击后面的按钮, 弹出选择的窗口, 这个时候发现后面的编辑的栏位又变成非编辑状态了。
这样的话,要设置选择后的值就很麻烦了,除非通过这个cell的id 找到这个cell , 设置它的html。 实在是太麻烦。
出现这个问题的原因是: 对与trigger 这种field , 失去焦点的话会触发blur 这个事件,而这个事件处理中就会改变编辑状态。
所以如果不需要回传值, 只是显示一些提示信息的话, 这个方式可以使用, 如果需要回传值, 就只能使用以下方式了。
想法二:
从Picker继承, 改写createPicker的内容。
Ext.define('Ext.ux.TextfieldUser', {
extend: 'Ext.form.field.Picker',
alias: 'widget.textfielduser',
xtype: 'textfielduser',
triggerCls : 'user',
// override onTriggerClick
createPicker: function() {
return showUserSelWindow(this);
}
});
从Picker继承的好处是它会保持在弹出选择窗口的同时, 原filed 保持编辑状态, 使用setValue 就可以完成值的设置。
唯一需要注意的地方就是:
默认产生的窗口的宽度跟field 的宽度是相同的。
所以需要的话, 可以设置选择窗口组件的 -minWidth
[Ext JS 4] 实战之 Picker 和 Picker Field的更多相关文章
- [Ext JS 4] 实战之 带week(星期)的日期选择控件(三)
前言 在 [Ext JS 4] 实战之 带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件 ==> “2. 每年的周数从(1-52), 如果超过52 周 ...
- [Ext JS 4] 实战之 带week(星期)的日期选择控件
前言 Ext JS 3 和 Ext JS 4中都有提供日期选择的组件(当然早期版本也有). 但是有一些日期选择的需求是要看到星期,就是日期中的哪一天是这一年的第几周. 遗憾的是Ext js 并没有提供 ...
- [Ext JS 4] 实战之Grid, Tree Gird 添加按钮列
引言 贴一个grid 的例子先: 有这样一个需求: 1. 给 Grid(or Tree Grid)添加一列, 这一列显示是Button. 点击之后可以对这一行进行一些操作 2. 这一列每一行对应的按钮 ...
- [Ext JS 4] 实战之Grid, Tree Gird编辑Cell
前言 本篇这里以稍微复杂一点的Tree Grid 来介绍. 在写编辑grid 之, 先来看一下 grid 的 selType 的配置. 先给一个简单的Tree grid 的例子: Ext.onRead ...
- [Ext JS 4] 实战之多选下拉单 (带checkbox)
前言 Ext js 创建一个多选下拉单的方式很简单, 使用Ext.form.ComboBox, 设置 multiSelect 为true 就可以了. 但是如果要在每个下拉之前加上一个checkbox, ...
- [Ext JS 4] 实战Chart 协调控制(单一的坐标,两个坐标)
前言
- 24. [Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏
转自:https://blog.csdn.net/oscar999/article/details/27176791
- [Ext JS 4]后台自动产生图档
前言 [Ext JS 4] 实战之将chart导出为png, jpg 格式的文件 承接上一篇, 我们可以做到在Browser端打开一个Chart,并导出为png或是jpg 等格式的图档. 但实际的需求 ...
- [Ext JS 4] 布局之实战一 - 中间区块不会自动伸展 (tab)
前言 [Ext JS 4] 布局之实战一 - 中间区块不会自动伸展 (tab) 在上一篇中,中间的tab 区块无法自动伸展的原因一句话说就是: 使用contentEL的方式,相关HTML元素不会参与组 ...
随机推荐
- 14.10.2 File Space Management 文件空间管理:
14.10.2 File Space Management 文件空间管理: 数据文件 你定义在配置文件形成了InnoDB的系统表空间, 文件是逻辑连接形成表空间,没有条带化使用. 你不能定义你的表在表 ...
- HDU3709:Balanced Number(数位DP+记忆化DFS)
Problem Description A balanced number is a non-negative integer that can be balanced if a pivot is p ...
- VxWorks6.6 pcPentium BSP 使用说明(二):创建启动盘
本篇介绍从Solaris.Linux.Windows或VxWorks创建VxWorks启动盘的方法. 从Solaris或Linux创建启动盘 使用Solaris或Linux自带的工具/usr/bin/ ...
- 能上QQ无法上网
不少网友碰到过或亲身经历过电脑QQ还在登录,并且还能正常聊天,但是却打不开网站网页的情况,而当电脑出现能上qq但是打不开网页是由什么原因引起,我们又该如何解决类似的电脑故障呢. 适用范围及演示工具 适 ...
- Decoding BASE64 in ABAP
Code Gallery Decoding BASE64 in ABAP Skip to end of metadata Created by Frank Klausner, last modifie ...
- 基于Hadoop技术实现的离线电商分析平台(Flume、Hadoop、Hbase、SpringMVC、highcharts)
离线数据分析平台是一种利用hadoop集群开发工具的一种方式,主要作用是帮助公司对网站的应用有一个比较好的了解.尤其是在电商.旅游.银行.证券.游戏等领域有非常广泛,因为这些领域对数据和用户的特性把握 ...
- 学习javascript语言精粹的笔记
1.枚举: 用for in 语句来遍历一个对象中所有的属性名,该枚举过程将会列出所有的属性也包括涵数和方法,如果我们想过滤掉那些不想要的值,最为常用的过滤器为hasOwnProperty方法,以及使用 ...
- 编译android-4.3.1_r源代码并刷到自己的Galaxy Nexus I9250真机上
编译android-4.3.1_r源代码并刷到自己的Galaxy Nexus I9250真机上 作者:雨水 日期:2014-04-30 编译源码的目的还是为了自己改动源码,然后还可以执行在相应的手机 ...
- Swift - 让StoryBoard设计视图,程序运行时都使用横屏形式
1,运行时横屏 将项目属性“General”->“DeviceOritentation”的Portrait复选框去掉 2,storyboard设计视图横屏 在storyboard中,单击中间界面 ...
- 《深入理解mybatis原理》 MyBatis事务管理机制
MyBatis作为Java语言的数据库框架,对数据库的事务管理是其很重要的一个方面.本文将讲述MyBatis的事务管理的实现机制. 首先介绍MyBatis的事务Transaction的接口设计以及其不 ...