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

2013-09-05

[Ext JS 4] 实战之 Picker 和 Picker Field前言所谓的picker ，就是弹出一个选择框，让你选择一些信息。比如

[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.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

热点排行

JavaScript

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