便捷的 PopUpButton 组件

最新推荐文章于 2024-04-03 09:32:26 发布

最新推荐文章于 2024-04-03 09:32:26 发布 · 280 阅读

文章标签：

#UI

flex 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一种实用的UI组件——PopUpButton，并通过实例展示了如何使用该组件来改善用户界面布局，特别是在显示复杂数据如PTO记录时的灵活性与便利性。

最近才发现有这么好的一个组件。。。

如果你正在对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>