您的位置：首页 > 其它

Flex 3快速入门: 构建高级用户界面 创建项目编辑器2

2009-06-17 14:05 821 查看
自定义条目编辑器最简单的方式是使用Drop-in条目编辑器。Drop-in条目编辑器是一个Flex组件。基于list的控件，比如
List,Tree,ComboBox或者DataGrid，的itemEditor属性可以指定Drop-in条目编辑器。例如，可以使用
Numericstepper控件来编辑DataGrid控件的一个字段。

要把一个组件作为Drop-in条目编辑器，这个空间必须实现IDropInListItemRenderer接口。实现
IDropInListItemRenderer接口的控件有：Button, CheckBox, DateField, Image,
Label, NumericStepper, Text, TextArea, and
TextInput.这些控件可以直接作为条目编辑器或条目渲染器使用。

你可以自定义组件作为条目编辑器。唯一的要求是自定义组件也实现了IDropInListItemRenderer接口。

在下边的例子中,使用NumericStepper控件，作为DateGrid控件一个字段的条目编辑器，这样用户就可以方便的修改数量字段。单击单元格可以激活Quantiy列的条目编辑器。这个例子还是用了Image控件作为条目渲染器来显示艺术品的缩略图。

注意:此例中，使用DataGridColumn 对象的editorXOffset, editorYOffset,
editorWidthOffset and editorHeightOffset属性来定义NumericStepper 在单元格中的大小和位置。

例子

Data model (artwork.xml)

<artwork>
    <piece>
        <name>The Wall</name>
        <image>artwork1.jpg</image>
        <price>250</price>
        <quantity>5</quantity>
    </piece>
   
    <piece>
        <name>Blue Flake</name>
        <image>artwork5.jpg</image>
        <price>400</price>
        <quantity>2</quantity>
    </piece>
   
    <piece>
        <name>Butterfly</name>
        <image>artwork6.jpg</image>
        <price>375</price>
        <quantity>17</quantity>
    </piece>
</artwork>




MXML files

<?xml version="1.0" encoding="utf-8"?>
    <mx:Application
        xmlns:mx="http://www.adobe.com/2006/mxml"
        viewSourceURL="src/ItemEditorDropIn/index.html"
        width="470" height="340"
    >
        <mx:Model id="artwork" source="model/artwork.xml"/>
       
        <mx:DataGrid
            id="artGrid"
            rowCount="10" variableRowHeight="true"
            dataProvider="{artwork.piece}"
            editable="true"
        >
            <mx:columns>
           
                <!-- Drop-in item renderer: Image control -->
                <mx:DataGridColumn
                    dataField="image" headerText="Image"
                    itemRenderer="mx.controls.Image"
                />
               
                <mx:DataGridColumn headerText="Name" dataField="name"/>
                <mx:DataGridColumn headerText="Price" dataField="price"/>
               
                <!-- Drop-in item editor: NumericStepper control -->
                <mx:DataGridColumn
                    headerText="Quantity"
                    dataField="quantity"
                    itemEditor="mx.controls.NumericStepper"
                    editorDataField="value"
                    editorXOffset="22"
                    editorYOffset="25"
                    editorWidthOffset="-40"
                    editorHeightOffset="-50"
                />
            </mx:columns>
        </mx:DataGrid>
       
        <mx:LinkButton
            textAlign="center"
            label="Photos (c) 2006 geishaboy500 (CC Attribution License)"
            click="{navigateToURL(new URLRequest('http://www.flickr.com/photos/geishaboy500/'));}"
        />
       
        <mx:Script>
            <!--[CDATA[
                import flash.net.navigateToURL;
            ]]-->
        </mx:Script>
       
    </mx:Application>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航