v4_05 创建项目渲染器和项目编辑器

v4_05 Creating item renderers and item editors 创建项目渲染器和项目编辑器

 

ex4-05

这部分主要讲

把有关项目渲染器的知识带到DataGrid控件中,并学习如何创建项目渲染器和项目编辑器

及如何创建渲染器和编辑器作为下拉式,内联式和组件形式的实现

如何使用渲染器里面的Spark组件

如何在DataGrid控件里的一个项目上处理一个点击事件

 

 

三种方式来实现项目渲染器和项目编辑器

下拉式  内联式  组件形式

 

 

下拉式

为实现一个下拉式的项目渲染器,需要直接在一个DataGridColumn实例中的iterRenderer或itemEditor属性中引用一个组件类文件

可以使用editorDataField属性,将列中 的数据绑定到下拉式组件中的不同属性上

如果要为项目渲染器使用项目编辑器,设置rendererIsEditor属性为true

 

1.首先给DataGrid加上editable=true属性

Employee Name,Hire Date的editable="false",在Vacation中加上项目编辑器

 

<mx:DataGrid dataProvider="{employeeList}"
width="300"
editable="true">

<mx:columns>
<mx:DataGridColumn labelFunction="employeeName"
headerText="Employee Name"
width="112"
editable="false"/>
<mx:DataGridColumn dataField="hireDate"
headerText="Hire Date"
labelFunction="dateFormat"
editable="false"/>
<mx:DataGridColumn dataField="vacationEligibility"
headerText="Vacation"
itemEditor="mx.controls.NumericStepper"
editorDataField="value"/>
</mx:columns>

</mx:DataGrid> 

 

 

2.让NumericStepper总是显示

这里使用itemRenderer,并且rendererIsEditor="true"

<mx:DataGrid dataProvider="{employeeList}"
width="300"
editable="true">

<mx:columns>
<mx:DataGridColumn labelFunction="employeeName"
headerText="Employee Name"
width="112"
editable="false"/>
<mx:DataGridColumn dataField="hireDate"
headerText="Hire Date"
labelFunction="dateFormat"
editable="false"/>
<mx:DataGridColumn dataField="vacationEligibility"
headerText="Vacation"
itemRenderer="mx.controls.NumericStepper"
rendererIsEditor="true"
editorDataField="value"/>
</mx:columns>

</mx:DataGrid> 

 

 

 

3.上面的例子中下拉控件数字大小是无法规定上限的

因为属性无法传入到<!--WizRtf2Html Charset=0 -->NumericStepper 中去

可以在itemRenderer使用Component来解决设置NumericStepper 属性的问题

<mx:DataGridColumn dataField="vacationEligibility"
headerText="Vacation"
rendererIsEditor="true">
<mx:itemRenderer>
<fx:Component>
<mx:NumericStepper minimum="2" maximum="26"/>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn> 

  

4.<!--WizRtf2Html Charset=0 -->Employee Name 是创建一个<!--WizRtf2Html Charset=0 -->itemRenderer

EmployeeItemRenderer,注意创建的时间,选择MXML项呈示器

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" 
focusEnabled="true">

<s:BorderContainer backgroundColor="#cccccc">

<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>

<s:Label text="{data.firstName} {data.lastName}"/>

<mx:Image source="images/{data.id}.jpg"/>

</s:BorderContainer>

</s:MXDataGridItemRenderer> 

 

 

然后在主应用程序中引用

<mx:columns>
<mx:DataGridColumn itemRenderer="components.EmployeeItemRenderer"
headerText="Employee Name"
width="112"
editable="false"/>
<mx:DataGridColumn dataField="hireDate"
headerText="Hire Date"
labelFunction="dateFormat"
editable="false"/>
<mx:DataGridColumn dataField="vacationEligibility"
headerText="Vacation"
rendererIsEditor="true">
<mx:itemRenderer>
<fx:Component>
<mx:NumericStepper minimum="2" maximum="26"/>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

</mx:columns> 

 

 

 

5.vacation的高度也变这么高了

怎么处理呢?在NumericStepper 加一层MXDataGridItemRenderer,通过该类，可以将 Spark 项呈示器体系结构与 MX DataGrid 控件一起使用。

<mx:itemRenderer>
<fx:Component>
<s:MXDataGridItemRenderer>
<mx:NumericStepper minimum="2" maximum="26"/>
</s:MXDataGridItemRenderer>
</fx:Component>
</mx:itemRenderer> 

 

 

6.但是上面的vacation的值出问题了,都是最小值2了

因为使用MXDataGridItemRenderer之后,

它就是一个独立的components,所以我们要为它提供数据

注意,这里把NumericStepper 使用了Spark组件

<mx:itemRenderer>
<fx:Component>
<s:MXDataGridItemRenderer>
<s:NumericStepper minimum="2" maximum="26" value="{data.vacationEligibility}"/>
</s:MXDataGridItemRenderer>
</fx:Component>
</mx:itemRenderer> 

 

 

7.点击事件

在DataGrid 写上itemClick事件,并处理它

<mx:DataGrid dataProvider="{employeeList}"
width="300"
editable="true"
itemClick="datagrid1_itemClickHandler(event)"> 

 

 

8.最后说下HGroup

HGroup 容器是使用 HorizontalLayout 类的 Group 容器的一个实例

就是一个不用写layout的Group