Flex指定DataGrid控件Header高度

以下例子展示如果通过设定headerHeight属性来指定DataGrid控件中的Header的高度：

'; } else { whichEl.style.display = 'none'; sb.innerHTML=' 显示代码'; whichEl.witdh="300px"; } }   隐藏代码

DE<<?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> DE<

AS实现：

 

DE<<?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> DE<

查看Demo演示

原创作者： peterd。翻译整理：一路风尘