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/31 18:29:45 UTC
[royale-asjs] branch develop updated: jewel-datagrid: final touches
to show different columns and renderer types aligning to left,
center and right
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
The following commit(s) were added to refs/heads/develop by this push:
new b856405 jewel-datagrid: final touches to show different columns and renderer types aligning to left, center and right
b856405 is described below
commit b856405a305f43443b094da8587dfb8f5817be26
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Dec 31 19:29:32 2019 +0100
jewel-datagrid: final touches to show different columns and renderer types aligning to left, center and right
---
.../src/main/royale/DataGridPlayGround.mxml | 29 +++++++++++++++++-----
.../itemRenderers/IconDataGridItemRenderer.mxml | 3 ++-
.../itemRenderers/ImageDataGridItemRenderer.mxml | 1 +
3 files changed, 26 insertions(+), 7 deletions(-)
diff --git a/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
index 8a8dd67..d867d43 100644
--- a/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
@@ -50,6 +50,17 @@ limitations under the License.
grid.dataProvider = data;
}
+ private function addData():void
+ {
+ var product:Product = new Product("xx100","New Item",44,10,"assets/smallbluerect.jpg");
+ productModel.productList.addItemAt(product, 2);
+ }
+
+ private function removeData():void
+ {
+ productModel.productList.removeItemAt(2);
+ }
+
[Bindable]
public var listModel:ListsModel = new ListsModel();
]]>
@@ -68,7 +79,8 @@ limitations under the License.
<j:Card>
<html:H3 text="Jewel DataGrid"/>
- <j:Label text="Basic configuration, default width, no column widths, no rowHeight"/>
+ <j:Label text="Basic configuration, default width, no column widths, no rowHeight. First column uses a custom renderer."
+ multiline="true"/>
<j:DataGrid localId="datagrid"
change="dataGridProductChange(event.target as DataGrid, datagrid_lb)">
@@ -93,7 +105,7 @@ limitations under the License.
<j:Card>
<html:H3 text="Jewel DataGrid"/>
- <j:Label text="Using specific column widths, rowHeight=54 and height=220, last column has right alignment"
+ <j:Label text="Using specific column widths, rowHeight=54 and height=220, first column uses a custom renderer and last column has right alignment"
multiline="true"/>
<j:DataGrid localId="datagrid2" height="205"
@@ -101,15 +113,20 @@ limitations under the License.
change="dataGridProductChange(event.target as DataGrid, datagrid2_lb)"
dataProvider="{productModel.productList}">
<j:columns>
- <j:DataGridColumn label="Images" dataField="image" columnWidth="90"
+ <j:DataGridColumn label="Images" dataField="image" columnWidth="100"
itemRenderer="itemRenderers.ImageDataGridItemRenderer"/>
- <j:DataGridColumn label="Title" dataField="title" columnWidth="120"/>
- <j:DataGridColumn label="Sales" dataField="sales" columnWidth="70" align="right"/>
+ <j:DataGridColumn label="Title" dataField="title" columnWidth="140"/>
+ <j:DataGridColumn label="Sales" dataField="sales" columnWidth="80" align="right"/>
</j:columns>
</j:DataGrid>
<j:Label id="datagrid2_lb" text="DataGrid selection will be shown here"/>
- <j:Button text="Refresh Grid" click="refreshGrid(datagrid2, (productModel as ProductModel).productList)" emphasis="primary"/>
+
+ <j:HGroup gap="3">
+ <j:Button text="Refresh Grid" click="refreshGrid(datagrid2, (productModel as ProductModel).productList)"/>
+ <j:Button text="Add Row" click="addData()" emphasis="primary"/>
+ <j:Button text="Remove Row" click="removeData()"/>
+ </j:HGroup>
</j:Card>
</j:GridCell>
</j:Grid>
diff --git a/examples/royale/TourDeJewel/src/main/royale/itemRenderers/IconDataGridItemRenderer.mxml b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/IconDataGridItemRenderer.mxml
index 0518a5f..564902f 100644
--- a/examples/royale/TourDeJewel/src/main/royale/itemRenderers/IconDataGridItemRenderer.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/IconDataGridItemRenderer.mxml
@@ -46,7 +46,8 @@ limitations under the License.
</fx:Script>
<j:beads>
- <js:ItemRendererDataBinding />
+ <js:ItemRendererDataBinding/>
+ <j:HorizontalCenteredLayout/>
</j:beads>
<js:FontIcon text="{iconList ? iconList.icon : ''}" material="true"
diff --git a/examples/royale/TourDeJewel/src/main/royale/itemRenderers/ImageDataGridItemRenderer.mxml b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/ImageDataGridItemRenderer.mxml
index bbad277..bc6be43 100644
--- a/examples/royale/TourDeJewel/src/main/royale/itemRenderers/ImageDataGridItemRenderer.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/ImageDataGridItemRenderer.mxml
@@ -36,6 +36,7 @@ limitations under the License.
<j:beads>
<js:ItemRendererDataBinding/>
+ <j:HorizontalCenteredLayout/>
</j:beads>
<j:Image src="{ product ? product.image : '' }"/>