讲授Flex表格中itemEditor或itemRenderer较好的文章

讲解Flex表格中itemEditor或itemRenderer较好的文章。

Flex DataGrid 编辑实例源码源码：<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="vertical" horizontalAlign="center" ?
?xmlns:mx="http://www.adobe.com/2006/mxml" >
?<mx:Script>
??<![CDATA[
???import mx.events.DataGridEventReason;
???import mx.controls.NumericStepper;
???import mx.controls.TextInput;
???import mx.core.UIComponent;
???import mx.containers.HBox;
???import mx.controls.DataGrid;
???import mx.events.DataGridEvent;
???// 屏蔽第一列的编辑事件
???private function onItemEditBeginning(event:DataGridEvent):void{
????if(event.columnIndex==0)
?????event.preventDefault();
???}?
???private function onItemEditBegin(event:DataGridEvent):void{?
????// 阻止默认侦听器执行
????event.preventDefault();
????var dg:DataGrid = event.currentTarget as DataGrid;???
????// 创建项目编辑器实例
????dg.createItemEditor(event.columnIndex,event.rowIndex);
????var editorInstance:UIComponent = dg.itemEditorInstance as UIComponent;
????var tiLabel:TextInput = editorInstance.getChildAt(0) as TextInput;
????tiLabel.percentWidth = 50;
????tiLabel.text = dg.editedItemRenderer.data.label;
????var numStepper:NumericStepper = editorInstance.getChildAt(1) as NumericStepper;
????numStepper.percentWidth = 50;
????numStepper.value = dg.editedItemRenderer.data.price;???
???}
???private function onItemEditEnd(event:DataGridEvent):void{
????if (event.reason == DataGridEventReason.CANCELLED){
?????// 如果取消编辑，不更新数据?
?????return;
????}
????// 阻止默认侦听器执行
????event.preventDefault();
????var dg:DataGrid = event.currentTarget as DataGrid;??
????var editorInstance:UIComponent = dg.itemEditorInstance as UIComponent;?
????var tiLabel:TextInput = editorInstance.getChildAt(0) as TextInput;
????var numStepper:NumericStepper = editorInstance.getChildAt(1) as NumericStepper;
????var newLabel:String = tiLabel.text;
????var newPrice:Number = numStepper.value;
????// 取得旧数据
????var oldLabel:String = dg.editedItemRenderer.data.label;
????var oldPrice:Number = dg.editedItemRenderer.data.price;
????// 判断label是否为空，price是否小于50
????if(newLabel=="" || newPrice<50){??
?????//销毁项目编辑器并返回，不更新数据
?????dg.destroyItemEditor();???
?????return;
????}??
????// 为项目渲染器设置新数据
????dg.editedItemRenderer.data.label = newLabel;
????dg.editedItemRenderer.data.price = newPrice;???
????dg.destroyItemEditor();
???}??]]>
?</mx:Script>
?<mx:Model id="myData">
??<items>
???<item>
????? <icon>assets/icon1.png</icon>
????? <label>Item1</label>
????? <price>60.0</price>
???</item>
???<item>
????? <icon>assets/icon2.png</icon>
????? <label>Item2</label>
????? <price>75.0</price>
???</item>
???<item>
????? <icon>assets/icon3.png</icon>
????? <label>Item3</label>
????? <price>60.0</price>
???</item>
???<item>
????? <icon>assets/icon4.png</icon>
????? <label>Item4</label>
????? <price>70.0</price>
???</item>
??</items>
?</mx:Model>
?<mx:DataGrid width="400" dataProvider="{myData.item}" editable="true"?
??itemEditBeginning="onItemEditBeginning(event)"?
??itemEditBegin="onItemEditBegin(event)"?
??itemEditEnd="onItemEditEnd(event)">
??<mx:columns>
???<mx:DataGridColumn itemRenderer="mx.controls.Image" dataField="icon"/>?
???<mx:DataGridColumn headerText="price">
????
????<mx:itemRenderer>
?????<mx:Component>
??????<mx:Label text="{data.label}:${data.price}"/>????
?????</mx:Component>
????</mx:itemRenderer>
????<mx:itemEditor>
?????<mx:Component>
??????
??????<mx:HBox horizontalScrollPolicy="off">
???????<mx:TextInput/>
???????<mx:NumericStepper minimum="0" maximum="100"/>
??????</mx:HBox>?????
?????</mx:Component>
????</mx:itemEditor>????
???</mx:DataGridColumn>???
??</mx:columns>
?</mx:DataGrid>
</mx:Application>
?<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="vertical" horizontalAlign="center" ?
?xmlns:mx="http://www.adobe.com/2006/mxml" >
?<mx:Script>
??<![CDATA[
???import custom.MyEditor;
???import mx.events.DataGridEventReason;
???import mx.controls.NumericStepper;
???import mx.controls.TextInput;
???import mx.controls.DataGrid;
???import mx.events.DataGridEvent;
???// 屏蔽第一列的编辑事件
???private function onItemEditBeginning(event:DataGridEvent):void{
????if(event.columnIndex==0)
?????event.preventDefault();
???}?
???private function onItemEditEnd(event:DataGridEvent):void{
????if (event.reason == DataGridEventReason.CANCELLED){????
?????return;
????}
????event.preventDefault();
????var dg:DataGrid = event.currentTarget as DataGrid;??
????var editorInstance:MyEditor = dg.itemEditorInstance as MyEditor;???????// 取得项目编辑器中的新数据
????var newLabel:String = editorInstance.newLabel
????var newPrice:Number = editorInstance.newPrice
????// 检查数据是否符合要求
????if(newLabel=="" || newPrice<50){??
?????// 销毁项目编辑器并返回，不更新数据
?????dg.destroyItemEditor();???
?????return;
????}
????// 为项目渲染器设置新数据
????dg.editedItemRenderer.data.label = newLabel;
????dg.editedItemRenderer.data.price = newPrice;???
????dg.destroyItemEditor();
???}???
??]]>
?</mx:Script>
?<mx:Model id="myData">
??<items>
???<item>
????? <icon>assets/icon1.png</icon>
????? <label>Item1</label>
????? <price>60.0</price>
???</item>
???<item>
????? <icon>assets/icon2.png</icon>
????? <label>Item2</label>
????? <price>75.0</price>
???</item>
???<item>
????? <icon>assets/icon3.png</icon>
????? <label>Item3</label>
????? <price>60.0</price>
???</item>
???<item>
????? <icon>assets/icon4.png</icon>
????? <label>Item4</label>
????? <price>70.0</price>
???</item>
??</items>
?</mx:Model>
?<mx:DataGrid width="300" dataProvider="{myData.item}" editable="true"?
??itemEditBeginning="onItemEditBeginning(event)"?
??itemEditEnd="onItemEditEnd(event)">
??<mx:columns>
???<mx:DataGridColumn itemRenderer="mx.controls.Image" dataField="icon" width="100"/>?
???<mx:DataGridColumn headerText="price" itemEditor="custom.MyEditor"?
????editorXOffset="5" editorYOffset="0" editorHeightOffset="40">
????
????<mx:itemRenderer>
?????<mx:Component>
??????<mx:Label text="{data.label}:${data.price}"/>????
?????</mx:Component>
????</mx:itemRenderer>???????
???</mx:DataGridColumn>??
??</mx:columns>
?</mx:DataGrid>
</mx:Application>?
?

讲授Flex表格中itemEditor或itemRende

热点推荐