理解 Flex itemEditor.docxVIP

理解 Flex itemEditor－第 1 部分：内联 itemEditor我最近完成了一个有关 itemRenderer 的系列－对列表控制的自定义，它们用于控制列表内容的显示格式。显示和渲染内容是一种十分有效的 UI 技术，而使用 Flex 您几乎可以完成想象得到的任何事。这是有关 itemEditor 的新系列的第 1 部分，允许在列表控制中直接更改数据。第一篇文章讨论内联 itemEditor，可以在 MXML 文件中直接编写这些简单却十分有用的组件。该系列的后续文章将讨论更复杂的编辑、验证、事件以及将 itemRenderer 用作 itemEditor。要求要成功完成本教程，您需要以下软件和文件：Flex Builder 3试用购买范例文件：itemEditors_pt1.mxml (MXML, 8K) 必要条件：需要具备使用 Flex Builder 创建应用程序的经验。TextInput 编辑器在列表控制中直接编辑十分便捷。想象一个仓库库存的 DataGrid，您可以在网格中直接调整内容而无需特殊弹出（请参阅图 1）。列表控制有一个内建编辑器 TextInput 控制，每当用户单击可编辑区域时会显示它，该区域包括行（对于列表）、分支（对于树）或单元格（对于 DataGrid）。您只需将列表控制的editable属性设置为 true。对于 DataGrid，将 DataGridColumn 的editable属性设置为 false 即可将某个列排除在可编辑范围以外。图 1.itemEditor 允许在 DataGrid 中直接编辑itemEditor 与 itemRenderer 的不同之处在于只能看到 itemEditor 的一个实例，它在编辑的单元格上。仅当要编辑的单元格收到输入焦点后，才能看到 itemEditor。随后将隐藏 itemRenderer 并将 itemEditor 移到该位置、根据该区域大小做出调整并为它提供记录的数据。完成编辑（通过将焦点移到另一个位置）时，列表控制将新值从编辑器复制到 dataProvider 记录。在图 1 显示的应用程序中，当用户单击“Part #”列的某个单元格时，dataProvider[row][dataField]值将赋予 itemEditor (TextInput) 控制的text属性。完成编辑时，itemEditor (TextInput) 控制的text属性值将复制到dataProvider[row][dataField]。作为一个集合，dataProvider 根据更新调度事件。虽然默认 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:DataGridrestrict和maxChars属性确保了 age 值限制为三位数的数值。CheckBox 是用于 itemEditor 的另一个常见控制，因为它在编辑布尔值时很实用。图 2 显示了一个示例，它使用 CheckBox 编辑某个库存程序的“In Stock”列的值。图 2.将 CheckBox 用作布尔值的 itemEditor以下是它需要的代码：mx:DataGrid x=531 y=273 editable=true dataProvider={inventoryDB} mx:columns