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

最新推荐文章于 2016-01-22 11:11:03 发布

iteye_10524

最新推荐文章于 2016-01-22 11:11:03 发布

阅读量262

点赞数

文章标签： flex itemEditor itemRenderer

本文链接：https://blog.youkuaiyun.com/iteye_10524/article/details/82170287

版权

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>