bugfix

bricks/form.js

@@ -1,5 +1,54 @@
 var bricks = window.bricks || {};
 
+bricks.FieldGroup = class extends bricks.VBox {
+	constructor(opts){
+		opts.leftMargin = '10px';
+		super(opts);
+	}
+	build_fields(form, parent, fields){
+		var dc = new DynColumn({});
+		for (var i=0;i<=fields.length;i++){
+			if (fields[i].uitype == 'group'){
+				if (dc.children.length>0){
+					parent.add_widget(dc);
+					dc = new DynColumn({});
+				}
+				build_fields(dc, fields[i].fields);
+				parent.add_widget(dc);
+				dc = new DynColumn({});
+			} else {
+				var box;
+				if (! form.opts.input_layout || form.opts.input_layout == 'VBox'){
+					box = new bricks.VBox({height:'auto',overflow:'none'});
+				} else {
+					box = new bricks.HBox({height:'auto',overflow:'none'});
+				}
+				box.set_css('inputbox');
+				dc.add_widget(box);
+				var txt = new bricks.Text({
+						otext:fields[i].label||fields[i].name, 
+						dynsize:true,
+						height:'auto',
+						i18n:true});
+				box.add_widget(txt);
+				var w = Input.factory(fields[i]);
+				if (w){
+					box.add_widget(w);
+					this.name_inputs[fields[i].name] = w;
+					if (form.max_item_height < box.height){
+						form.max_item_height = box.height;
+					}
+					console.log(fields[i].uitype, 'create Input ok');
+				} else {
+					console.log(fields[i], 'createInput failed');
+				}
+			}
+		}
+		if (dc.children.length > 0){
+			parent.add_widget(dc);
+		}
+	}
+}
 bricks.FormBody = class extends bricks.VScrollPanel {
 	/*
 	{
@@ -19,16 +68,12 @@ bricks.FormBody = class extends bricks.VScrollPanel {
 	*/
 	constructor(opts){
 		opts.width = '100%';
-		opts.scrollY = 'scroll';
+		opts.height = '100%';
 		super(opts);
 		this.name_inputs = {};
-		this.form_body = new bricks.Layout({width:'100%',
-							height:"100%",
-							overflow:'auto' 
-							});
-		this.add_widget(this.form_body);
 		this.max_item_height = 50;
-		this.build_fields();
+		this.dc = new DynamicColumn({});
+		this.dc.build_field(this.form, this, form.fields)
 		console.log('max_item_height=', this.max_item_height);
 		var v = this.max_item_height + 'px';
 		console.log('v=', v);
@@ -38,8 +83,8 @@ bricks.FormBody = class extends bricks.VScrollPanel {
 		this.set_style('columnWidth', v);
 		this.set_style('columnGap', '40px');
 		this.set_style('overflowX', 'none');
-		console.log('v=============================', v);
+	}
-
+	render(){
 	}
 	reset_data(){
 		for (var name in this.name_inputs){
@@ -92,9 +137,10 @@ bricks.FormBody = class extends bricks.VScrollPanel {
 				box = new bricks.HBox({height:'auto',overflow:'none'});
 			}
 			box.set_css('inputbox');
-			this.form_body.add_widget(box);
+			this.add_widget(box);
 			var txt = new bricks.Text({
 					otext:fields[i].label||fields[i].name, 
+					dynsize:true,
 					height:'auto',
 					i18n:true});
 			box.add_widget(txt);
@@ -128,18 +174,10 @@ bricks.Form = class extends bricks.VBox {
 	}
 	*/
 	constructor(opts){
+		opts.height = "100%";
+		opts.width = "100%";
+		opts.overflow = "auto";
 		super(opts);
-		if (this.opts.description){
-			var d = new bricks.Text({
-					otext:this.opts.description,
-					height:'auto',
-					i18n:true});
-			this.add_widget(d);
-		}
-		this.body = new bricks.FormBody(opts);
-		this.add_widget(this.body);
-		if (! opts.notoolbar)
-			this.build_toolbar(this);
 		if (this.opts.title){
 			var t = new bricks.Title3({
 					otext:this.opts.title,
@@ -147,6 +185,19 @@ bricks.Form = class extends bricks.VBox {
 					i18n:true});
 			this.add_widget(t, 0);
 		}
+		if (this.opts.description){
+			var d = new bricks.Text({
+					otext:this.opts.description,
+					height:'auto',
+					i18n:true});
+			this.add_widget(d);
+		}
+		var filler = new bricks.Filler({});
+		this.add_widget(filler);
+		this.body = new bricks.FormBody(opts);
+		filler.add_widget(this.body);
+		if (! opts.notoolbar)
+			this.build_toolbar(this);
 	}
 	build_toolbar(widget){
 		var box = new bricks.HBox({height:'auto', width:'100%'});

bricks/input.js

@@ -175,6 +175,7 @@ bricks.UiPassword =class extends bricks.UiStr {
 	}
 	*/
 	constructor(opts){
+		opts.dynsize = opts.dynsize || true;
 		super(opts);
 		this.dom_element.type = 'password';
 	}

bricks/video.js

@@ -14,9 +14,9 @@ bricks.VideoBody = class extends bricks.Layout {
 	}
 	create(){
 		var e;
-		e = document.createElement('video-js');
+		e = document.createElement('video');
-		e.controls = true;
 		this.dom_element = e;
+		e.controls = true;
 	}
 }
 bricks.Video = class extends bricks.Layout {
@@ -65,6 +65,7 @@ bricks.Video = class extends bricks.Layout {
 	}
 	create_player(){
 		this.player = videojs(this.video_body.dom_element, {
+			controls:true,
 			textTrackSettings: false
 		});
 		

examples/form.ui

@@ -50,6 +50,10 @@
 				}
 			]
 		},
+		{
+			"widgettype":"Filler",
+			"options":{"overflow":"auto"},
+			"subwidgets":[
 		{
 			"widgettype":"Form",
 			"options":{
@@ -148,4 +152,6 @@
 			}
 		}
 			]
+		}
+	]
 }