Dies ist ein einfaches Beispiel für Layout-Möglichkeiten. Zusätzlich ist es möglich die einzelnen "Layout-Boxen" in der Größe zu verändern. Die entsprechende Größenangaben werden angezeigt. Die Größenangabe "fit" geht bei einer Größenveränderung verloren. Die relative Größenangabe mit "%" bleibt, auch bei einer Veränderung durch "resizen", relativ. Hier geschieht die Größenveränderung in "Echtzeit", im Gegensatz zu der "Lasso"-Methode der vorherigen Beispiele.

Beispiel:

Skript:

	app.newClass("layoutbox","movedock",function(param,app,superClass){

		this.classType="layoutbox";
		this.gfxBorder=true;
		this.nonPrototype=function(param,$class$)
		{
			return {
				selectable:{},
				resizable:{render:true}
			};
		}
		
		this.construct=function(param,$class$)
		{
			addEvent.call(this,"resize_resized",$this$.setText);
			addEvent.call(this,"resize_resize",$this$.setText);
			addEvent.call(this,"resize_windowresized",$this$.setText,"global");
		}
		
		this.setText=function(param,$class$)
		{
			getElement.call(this,"text").innerHTML=$this$.getText.call(this)
		}
		
		this.getText=function(param,$class$)
		{
			return "width:"+this.size.width+";height:"+this.size.height;
		}

		this.bodyOpenHTML=function(param,$class$)
		{
			return	[	
				{tagName:"DIV",$id$:"text",style:"height:auto;",children:[$this$.getText.call(this)]}
			]
		}

	})
	
	var row=app.newObject("layoutbox",{size:{width:"fit",height:"50%"}})
	row.addLastChild("layoutbox",{size:{position:"floatleft",width:"fit"}})
	row.addLastChild("layoutbox",{size:{position:"floatleft",width:"fit"}})
	row.addLastChild("layoutbox",{size:{position:"floatleft",width:"fit"}})

	var row2=app.newObject("layoutbox",{size:{width:"fit",height:"30%"}})
	row2.addLastChild("layoutbox",{size:{position:"floatleft",width:"50%"}})
	row2.addLastChild("layoutbox",{size:{position:"floatleft",width:"fit"}})
	row2.addLastChild("layoutbox",{size:{position:"floatleft",width:"fit"}})

	var row3=app.newObject("layoutbox",{size:{width:"fit",height:"fit"}})
	row3.addLastChild("layoutbox",{size:{position:"floatleft",width:"50%"}})
	row3.addLastChild("layoutbox",{size:{position:"floatleft",width:"30%"}})
	row3.addLastChild("layoutbox",{size:{position:"floatleft",width:"fit"}})
	

CSS:

	.app-layoutbox{
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border:2px solid #cccccc;
		margin:3px;
		padding:3px;
		min-width:10px;
	}

	.app-text{
		margin:5px;
		overflow:hidden;
	}