12.15 Ext JS 选人组件

在Ext JS中使用选人组件的方式有很多种，比如：
方式1. 使用Combobox或是继承Combobox自定义子类
方式2. 使用tagfield 或是继承tagfield 自定义子类
方式3. 定义一个选人的弹出窗口

方式3的功能最全，但是也是开发量最大的。 但是方式1和方式2面临了一个问题是： 人员显示和保存的时候存在键和值的问题， 也就是valueField 和 displayField 不同， 这很容易理解， 人员的显示名称和这个人对应的Id（可以是身份证号，账号和工号）。

本篇使用方式2 实现一个在Grid 编辑时使用的选人原件的效果，实现的效果如下图：

• 数据保存的是人员的工号， 显示的是人员的姓名。

实现步骤

注： 本篇以实战场景为例， 完整的定义了模型类， 视图类和数据仓库类， 演示目的可以忽略某些部分的定义。

1. 用户模型类

	Ext.define('Osxm.model.UserPicker', {
		 extend: 'Ext.data.Model',
		 fields: ['userId', 'displayName']
	});