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