In diesem Beispel wird die Größenangabe per "fit" demonstriert. Der vorhandene Platz wir entsprechend den Zahlenverhältnissen, auf die einzelnen "Layout-Boxen" verteilt.
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:"auto",height:"fit"}})
row.addLastChild("layoutbox",{size:{position:"floatleft",width:"5fit"}})
row.addLastChild("layoutbox",{size:{position:"floatleft",width:"7fit"}})
row.addLastChild("layoutbox",{size:{position:"floatleft",width:"6fit"}})
var row2=app.newObject("layoutbox",{size:{width:"auto",height:"fit"}})
row2.addLastChild("layoutbox",{size:{position:"floatleft",width:"fit"}})
row2.addLastChild("layoutbox",{size:{position:"floatleft",width:"2fit"}})
row2.addLastChild("layoutbox",{size:{position:"floatleft",width:"3fit"}})
var row3=app.newObject("layoutbox",{size:{width:"auto",height:"fit"}})
row3.addLastChild("layoutbox",{size:{position:"floatleft",width:"300fit"}})
row3.addLastChild("layoutbox",{size:{position:"floatleft",width:"150fit"}})
row3.addLastChild("layoutbox",{size:{position:"floatleft",width:"200fit"}})
.app-layoutbox{
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border:2px solid #cccccc;
margin:3px;
padding:3px;
min-width:50px;
}
.app-text{
margin:5px;
overflow:hidden;
}