Flex中如何利用thumbSkin和verticalScrollBarStyleName样式去掉DataGrid中滚动条移动块的例子

By Minidxer | April 3, 2009

接下来的例子演示了Flex中如何利用thumbSkin和verticalScrollBarStyleName样式,去掉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:Style>
  8.         .myCustomScrollBarStyleName {
  9.             thumbSkin: ClassReference(null);
  10.         }
  11.     </mx:Style>
  12.  
  13.     <mx:Array id="arr">
  14.         <mx:Object c1="Item 1A" c2="Item 1B" />
  15.         <mx:Object c1="Item 2A" c2="Item 2B" />
  16.         <mx:Object c1="Item 3A" c2="Item 3B" />
  17.         <mx:Object c1="Item 4A" c2="Item 4B" />
  18.         <mx:Object c1="Item 5A" c2="Item 5B" />
  19.         <mx:Object c1="Item 6A" c2="Item 6B" />
  20.         <mx:Object c1="Item 7A" c2="Item 7B" />
  21.         <mx:Object c1="Item 8A" c2="Item 8B" />
  22.         <mx:Object c1="Item 9A" c2="Item 9B" />
  23.     </mx:Array>
  24.  
  25.     <mx:DataGrid id="dataGrid"
  26.             dataProvider="{arr}"
  27.             verticalScrollBarStyleName="myCustomScrollBarStyleName"
  28.             width="300"
  29.             rowCount="4">
  30.         <mx:columns>
  31.             <mx:DataGridColumn dataField="c1"
  32.                     headerText="Column 1:" />
  33.             <mx:DataGridColumn dataField="c2"
  34.                     headerText="Column 2:" />
  35.         </mx:columns>
  36.     </mx:DataGrid>
  37.  
  38. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

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

Search Posts