| <?xml version="1.0" encoding="utf-8"?> |
| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| --> |
| |
| <!-- |
| A simple combination of Spark DataGrid and Form that demonstrates using the DataGrid |
| selectedItem property to connect "master" and "detail" views. |
| |
| The value of the DataGrid's selectedItem property is the dataProvider item that's |
| currently selected. This example displays a Datagrid and a Form, and the Form |
| displays various aspects of the selectedItem. Elements of the Form bind to the |
| DataGrid's selectedItem, so when the selection changes the form is updated |
| automatically. In a configuration like this, the DataGrid is the "master" view |
| and the Form is the "detail" view. |
| |
| The selectedItem bindings are not valid unless there's a non-null selection, so |
| we've specified requireSelection="true" for the DataGrid. Note also that we've |
| used a CurrencyFormatter to convert Numbers that represent prices, to nicely formatted |
| and localized strings. |
| |
| --> |
| |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <fx:Declarations> |
| <s:CurrencyFormatter id="cf" useCurrencySymbol="true"/> |
| </fx:Declarations> |
| |
| <s:Panel title='Spark DataGrid Control Example demonstrates the use of selectedItem to connect "master" and "detail" views' |
| width="75%" height="75%" |
| horizontalCenter="0" verticalCenter="0"> |
| |
| <s:VGroup horizontalAlign="justify" left="5" right="5" top="5" bottom="5"> |
| <s:DataGrid id="dataGrid" requestedRowCount="4" requireSelection="true"> |
| <s:columns> |
| <s:ArrayList> |
| <s:GridColumn dataField="name" headerText="Name"/> |
| <s:GridColumn dataField="price" headerText="Price"/> |
| </s:ArrayList> |
| </s:columns> |
| |
| <s:ArrayCollection> |
| <s:DataItem key="1000" name="Abrasive" price="100.11" call="false"/> |
| <s:DataItem key="1001" name="Brush" price="110.01" call="true"/> |
| <s:DataItem key="1002" name="Clamp" price="120.02" call="false"/> |
| <s:DataItem key="1003" name="Drill" price="130.03" call="true"/> |
| <s:DataItem key="1004" name="Epoxy" price="140.04" call="false"/> |
| <s:DataItem key="1005" name="File" price="150.05" call="true"/> |
| <s:DataItem key="1006" name="Gouge" price="160.06" call="false"/> |
| <s:DataItem key="1007" name="Hook" price="170.07" call="true"/> |
| <s:DataItem key="1008" name="Ink" price="180.08" call="false"/> |
| <s:DataItem key="1009" name="Jack" price="190.09" call="true"/> |
| </s:ArrayCollection> |
| </s:DataGrid> |
| |
| <s:Scroller height="100%"> |
| <s:Group> |
| <s:Form width="100%" height="100%"> |
| <s:FormHeading label="Selected Product Detail" textAlign="center"/> |
| <s:FormItem label="Product Key:"> |
| <s:Label text="{dataGrid.selectedItem.key}"/> |
| </s:FormItem> |
| <s:FormItem label="Product Name:"> |
| <s:Label text="{dataGrid.selectedItem.name}"/> |
| </s:FormItem> |
| <s:FormItem label="Product Price:"> |
| <s:HGroup verticalAlign="baseline"> |
| <s:Label text="{cf.format(dataGrid.selectedItem.price)}"/> |
| <s:Label text="Tax: {cf.format(dataGrid.selectedItem.price * 0.0975)}"/> |
| <s:Label text="Total: {cf.format(dataGrid.selectedItem.price * 1.0975)}"/> |
| </s:HGroup> |
| </s:FormItem> |
| <s:FormItem label="Followup Needed:" > |
| <s:HGroup verticalAlign="baseline"> |
| <s:Label text="{(dataGrid.selectedItem.call) ? 'Yes' : 'No'}"/> |
| <s:Button label="Call Now" |
| enabled="{dataGrid.selectedItem.call}" |
| click="dataGrid.selectedItem.call=false"/> |
| </s:HGroup> |
| </s:FormItem> |
| </s:Form> |
| </s:Group> |
| </s:Scroller> |
| </s:VGroup> |
| </s:Panel> |
| </s:Application> |