Flex中如何实现在用户点击DataGrid头部之前就显示排序箭头的例子

By Minidxer | April 23, 2009

默认的情况下，DataGrid是需要点击一下才会显示排序的小箭头的，接下来的例子演示了Flex中如何实现在用户点击DataGrid头部之前就显示排序箭头。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.collections.Sort;
  10.             import mx.collections.SortField;
  11.  
  12.             private function init():void {
  13.                 arrColl.sort = new Sort();
  14.                 arrColl.sort.fields = [new SortField("idx", false, true)];
  15.                 arrColl.refresh();
  16.             }
  17.         ]]>
  18.     </mx:Script>
  19.  
  20.     <mx:ArrayCollection id="arrColl">
  21.         <mx:source>
  22.             <mx:Array>
  23.                 <mx:Object idx="1" c1="One.1" c2="One.2" />
  24.                 <mx:Object idx="2" c1="Two.1" c2="Two.2" />
  25.                 <mx:Object idx="3" c1="Three.1" c2="Three.2" />
  26.                 <mx:Object idx="4" c1="Four.1" c2="Four.2" />
  27.                 <mx:Object idx="5" c1="Five.1" c2="Five.2" />
  28.                 <mx:Object idx="6" c1="Six.1" c2="Six.2" />
  29.                 <mx:Object idx="7" c1="Seven.1" c2="Seven.2" />
  30.                 <mx:Object idx="8" c1="Eight.1" c2="Eight.2" />
  31.                 <mx:Object idx="9" c1="Nine.1" c2="Nine.2" />
  32.                 <mx:Object idx="10" c1="Ten.1" c2="Ten.2" />
  33.                 <mx:Object idx="11" c1="Eleven.1" c2="Eleven.2" />
  34.                 <mx:Object idx="12" c1="Twelve.1" c2="Twelve.2" />
  35.                 <mx:Object idx="13" c1="Thirteen.1" c2="Thirteen.2" />
  36.             </mx:Array>
  37.         </mx:source>
  38.     </mx:ArrayCollection>
  39.  
  40.     <mx:DataGrid id="dataGrid"
  41.             dataProvider="{arrColl}"
  42.             creationComplete="init();">
  43.         <mx:columns>
  44.             <mx:DataGridColumn dataField="idx" />
  45.             <mx:DataGridColumn dataField="c1" />
  46.             <mx:DataGridColumn dataField="c2" />
  47.         </mx:columns>
  48.     </mx:DataGrid>
  49.  
  50. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: DataGrid | No Comments » | Tags: , , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll