好贷网好贷款

[Ext JS 4] 实战之 Picker 和 Picker Field

发布时间:2016-12-3 14:48:52 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"[Ext JS 4] 实战之 Picker 和 Picker Field",主要涉及到[Ext JS 4] 实战之 Picker 和 Picker Field方面的内容,对于[Ext JS 4] 实战之 Picker 和 Picker Field感兴趣的同学可以参考一下。

前言所谓的picker , 就是弹出一个选择框,让你选择一些信息。比如选择日期, 选择颜色等;选择的结果总是要放在一个地方的,Picker Field 就是用来放置选择结果的一个文本框。在Ext js中综合起来使用的方式就是, 在 form 里添加一个picker 类型的 field, 这个field比较特殊的是有一个点击按钮, 点击之后可以弹出一个选择框, 在选择框里选中的值添入filed 中。Ext JS 中的PickerExt 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.Base Ext.form.field.Text Ext.form.field.Trigger Ext.form.field.Picker Ext.form.field.DateExt.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

上一篇:水经注万能地图下载器如何导出透明TIF标签
下一篇:并查集(Union-Find)算法介绍

相关文章

相关评论