[Ext JS 4] 实战之 Picker 和 Picker Field| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

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

## [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)
时间选择。 更通俗点说， 就是选择一天中的小时段。 选择的时间段是可以配置的。
简单的例子：
```javascript
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的值。
```javascript
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的内容。
```javascript
Ext.define('Ext.ux.TextfieldUser', {
extend: 'Ext.form.field.Picker',
alias: 'widget.textfielduser',
xtype: 'textfielduser',
        triggerCls : 'user',
// override onTriggerClick
createPicker: function() {
	returnshowUserSelWindow(this);
 	    }
    });
```
从Picker继承的好处是它会保持在弹出选择窗口的同时， 原filed 保持编辑状态， 使用setValue 就可以完成值的设置。
唯一需要注意的地方就是：
默认产生的窗口的宽度跟field 的宽度是相同的。
所以需要的话, 可以设置选择窗口组件的  -minWidth

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

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

网站导航