使用Flex itemEditors – Part 1: Inline itemEditors(翻译)
转自:http://zmfkplj.iteye.com/blog/629379 理解 Flex itemEditor-第 1 部分:内联 itemEditor转载 http://www.adobe.com/cn/devnet/flex/articles/itemeditors_pt1.html ? 我最近完成了一个有关 itemRenderer 的系列-对列表控制的自定义,它们用于控制列表内容的显示格式。显示和渲染内容是一种十分有效的 UI 技术,而使用 Flex 您几乎可以完成想象得到的任何事。 这是有关 itemEditor 的新系列的第 1 部分,允许在列表控制中直接更改数据。第一篇文章讨论内联 itemEditor,可以在 MXML 文件中直接编写这些简单却十分有用的组件。该系列的后续文章将讨论更复杂的编辑、验证、事件以及将 itemRenderer 用作 itemEditor。 ? TextInput 编辑器在列表控制中直接编辑十分便捷。想象一个仓库库存的 DataGrid,您可以在网格中直接调整内容而无需特殊弹出(请参阅图 1)。列表控制有一个内建编辑器 TextInput 控制,每当用户单击可编辑区域时会显示它,该区域包括行(对于列表)、分支(对于树)或单元格(对于 DataGrid)。您只需将列表控制的 itemEditor 与 itemRenderer 的不同之处在于只能看到 itemEditor 的一个实例,它在编辑的单元格上。仅当要编辑的单元格收到输入焦点后,才能看到 itemEditor。随后将隐藏 itemRenderer 并将 itemEditor 移到该位置、根据该区域大小做出调整并为它提供记录的数据。完成编辑(通过将焦点移到另一个位置)时,列表控制将新值从编辑器复制到 dataProvider 记录。 在图 1 显示的应用程序中,当用户单击“Part #”列的某个单元格时, 虽然默认 TextInput 控制是个不错的编辑器,它实际上只适用于最简单的情况。例如,它适用于书名、作者姓名或产品编号等字符串值。如果需要更多控制或要验证用户输入,您就需要亲自动手。 Flex 控制用作 itemEditor以下说明了如何创建一个只接受数值的 itemEditor: <mx:DataGrid x="46" y="270" editable="true" dataProvider="{employeeDB}">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name"/>
<mx:DataGridColumn headerText="Position" dataField="position"/>
<mx:DataGridColumn headerText="Age" dataField="age">
<mx:itemEditor>
<mx:Component>
<mx:TextInput restrict="0-9" maxChars="3" />
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
CheckBox 是用于 itemEditor 的另一个常见控制,因为它在编辑布尔值时很实用。图 2 显示了一个示例,它使用 CheckBox 编辑某个库存程序的“In Stock”列的值。 以下是它需要的代码: <mx:DataGrid x="531" y="273" editable="true" dataProvider="{inventoryDB}">
<mx:columns>
<mx:DataGridColumn headerText="Product" dataField="product"/>
<mx:DataGridColumn headerText="Part #" dataField="part"/>
<mx:DataGridColumn headerText="In Stock?" dataField="inStock"
labelFunction="inStockLabeler"
itemEditor="mx.controls.CheckBox" editorDataField="selected" />
<mx:DataGridColumn headerText="Quantity" dataField="quantity"/>
</mx:columns>
</mx:DataGrid>
在此例中,使用 labelFunction ( 此时,您可能会疑惑为什么 TextInput 的示例没有提供 可以将这种技术用于许多 Flex 控制。以下是用于使用 NumericStepper 的订单数量列的一个示例,如图 3 所示: <mx:DataGrid x="531" y="82" editable="true" dataProvider="{inventoryDB}">
<mx:columns>
<mx:DataGridColumn headerText="Product" dataField="product"/>
<mx:DataGridColumn headerText="Part #" dataField="part"/>
<mx:DataGridColumn headerText="In Stock?" dataField="inStock"/>
<mx:DataGridColumn headerText="Quantity" dataField="quantity"
itemEditor="mx.controls.NumericStepper" editorDataField="value"/>
</mx:columns>
</mx:DataGrid>
注意, 更复杂的编辑器现在,您可能希望更进一步,这次没有现成的 Flex 控制。以下示例允许用户使用四个单独的四位数字段输入信用卡号(请参阅图 4): 以下是它需要的代码: <mx:DataGrid x="46" y="463" editable="true" dataProvider="{accountDB}" width="302">
<mx:columns>
<mx:DataGridColumn headerText="Account" dataField="account" width="100"/>
<mx:DataGridColumn headerText="Credit Card" dataField="ccard" editorDataField="value">
<mx:itemEditor>
<mx:Component>
<mx:HBox>
<mx:Script>
<![CDATA[
public function get value() : String
{
return part1.text+part2.text+part3.text+part4.text;
}
override public function set data(value:Object):void
{
super.data = value;
part1.text = value.ccard.substr(0,4);
part2.text = value.ccard.substr(4,4);
part3.text = value.ccard.substr(8,4);
part4.text = value.ccard.substr(12,4);
}
]]>
</mx:Script>
<mx:TextInput id="part1" maxChars="4" restrict="0-9" width="40" />
<mx:TextInput id="part2" maxChars="4" restrict="0-9" width="40" />
<mx:TextInput id="part3" maxChars="4" restrict="0-9" width="40" />
<mx:TextInput id="part4" maxChars="4" restrict="0-9" width="40" />
</mx:HBox>
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
这个内联 itemEditor 遵循与其他 itemEditor 相同的规则,将 注意 data setter 函数中的 您还会发现我覆盖了 data setter 函数。在这个函数中,我将信用卡号分到四个 TextInput 字段。这种技术用于显示待编辑数据。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |