首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 媒体动画 > flex >

关于Flex的DataGrid的使用拓展(一)

2012-08-30 
关于Flex的DataGrid的应用拓展(一)Flex的DataGrid是Flex软件开发过程中最重要的组件之一,但这个组件确实让

关于Flex的DataGrid的应用拓展(一)
        Flex的DataGrid是Flex软件开发过程中最重要的组件之一,但这个组件确实让大家既爱又恨。这个组件的代码非常多,要是连继承类算起来,总么也要上万行代码。因此,分享一些在工作中的一些小用途希望大家能喜欢。首先介绍一下如何设置header的的rollover颜色。在DataGrid中不能单独设置header的rollover颜色,只能设置一个和数据统一的rollover颜色。步骤如下:

    (1)创建一个DataGrid继承类:

package{import mx.controls.DataGrid;import mx.core.mx_internal;use namespace mx_internal;/** *  The color of the header background when the user rolls over the row. *   *  The default value for the Halo theme is <code>0xB2E1FF</code>. *  The default value for the Spark theme is <code>0xCEDBEF</code>. *   *  @langversion 3.0 *  @playerversion Flash 9 *  @playerversion AIR 1.1 *  @productversion Flex 3 */[Style(name="headerRollOverColor", type="uint", format="Color", inherit="yes")]  public class headerDatagrid extends DataGrid{public function headerDatagrid(){super();headerClass=customDataGridHeader;}}}


注:这个继承类干了两件事情。1)指定一个样式 ;2)指定一个Header实现类用于覆盖原来的Header,下一步会介绍。



2)继承DatagridHeader实现对Header rollOver的指定:
package{import flash.display.Graphics;import flash.display.Sprite;import flash.events.MouseEvent;import mx.controls.dataGridClasses.DataGridColumn;import mx.controls.dataGridClasses.DataGridHeader;import mx.controls.listClasses.IListItemRenderer; public class customDataGridHeader extends DataGridHeader{public function customDataGridHeader(){super();} /** * override current style drawing,perpose: create new style for  header's rollover. */ override protected function drawHeaderIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void{var g:Graphics = indicator.graphics;g.clear();if(color==getStyle("rollOverColor")&&getStyle("headerRollOverColor")){  color=getStyle("headerRollOverColor");}g.beginFill(color);g.drawRect(0, 0, width, height);g.endFill(); indicator.x = x;indicator.y = y;}}}



3)调用这个实现了header rollover 的实现类:
<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*"><s:layout><s:BasicLayout/></s:layout><fx:Declarations></fx:Declarations><fx:Style>@namespace s "library://ns.adobe.com/flex/spark";@namespace mx "library://ns.adobe.com/flex/mx";@namespace local "*"; mx|DataGrid{ headerRollOverColor:#ff0000; }</fx:Style><fx:Script><![CDATA[import mx.collections.ArrayCollection;[Bindable] public var collection:ArrayCollection = new ArrayCollection([ { "name1" : "上海", "selected":false},  { "name1":"黄浦", "selected":false }, { "name1":"浦东", "selected":true }, { "name1":"静安", "selected":false }, { "name1":"徐汇", "selected":false }, { "name1":"北京", "selected":false},{ "name1":"海淀", "selected":false }, { "name1":"朝阳", "selected":true }, { "name1":"丰台", "selected":false } ]); ]]></fx:Script><local:headerDatagrid  width="300" id="datagrid" dataProvider="{collection}" ><local:columns><mx:DataGridColumn headerText="地区" dataField="name1"  itemRenderer="datagridItemrender" ></mx:DataGridColumn><mx:DataGridColumn headerText="选择" dataField="selected"></mx:DataGridColumn></local:columns></local:headerDatagrid></s:Application>


注:这几个类别的应用都在Flex4.1中运行过,效果不错。另外,如果想知道为什么这样,那就多去读源码吧。这里不再熬述。


           

            

   1 楼 zyx870805 2011-10-08   xmlns:local="*"
请问这句话代表什么意思?
2 楼 fu80008 2011-10-20   flex的namespace

热点排行