把Slider组件放入DataGrid组件的列中.

最新推荐文章于 2021-05-25 12:11:37 发布

weixin_30952103

最新推荐文章于 2021-05-25 12:11:37 发布

阅读量59

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xxcainiao/archive/2008/05/10/1191530.html

本文介绍如何使用<mx:itemRenderer>标签自定义Flex DataGrid列的呈现方式，并通过实例展示了如何将滑块控件作为数据网格列的项渲染器。

<mx:itemRenderer>标签学习。
示例：

代码：

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="Student A" score="85" />
                <mx:Object label="Student B" score="48" />
                <mx:Object label="Student C" score="71" />
                <mx:Object label="Student D" score="88" />
                <mx:Object label="Student E" score="24" />
                <mx:Object label="Student F" score="64" />
                <mx:Object label="Student G" score="76" />
                <mx:Object label="Student H" score="76" />
                <mx:Object label="Student I" score="93" />
                <mx:Object label="Student J" score="88" />
                <mx:Object label="Student K" score="48" />
                <mx:Object label="Student L" score="76" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            selectable="false"
            rowCount="6"
            width="500">
        <mx:columns>
            <mx:DataGridColumn dataField="label" />
            <mx:DataGridColumn dataField="score" />
            <mx:DataGridColumn dataField="score">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:HBox horizontalScrollPolicy="off"
                                verticalScrollPolicy="off">
                            <mx:Script>
                                <![CDATA[
                                    import mx.events.SliderEvent;

                                    private function slider_change(evt:SliderEvent):void {
                                        data.score = evt.value;
                                        outerDocument.arrColl.refresh();
                                    }
                                ]]>
                            </mx:Script>

                            <mx:HSlider minimum="0"
                                    maximum="100"
                                    value="{data.score}"
                                    liveDragging="true"
                                    snapInterval="1"
                                    width="100%"
                                    change="slider_change(event);" />
                        </mx:HBox>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

转载于:https://www.cnblogs.com/xxcainiao/archive/2008/05/10/1191530.html