小小菜鸟的web菜园子

web开发学习。好记性不如烂笔头。每天进步一点点!

导航

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

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

代码:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/09/using-a-slider-control-as-a-datagrid-column-item-renderer-in-flex/ -->
<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>

posted on 2008-05-10 20:07  『小小菜鸟』  阅读(342)  评论(0编辑  收藏  举报