[Ext JS 四] 实战之 Picker 和 Picker Field _JavaScript

[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.Base    Ext.form.field.Text      Ext.form.field.Trigger        Ext.form.field.Picker         Ext.form.field.Date

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