TileView: Move to use instance and option method for changing props

- Workaround on recalculation of height which causes do not wrap for TileView on initial opening (reference #67)
Moonshine-IDE · Dec 4, 2024 · 8dad797 · 8dad797
1 parent ae26ede
commit 8dad797
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/...rtal_Royale/views/modules/DocumentationForm/DocumentationFormViews/DocumentationForm.mxml b/...rtal_Royale/views/modules/DocumentationForm/DocumentationFormViews/DocumentationForm.mxml
@@ -161,6 +161,7 @@
         {
         		breadcrump.buildBreadcrump(breadcrump.model[tileGettingStarted.selectedItem.id]);
     		}
+    		tileGettingStarted.direction="vertical";
       //  this.dg.refreshCurrentDataProvider();
     }
 
@@ -307,8 +308,8 @@
   					percentWidth="100" baseItemWidth="245" baseItemHeight="300" itemMargin="5" direction="vertical" 
   					itemRenderer="Super.Human.Portal_Royale.views.renderers.DocumentationTileRenderer"
   					includeIn="dataGridState" clickItemTileView="onDocClickItem(event)" />
-<tileView:TileView localId="tileGettingStarted" className="tileViewJS" direction="vertical"
-						percentWidth="100" minWidth="350" baseItemHeight="360" baseItemWidth="300" itemMargin="10" 
+<tileView:TileView localId="tileGettingStarted" className="tileViewJS" 
+				   minWidth="350" minHeight="200" baseItemHeight="360" baseItemWidth="300" itemMargin="10" 
 						dataProvider="{proxy.mainItems}" includeIn="startview" 
 						itemRenderer="Super.Human.Portal_Royale.views.renderers.CategoryTileRenderer"
 						visible="{proxy.mainItems &amp;&amp; proxy.mainItems.length > 0}"/>

diff --git a/...src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/beads/TileViewView.as b/...src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/beads/TileViewView.as
@@ -20,14 +20,17 @@ package classes.com.devexpress.js.tileView.beads
 		}
 
 		private var _model:ITileViewModel;
+		private var _tileInstance:Object;
 
 		override public function set strand(value:IStrand):void
 	    {
 	        super.strand = value;
 
 	        this._model = (host as TileView).model as ITileViewModel;
 
-	        window["$"](host.element).dxTileView({
+	        window["$"](host.element).dxTileView({});
+    			_tileInstance = window["$"](host.element).dxTileView("instance");
+	        _tileInstance.option({
 	        		onItemClick: function onItemClick(event:Object):void {
 	        			host["selectedIndex"] = event.itemIndex;
 	        			host["selectedItem"] = event.itemData;
@@ -37,6 +40,7 @@ package classes.com.devexpress.js.tileView.beads
 				onDisposing: function onDisposing(element:Object, component:Object):void {
 					var e:Object = element;
 				}});
+
 	        this._model.addEventListener("dataProviderChanged", handleDataProviderChanged);
 	        this._model.addEventListener("itemRendererChanged", handleItemRendererChanged);
 	        this._model.addEventListener("optionsChanged", handleOptionsChanged);
@@ -78,22 +82,23 @@ package classes.com.devexpress.js.tileView.beads
 				dp = (_model as TileViewModel).dataSource;
 			}
 
+			_tileInstance.beginUpdate();
 			this.optionsChanged();
 			this.itemRendererChanged();
 
-	        window["$"](host.element).dxTileView({dataSource: dp});
+	        _tileInstance.option({dataSource: dp});
+	        _tileInstance.endUpdate();
 		}
 
 		private function itemRendererChanged():void
 		{
-			window["$"](host.element).dxTileView({
+			_tileInstance.option({
 				itemTemplate: function itemTemplate(itemData:Object, itemIndex:int, itemElement:Object):void {
 					var renderer:Object = _model.itemRenderer.newInstance();
 						renderer.index = itemIndex;
 
 					var div:View = new View();
-						div.percentHeight = 100;
-
+
 					renderer.data = itemData;
 					renderer.addEventListener(MouseEvent.DOUBLE_CLICK, function onItemDoubleClick(event:MouseEvent):void {
 						host.dispatchEvent(new TileViewEvent(TileViewEvent.DOUBLE_CLICK_ITEM, _model.selectedItem, _model.selectedIndex));
@@ -105,15 +110,15 @@ package classes.com.devexpress.js.tileView.beads
 
 		private function optionsChanged():void
 		{
-			window["$"](host.element).dxTileView({
+			_tileInstance.option({
 				showScrollbar: _model.showScrollbar,
-				direction: _model.direction,
 				height: "100%",
-				width: "100%",
+				width: "100%",				
 				baseItemWidth: _model.baseItemWidth,
 				baseItemHeight: _model.baseItemHeight,
 				itemMargin: _model.itemMargin,
-				noDataText: _model.noDataText
+				noDataText: _model.noDataText,
+				direction: _model.direction
 			});
 		}
 	}

diff --git a/...apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/beads/models/TileViewModel.as b/...apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/beads/models/TileViewModel.as
@@ -63,7 +63,7 @@ package classes.com.devexpress.js.tileView.beads.models
 			}
 		}
 
-		private var _direction:String;
+		private var _direction:String = "horizontal";
 
 		public function get direction():String
 		{
-Original file line number
+Diff line change
@@ Expand Up / @@ -63,7 +63,7 @@ package classes.com.devexpress.js.tileView.beads.models @@
     			}
     		}
-    		private var _direction:String;
+    		private var _direction:String = "horizontal";
     		public function get direction():String
     		{
@@ Expand Down @@