Flex Bottom Bleeding DataGrid

Flex Bottom Bleeding DataGrid

承上次 Flex 不規則底部形狀的 DataGrid
這次公布解答，跟大家說明一下做法

其實 ListBase 系列的組件有一個屬性可用 offscreenExtraRowsOrColumns
ListBase 組件為了節省資源，只會產生畫面上呈現必要的 Item 數量
這個屬性就是用來控制畫面外要多產生幾個 Item
單純增加 offscreenExtraRowsOrColumns 數量是看不出來效果的
因為 ListBase 區域外的東西都會被遮罩遮掉

看到這裡應該有一些線索了吧
配合使用 offscreenExtraRowsOrColumns 屬性
再修改 Mask 行為，就可以讓 DataGrid 做到出血的功能了

什麼，還是看不懂我的意思?
那直接看 Code 好了~~

BleedingDataGrid：

view plain | copy to clipboard | print | ? | 

∙∙∙∙∙∙∙∙∙10∙∙∙∙∙∙∙∙20∙∙∙∙∙∙∙∙30∙∙∙∙∙∙∙∙40∙∙∙∙∙∙∙∙50∙∙∙∙∙∙∙∙60∙∙∙∙∙∙∙∙70∙∙∙∙∙∙∙∙80∙∙∙∙∙∙∙∙90∙∙∙∙∙∙∙∙100∙∙∙∙∙∙∙110∙∙∙∙∙∙∙120∙∙∙∙∙∙∙130∙∙∙∙∙∙∙140∙∙∙∙∙∙∙150

1. package {
2.  import flash.display.DisplayObject;
3.  import flash.geom.Rectangle;
4.  
5.  import mx.controls.DataGrid;
6.  import mx.core.mx_internal;
7.  
8.  use namespace mx_internal;
9.  public class BleedingDataGrid extends DataGrid {
10.   
11.   [Bindable]
12.   public var bottomBleed:int = 0;
13.   
14.   public function BleedingDataGrid() {
15.    super();
16.    this.offscreenExtraRowsOrColumns = 3;
17.   }
18.   
19.   override protected function createChildren():void {
20.    super.createChildren();
21.    this.listContent.blendMode = "layer";
22.   }
23.   
24.   override protected function updateDisplayList(
25.         unscaledWidth:Number, unscaledHeight:Number):void {
26.    var h:int = unscaledHeight - viewMetrics.top - viewMetrics.bottom;
27.    if (bottomBleed < 0) {
28.     // Reduced ScrollBar Mode
29.     super.updateDisplayList(unscaledWidth, unscaledHeight +
30.       ((h + bottomBleed <= minHeight) ? 0 : bottomBleed));
31.     maskShape.height = h;
32.    } else {
33.     // Bleeding Content Mode
34.     super.updateDisplayList(unscaledWidth, unscaledHeight);
35.     maskShape.height = (h <= minHeight) ? h : h + bottomBleed;
36.    }
37.   }
38.   
39.   override protected function adjustListContent(
40.         unscaledWidth:Number = -1, unscaledHeight:Number = -1):void {
41.    super.adjustListContent(unscaledWidth, unscaledHeight);
42.    var itemClass:Class = itemRenderer["generator"];
43.    var topOffset:int = listContent.topOffset;
44.    var child:DisplayObject, i:int;
45.    
46.    // Force top offscreen selectionLayer invisible
47.    for (i = 0 ; i < selectionLayer.numChildren ; ++i) {
48.     child = selectionLayer.getChildAt(i);
49.     //trace(child.y, listContent.y, headerHeight, topOffset);
50.     child.visible = (child.y < Math.abs(topOffset) && topOffset < 0) ? false : true;
51.    }
52.    
53.    // Force top offscreen ItemRenderer invisible
54.    for (i = 0 ; i < listContent.numChildren ; ++i) {
55.     child = listContent.getChildAt(i);
56.     if (child is itemClass) {
57.      // trace(child.y, listContent.y, headerHeight, topOffset);
58.      // Warning, use visible property will cause item position disorder!
59.      child.alpha = (child.y < Math.abs(topOffset) && topOffset < 0) ? 0 : 1;
60.      // Another way to make it invisible
61.      // child.scrollRect = (child.y < Math.abs(topOffset) && topOffset < 0) ? new Rectangle() : null;
62.     }
63.    }
64.   }
65.   
66.  }
67. }
68. // Ticore's Blog - http://ticore.blogspot.com

BleedingModeDataGrid.mxml：

view plain | copy to clipboard | print | ? | 

∙∙∙∙∙∙∙∙∙10∙∙∙∙∙∙∙∙20∙∙∙∙∙∙∙∙30∙∙∙∙∙∙∙∙40∙∙∙∙∙∙∙∙50∙∙∙∙∙∙∙∙60∙∙∙∙∙∙∙∙70∙∙∙∙∙∙∙∙80∙∙∙∙∙∙∙∙90∙∙∙∙∙∙∙∙100∙∙∙∙∙∙∙110∙∙∙∙∙∙∙120∙∙∙∙∙∙∙130∙∙∙∙∙∙∙140∙∙∙∙∙∙∙150

1. <?xml version="1.0"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12" backgroundColor="#F0F0F0">
3.  <mx:Panel title="BleendingDataGrid - Bleeding Content Mode" height="100%" width="100%" layout="absolute">
4.   <local:BleedingDataGrid xmlns:local="*" id="dg" width="100%" height="100%"
5.     dataProvider="{employees}" borderStyle="none" top="0" bottom="50" bottomBleed="50">
6.    <local:columns>
7.     <mx:DataGridColumn dataField="name" headerText="Name"/>
8.     <mx:DataGridColumn dataField="phone" headerText="Phone"/>
9.     <mx:DataGridColumn dataField="email" headerText="Email"/>
10.    </local:columns>
11.   </local:BleedingDataGrid>
12.   <mx:Canvas width="100%" height="50" bottom="0" backgroundSize="100%" alpha=".9"
13.     filters="{[new BevelFilter(4, 90, 0xFFFFFF, 1, 0x0, 1, 10, 10, 1.6, 2), new DropShadowFilter(3, 270, 0, 1, 0, 5, 0.3, 2)]}"
14.     backgroundImage="@Embed(source='../assets/BottomSkin.swf', symbol='assets.BottomSkin')">
15.    <mx:Button label="Button" right="10" verticalCenter="0" />
16.   </mx:Canvas>
17.   <mx:ControlBar paddingTop="5" paddingBottom="5" horizontalAlign="right">
18.    <mx:Text><mx:htmlText>
19.     <![CDATA[ <u><a href="http://ticore.blogspot.com">Ticore's Blog - http://ticore.blogspot.com</a></u> ]]>
20.    </mx:htmlText></mx:Text>
21.   </mx:ControlBar>
22.  </mx:Panel>
23.  
24.  <mx:XMLList id="employees">
25.   <employee>
26.    <name>Christina Coenraets</name>
27.    <phone>555-219-2270</phone>
28.    <email>[e-mail]</email>
29.   </employee>
30.   <employee>
31.    <name>Joanne Wall</name>
32.    <phone>555-219-2012</phone>
33.    <email>[e-mail]</email>
34.   </employee>
35.   <employee>
36.    <name>Maurice Smith</name>
37.    <phone>555-219-2012</phone>
38.    <email>[e-mail]</email>
39.   </employee>
40.   <employee>
41.    <name>Mary Jones</name>
42.    <phone>555-219-2000</phone>
43.    <email>[e-mail]</email>
44.   </employee>
45.   <employee>
46.    <name>Christina Coenraets</name>
47.    <phone>555-219-2270</phone>
48.    <email>[e-mail]</email>
49.   </employee>
50.   <employee>
51.    <name>Joanne Wall</name>
52.    <phone>555-219-2012</phone>
53.    <email>[e-mail]</email>
54.   </employee>
55.   <employee>
56.    <name>Maurice Smith</name>
57.    <phone>555-219-2012</phone>
58.    <email>[e-mail]</email>
59.   </employee>
60.   <employee>
61.    <name>Mary Jones</name>
62.    <phone>555-219-2000</phone>
63.    <email>[e-mail]</email>
64.   </employee>
65.   <employee>
66.    <name>Christina Coenraets</name>
67.    <phone>555-219-2270</phone>
68.    <email>[e-mail]</email>
69.   </employee>
70.   <employee>
71.    <name>Joanne Wall</name>
72.    <phone>555-219-2012</phone>
73.    <email>[e-mail]</email>
74.   </employee>
75.   <employee>
76.    <name>Maurice Smith</name>
77.    <phone>555-219-2012</phone>
78.    <email>[e-mail]</email>
79.   </employee>
80.   <employee>
81.    <name>Mary Jones</name>
82.    <phone>555-219-2000</phone>
83.    <email>[e-mail]</email>
84.   </employee>
85.  </mx:XMLList>
86. </mx:Application>

底部出血 DataGrid 線上範例： 

相關連結：
Flex 不規則底部形狀的 DataGrid

轉載請註明出處 http://ticore.blogspot.com/2008/12/bottom-bleeding-datagrid.html