显示隐藏dataGrid控件的标题栏,改变标题栏高度.

dataGrid控件的showHeaders和headerHeight属性。
示例:

代码:
<? xml version="1.0" encoding="utf-8" ?>
<!--  http://blog.flexexamples.com/2008/06/16/setting-the-header-height-on-a-datagrid-control-in-flex/  -->
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"
        layout
="vertical"
        verticalAlign
="middle"
        backgroundColor
="white" >

    
< mx:Script >
        
<![CDATA[
            private function init():void {
                slider.value = dataGrid.headerHeight;
            }
        
]]>
    
</ mx:Script >

    
< mx:Array  id ="arr" >
        
< mx:Object  col1 ="1.One"  col2 ="1.Two"   />
        
< mx:Object  col1 ="1.One"  col2 ="1.Two"   />
        
< mx:Object  col1 ="1.One"  col2 ="1.Two"   />
        
< mx:Object  col1 ="1.One"  col2 ="1.Two"   />
        
< mx:Object  col1 ="1.One"  col2 ="1.Two"   />
    
</ mx:Array >

    
< mx:ApplicationControlBar  dock ="true" >
        
< mx:Form  styleName ="plain" >
            
< mx:FormItem  label ="headerHeight:" >
                
< mx:HSlider  id ="slider"
                        minimum
="0"
                        maximum
="40"
                        snapInterval
="1"
                        liveDragging
="true"   />
            
</ mx:FormItem >
            
< mx:FormItem  label ="showHeaders:" >
                
< mx:CheckBox  id ="checkBox"
                        selected
="true"   />
            
</ mx:FormItem >
        
</ mx:Form >
    
</ mx:ApplicationControlBar >

    
< mx:DataGrid  id ="dataGrid"
            dataProvider
=" {arr} "
            headerHeight
=" {slider.value} "
            showHeaders
=" {checkBox.selected} "
            initialize
="init();" >
        
< mx:columns >
            
< mx:DataGridColumn  dataField ="col1"   />
            
< mx:DataGridColumn  dataField ="col2"   />
        
</ mx:columns >
    
</ mx:DataGrid >

</ mx:Application >

也可以通过AS实现:
<? xml version="1.0" encoding="utf-8" ?>
<!--  http://blog.flexexamples.com/2008/06/16/setting-the-header-height-on-a-datagrid-control-in-flex/  -->
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"
        layout
="vertical"
        verticalAlign
="middle"
        backgroundColor
="white" >

    
< mx:Script >
        
<![CDATA[
            import mx.events.SliderEvent;

            private function init():void {
                slider.value = dataGrid.headerHeight;
            }

            private function slider_change(evt:SliderEvent):void {
                dataGrid.headerHeight = evt.value;
            }
        
]]>
    
</ mx:Script >

    
< mx:Array  id ="arr" >
        
< mx:Object  col1 ="1.One"  col2 ="1.Two"   />
        
< mx:Object  col1 ="1.One"  col2 ="1.Two"   />
        
< mx:Object  col1 ="1.One"  col2 ="1.Two"   />
        
< mx:Object  col1 ="1.One"  col2 ="1.Two"   />
        
< mx:Object  col1 ="1.One"  col2 ="1.Two"   />
    
</ mx:Array >

    
< mx:ApplicationControlBar  dock ="true" >
        
< mx:Form  styleName ="plain" >
            
< mx:FormItem  label ="headerHeight:" >
                
< mx:HSlider  id ="slider"
                        minimum
="0"
                        maximum
="40"
                        snapInterval
="1"
                        liveDragging
="true"
                        change
="slider_change(event);"   />
            
</ mx:FormItem >
            
< mx:FormItem  label ="showHeaders:" >
                
< mx:CheckBox  id ="checkBox"
                        selected
="true"   />
            
</ mx:FormItem >
        
</ mx:Form >
    
</ mx:ApplicationControlBar >

    
< mx:DataGrid  id ="dataGrid"
            dataProvider
=" {arr} "
            showHeaders
=" {checkBox.selected} "
            initialize
="init();" >
        
< mx:columns >
            
< mx:DataGridColumn  dataField ="col1"   />
            
< mx:DataGridColumn  dataField ="col2"   />
        
</ mx:columns >
    
</ mx:DataGrid >

</ mx:Application >

你可能感兴趣的:(datagrid)