[Translation] spark DataGrid editing spec

Http://www.smithfox.com /? E = 168 reprinted. Please keep this statement. Thank you! ]

Source: spark DataGrid editing-functional and Design Specification

Introduction:

Spark DataGrid supports two ways to edit cell values: "item Editor" or "item Renderer.
"Item Editor" is a component temporarily displayed on cells. It provides the UI to edit and save values in cells.

An "item Editor" can be any spark component that implements the igriditemeditor interface, and different "item Editor" classes can be specified for each column of the DataGrid.

Like "item Renderer", the content displayed by "item Editor" depends on the content of the current row of dataprovider.

By default, "item Editor" is displayed only when you click a "selected" cell, and the prerequisite must be: the "editable" attribute of the gridcolumn where the DataGrid is located is "true ".

If "item Editor" has a keyboard focus, press enter to save the key, and "escape" causes "item Editor" to exit without saving the key.

In some cases, "item Renderer" itself is the cell editor. if the "rendereriseditable" attribute of a column is true, clicking the selected cell (or selecting another cell with the keyboard) will move the focus of the keyboard to "item Renderer, no other editor is available.

Griditemeditor is the base class for creating "item Editor". defaultgriditemeditor and comboboxgriditemeditor inherit from

Griditemeditor class. griditemeditor implements the igriditemeditor interface. Therefore, the general "item Editor" only needs to overwrite a few attributes and methods.

Item editor lifecycle:

The "session" of "item Editor" starts in response to user operations. For example, "click a selected cell or call the DataGrid explicitly. startitemeditorsession () method. "Item Editor" is used on cells. cells can be located by the index of row and column.

Before "item edtiro" is displayed, a "griditemeditorsessionstarting" griditemeditorevent will be sent to the DataGrid.

The listener handle function of this event can cancel the event by using the event. preventdefault () method to abort the "editing session" operation. It can also dynamically change the itemeditor attribute of the column.

"Item Editor" is created by the igriditemeditor class specified by the gridcolumn. itemeditor attribute.

Like "item Renderer", "item Editor" is used repeatedly. if itemeditor is not specified, the default "item Editor" class defaultgriditemeditor uses the textarea component to edit the cell value. before "item Editor" is displayed, the rowindex, column, and data attributes have been set. the value of the "data" attribute is dataprovider. getitemat (rowindex ).

All classes that implement the igriditemeditor interface should use the setter of "data" to initialize and edit the value of the component. The default implementation class griditemeditor uses data [column. datafield] sets the value attribute. this allows the subclass to overwrite the value setter method to assign the value to more editing controls.

The following is a custom "item Editor", similar to "Default item Editor", which uses the textarea component:

<s:itemEditor>    <fx:Component><s:GridItemEditor>    <s:TextArea id="valueDisplay"/>    <fx:Script><![CDATA[    override public function get value():Object    {return valueDisplay.text;                }    override public function set value(newValue:Object):void    {valueDisplay.text = newValue.toString();    }                                        ]]>    </fx:Script></s:GridItemEditor>    </fx:Component></s:itemEditor>

After "item Editor" is created, the prepare () method is called before the "visible" attribute is set to "true. after prepare () is called, the size and position of "item Editor" are set, and the layout of "item Editor" is also validated. developers can override the prepare () method to fine-tune any aspect of "item Editor. in the following example, the prepare () method is used to place the textarea component horizontally:

<s:itemEditor>    <fx:Component><s:DefaultGridItemEditor>    <fx:Script><![CDATA[    override public function prepare():void    {super.prepare();textArea.y += 8;textArea.height -= 16;     }]]>    </fx:Script></s:DefaultGridItemEditor>    </fx:Component></s:itemEditor> 

After "item Editor" is set to visible, a "griditemeditorstart" griditemeditorevent is sent to the DataGrid. however, after "item Editor" is displayed for the first time, the setfocus () method is called to obtain the keyboard focus. the setfocus () method can be used to move the keyboard focus to a real editing component. for example, the setfocus () of the defaultgriditemrenderer class should be set to its textarea control.
When "item Editor" is displayed and you can edit a new value, "Edit session" begins. until the DataGrid is called. endeditorsession () ends "Edit session. by default, this method is called by pressing enter or "escape", and "save" cancel "is called before the method is called ". if the user clicks "Editor", or "item Editor" loses the keyboard focus, the session will be saved. when the shortcut key for saving the session is defined or a "Editor" is opened in another cell
The current session. Session is saved (), "The save method of editor will be called.
The SAVE () method of the base class griditemrenderer can convert the string to a value or boolean as needed. if the editor value is not string, numbers, or booleans, overwrite the SAVE () method, for example:

<s:itemEditor>    <fx:Component><s:DefaultGridItemEditor>    <fx:Script><![CDATA[    override public function save():void    {        data.dataField = myValueConverter(value);    }]]>    </fx:Script></s:DefaultGridItemEditor>    </fx:Component></s:itemEditor> 

After the SAVE () or cancel () method of "Editor" is called, a notification event is sent: griditemeditorsessionsave or griditemeditorsessioncancel.
In addition, the dataprovider of comboboxgriditemeditor is a list and ComboBox is used internally to present values in these lists. Because it inherits from griditemeditor, String, number, and Boolean are supported. The following example shows a Value List.

<s:itemEditor>    <fx:Component><s:ComboBoxGridItemEditor>    <s:dataProvider><s:ArrayList>    <fx:int>0</fx:int>    <fx:int>1</fx:int>    <fx:int>2</fx:int>    <fx:int>3</fx:int></s:ArrayList>    </s:dataProvider></s:ComboBoxGridItemEditor>    </fx:Component></s:itemEditor>

Keyboard shortcut:

Omitted Translation:

Mouse operation:

Click:When a selected cell is clicked, "item Editor" is displayed ". if the shift or ctrl key is also pressed at the same time, "itemeditor" will not open because the shift or ctrl key is used to change the selection items of the grid.

Double-click:By default, double-clicking does not enable "itemeditor". You need to set the DataGrid. doubleclickenabled attribute to "true ".

Griditemeditor, defagrigriditemeditor, comboboxgriditemeditor

(Omit some obvious nonsense ...)

The igriditemeditor. Validate () method is used to verify whether the value of "Editor" can be saved. The base class griditemrenderer verifies the ivalidatorlistener member of each editor to check whether an error is reported.
If the validate method returns false, "Edit session" will not be closed after the SAVE () method is called. if you call DataGrid directly. endeditorsession (true) method, the "Edit session" will be disabled ". by default, the SAVE () method may overwrite griditemeditor. save () method to change.
Note: When the subclass overwrites the griditemeditor class method, it should call Super. XXX () to ensure the default behavior.

Griditemeditor, defagrigriditemeditor. mxml and comboboxgriditemeditor. mxml are all in the flex SDK Source: spark. components. gridclasses package.