12.15 Ext JS Picker Component

There are many ways to use the selection component in Ext JS, such as:
Method 1. Use Combobox or inherit Combobox to customize the subclass
Method 2. Use tagfield or inherit tagfield to customize the subclass
Method 3. Define a selection pop-up window

Mode 3 has the most complete functions, but it is also the most developed. However, there is a problem faced by methods 1 and 2: there is a problem of key and value when the person is displayed and saved, that is, the valueField and displayField are different, which is easy to understand, the display name of the person and the Id corresponding to the person (which can be ID number, account number and job number).

This article uses method 2 to achieve the effect of selecting the original used in Grid editing. The effect is as follows:

• The data saves the employee's job number and displays the employee's name.

Implementation steps

Note: This article takes the actual combat scenario as an example, and completely defines the model class, view class and data warehouse class. The definition of some parts can be ignored for demonstration purposes.

1. User model class

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