最近才发现有这么好的一个组件。。。
如果你正在对UI界面布局 发愁的话,不妨尝试下 PopUpButton 组件,可以解决你的很多烦恼:)
<mx:AdvancedDataGrid id="userDG" width="100%" height="100%" dataProvider="{modelLocator.userArrayCollection}" itemDoubleClick="editUser(event)" doubleClickEnabled="true" variableRowHeight="true"> <mx:columns> <mx:AdvancedDataGridColumn showDataTips="true" dataTipField="userName" headerText="User Name" dataField="userName" /> <mx:AdvancedDataGridColumn showDataTips="true" dataTipField="firstName" headerText="First Name" dataField="firstName" /> <mx:AdvancedDataGridColumn showDataTips="true" dataTipField="lastName" headerText="Last Name" dataField="lastName" /> <mx:AdvancedDataGridColumn width="160" headerText="PTO"> <mx:itemRenderer> <mx:Component> <mx:HBox> <mx:Script> <![CDATA[ import mx.formatters.DateFormatter; private function startTimeFunction(item:Object, column:DataGridColumn):String { var df:DateFormatter = new DateFormatter(); df.formatString = "YYYY-MM-DD"; return df.format(item.startDate); } private function endTimeFunction(item:Object, column:DataGridColumn):String { var df:DateFormatter = new DateFormatter(); df.formatString = "YYYY-MM-DD"; return df.format(item.endDate); } ]]> </mx:Script> <mx:PopUpButton id="popUpButton" label="Show PTO Record" open="outerDocument.findAllRelatedUserPTO()"> <mx:popUp> <mx:DataGrid dataProvider="{outerDocument.modelLocator.relatedUserPTOAC}"> <mx:columns> <mx:DataGridColumn headerText="Days" dataField="pto" /> <mx:DataGridColumn headerText="Start Time" labelFunction="startTimeFunction" /> <mx:DataGridColumn headerText="End Time" labelFunction="endTimeFunction" /> </mx:columns> </mx:DataGrid> </mx:popUp> </mx:PopUpButton> <mx:Button icon="@Embed('assets/pic/AddRecord.png')" toolTip="Add PTO Record" width="20" height="20" click="outerDocument.addPTO()" /> </mx:HBox> </mx:Component> </mx:itemRenderer> </mx:AdvancedDataGridColumn> </mx:columns> </mx:AdvancedDataGrid>
<mx:PopUpButton id="popUpButton" label="Show PTO Record" open="outerDocument.findAllRelatedUserPTO()"> <mx:popUp> <mx:DataGrid dataProvider="{outerDocument.modelLocator.relatedUserPTOAC}"> <mx:columns> <mx:DataGridColumn headerText="Days" dataField="pto" /> <mx:DataGridColumn headerText="Start Time" labelFunction="startTimeFunction" /> <mx:DataGridColumn headerText="End Time" labelFunction="endTimeFunction" /> </mx:columns> </mx:DataGrid> </mx:popUp> </mx:PopUpButton>