You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2019/12/12 23:47:36 UTC

[royale-asjs] 35/42: tour-de-jewel: improve DataGrid example

This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git

commit 6f5e740898191816cbd8530c5570e950220d9e1e
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Dec 7 20:43:58 2019 +0100

    tour-de-jewel: improve DataGrid example
---
 .../src/main/royale/DataGridPlayGround.mxml        | 33 +++++++++++++---------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
index e479d64..230cb0e 100644
--- a/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
@@ -30,13 +30,13 @@ limitations under the License.
 
         private function dataGridChange(grid:DataGrid, output:Label) : void
 		{
-			output.text = "Clicked on row "+grid.selectedIndex;
+			output.text = "Clicked on row " + grid.selectedIndex;
 		}
 
-		private function refreshGrid():void
+		private function refreshGrid(grid:DataGrid):void
 		{
-			dataGrid.dataProvider = null;
-			dataGrid.dataProvider = (productModel as ProductModel).productList;
+			grid.dataProvider = null;
+			grid.dataProvider = (productModel as ProductModel).productList;
 		}
 		]]>
 	</fx:Script>
@@ -56,8 +56,8 @@ limitations under the License.
 				
 				<j:Label text="Basic configuration with no column widths"/>
 
-				<j:DataGrid localId="dataGrid" width="100%" height="100%" 
-					change="dataGridChange(event.target as DataGrid, output1)">
+				<j:DataGrid localId="datagrid" width="100%" height="100%" 
+					change="dataGridChange(event.target as DataGrid, datagrid_lb)">
 					<j:beads>
 						<js:ConstantBinding
 							sourceID="productModel"
@@ -65,15 +65,15 @@ limitations under the License.
 							destinationPropertyName="dataProvider" />
 					</j:beads>
 					<j:columns>
-						<j:DataGridColumn label="Images" dataField="image" itemRenderer="itemRenderers.ImageListItemRenderer"/>
+						<j:DataGridColumn label="Images" dataField="image" 
+											itemRenderer="itemRenderers.ImageListItemRenderer"/>
 						<j:DataGridColumn label="Title" dataField="title"/>
 						<j:DataGridColumn label="Sales" dataField="sales"/>
 					</j:columns>
 				</j:DataGrid>
 
-				<j:Label id="output1" text="output1"/>
-				<j:Button text="Refresh Grid" click="refreshGrid()"/>
-				<j:Label text="Refresh this grid after add or removing values"/>
+				<j:Label id="datagrid_lb" text="DagaGrid selection will be shown here"/>
+				<j:Button text="Refresh Grid" click="refreshGrid(datagrid)" emphasis="primary"/>
 			</j:Card>
 		</j:GridCell>
 		<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
@@ -82,15 +82,20 @@ limitations under the License.
 				
 				<j:Label text="Using specific column widths"/>
 
-				<j:DataGrid width="100%" height="100%" rowHeight="40"
-					emphasis="primary" change="dataGridChange(event.target as DataGrid, output1)"
+				<j:DataGrid localId="datagrid2" width="100%" height="100%" 
+					rowHeight="40" emphasis="primary" 
+					change="dataGridChange(event.target as DataGrid, datagrid2_lb)"
 					dataProvider="{productModel.productList}">
 					<j:columns>
-						<j:DataGridColumn label="Images" dataField="image" columnWidth="45" itemRenderer="itemRenderers.ImageListItemRenderer"/>
+						<j:DataGridColumn label="Images" dataField="image" columnWidth="90" 
+											itemRenderer="itemRenderers.ImageListItemRenderer"/>
 						<j:DataGridColumn label="Title" dataField="title" columnWidth="120" />
-						<j:DataGridColumn label="Sales" dataField="sales" columnWidth="50" />
+						<j:DataGridColumn label="Sales" dataField="sales" columnWidth="70" />
 					</j:columns>
 				</j:DataGrid>
+
+				<j:Label id="datagrid2_lb" text="DagaGrid selection will be shown here"/>
+				<j:Button text="Refresh Grid" click="refreshGrid(datagrid2)" emphasis="primary"/>
 			</j:Card>
 		</j:GridCell>
 	</j:Grid>