Flex Примеры, Adobe Flex, Флекс

Изучаем Flex. Примеры, статьи, рецепты …


Как создать редактор (itemEditor) в DataGrid с двумя полями

Пример ниже о том, как создать редактор поля в DataGrid с двумя полями для ввода, например для ввода Имени/Фамилии в одном столбце

приложение:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" >
	<mx:Script>
	<![CDATA[
		private var arr:Array = [
			{ rank: "1", place: "3", lead: "Van Amstel, Louis", follow: "Burke, Cheryl" },
			{ rank: "2", place: "1", lead: "Weise, David", follow: "Weise, Valentina" },
			{ rank: "3", place: "2", lead: "Roberts, Jonathan", follow: "Trebunskaya, Anna" }
		];
 
	]]>
	</mx:Script>
	<mx:Button />
	<local:DataGridWithShiftKey id="dg" initialize="dg.dataProvider=arr" editable="true">
		<local:columns>
			<mx:DataGridColumn dataField="rank" width="50" headerText="Rank" />
			<mx:DataGridColumn dataField="lead" width="160" headerText="Leader" itemEditor="DataGridMultiFieldEditor" editorDataField="fullName" />
			<mx:DataGridColumn dataField="follow" width="160" headerText="Follower" itemEditor="DataGridMultiFieldEditor" editorDataField="fullName" />
			<mx:DataGridColumn dataField="place" width="50" headerText="Place" />
		</local:columns>
	</local:DataGridWithShiftKey>
	<mx:Button />
</mx:Application>

код компонента DataGridWithShiftKey
файл DataGridWithShiftKey.as

View CodeACTIONSCIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
package 
{
import flash.events.KeyboardEvent;
import mx.controls.DataGrid;
 
/** 
 *  Редактору со множеством полей необходимо состояние c SHIFT
 */
public class DataGridWithShiftKey extends DataGrid
{
 
	public function DataGridWithShiftKey()
	{
		super();
	}
 
	override protected function createChildren():void
	{
		super.createChildren();
		systemManager.addEventListener(KeyboardEvent.KEY_DOWN, shiftKeyHandler, true, 0, true);
	}
 
	private var _shiftKey:Boolean;
 
	public function get shiftKey():Boolean
	{
		return _shiftKey;
	}
 
	private function shiftKeyHandler(event:KeyboardEvent):void
	{
		_shiftKey = event.shiftKey;
	}
 
}
 
}

код редактора с несколькими полями для ввода
файл DataGridMultiFieldEditor.as

View CodeACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
package 
{
import flash.events.FocusEvent;
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.listClasses.IListItemRenderer;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.TextInput;
import mx.core.UIComponent;
import mx.managers.IFocusManagerComponent;
 
/** 
 *  Редактор с двумя полями для DataGrid
 */
public class DataGridMultiFieldEditor extends UIComponent implements IListItemRenderer, IDropInListItemRenderer, IFocusManagerComponent
{
 
	public function DataGridMultiFieldEditor()
	{
		super();
		addEventListener(FocusEvent.KEY_FOCUS_CHANGE, keyFocusChangeHandler);
	}
 
	private var dgOwner:DataGridWithShiftKey;
 
	private var firstNameEditor:TextInput;
	private var lastNameEditor:TextInput;
 
	public function get fullName():String
	{
		return lastNameEditor.text + ", " + firstNameEditor.text;
	}
 
	private var _data:Object;
 
	public function get data():Object
	{
		return _data;
	}
 
	public function set data(value:Object):void
	{
		_data = value;
		invalidateProperties();
	}
 
	private var _listData:BaseListData;
 
	public function get listData():BaseListData
	{
		return _listData;
	}
 
	public function set listData(value:BaseListData):void
	{
		_listData = value;
	}
 
	override public function setFocus():void
	{
		if (dgOwner.shiftKey)
			lastNameEditor.setFocus();
		else
			firstNameEditor.setFocus();
	}
 
	override protected function createChildren():void
	{
		super.createChildren();
 
        firstNameEditor = new TextInput();
		addChild(firstNameEditor);
        lastNameEditor = new TextInput();
		addChild(lastNameEditor);
	}
 
	override protected function commitProperties():void
	{
		dgOwner = owner as DataGridWithShiftKey;
 
		super.commitProperties();
 
		var dgColumn:DataGridColumn = dgOwner.columns[DataGridListData(listData).columnIndex];
		var fullName:String = data[dgColumn.dataField];
		var names:Array = fullName.split(", ");
 
		lastNameEditor.text = names[0];
		firstNameEditor.text = names[1];
	}
 
	override protected function updateDisplayList(w:Number, h:Number):void
	{
		super.updateDisplayList(w, h);
		firstNameEditor.move(0, 0);
		firstNameEditor.setActualSize(w / 2, h);
		lastNameEditor.move(w / 2, 0);
		lastNameEditor.setActualSize(w / 2, h);
	}
 
	private function keyFocusChangeHandler(event:FocusEvent):void
	{
		if (event.shiftKey)
		{
			if (lastNameEditor.contains(getFocus()))
			{
				event.preventDefault();
				firstNameEditor.setFocus();
			}
		}
		else
		{
			if (firstNameEditor.contains(getFocus()))
			{
				event.preventDefault();
				lastNameEditor.setFocus();
			}
		}
	}
}
 
}

Оригинал

0 Отзывов на “Как создать редактор (itemEditor) в DataGrid с двумя полями”


  1. Нет комментариев

Оставить отзыв