bugfix

bricks/bricks.js

@@ -73,17 +73,17 @@ bricks.widgetBuild = async function(desc, widget){
 	if (! widget){
 		widget = bricks.Body;
 	}
-	const klassname = desc.widgettype;
+	var klassname = desc.widgettype;
-	var base_url = null;
+	var base_url = widget.baseURI;
-	if (klassname == 'urlwidget'){
+	while (klassname == 'urlwidget'){
 		let url = absurl(desc.options.url, widget);
 		base_url = url;
 		let method = desc.options.method || 'GET';
 		let opts = desc.options.params || {};
 		var jcall = bricks.jcall;
-		desc = await jcall(url, { "method":method, "params":opts});
+		var desc1 = await jcall(url, { "method":method, "params":opts});
-	} else {
+		desc = desc1;
-		base_url = widget.baseURI;
+		klassname = desc.widgettype;
 	}
 	let klass = bricks.Factory.get(desc.widgettype);
 	if (! klass){

bricks/build.sh

@@ -5,7 +5,7 @@ SOURCES=" factory.js uitypesdef.js utils.js i18n.js widget.js \
 	input.js registerfunction.js button.js accordion.js \
 	tree.js multiple_state_image.js form.js message.js \
 	paging.js datagrid.js dataviewer.js \
-	miniform.js wterm.js "
+	miniform.js wterm.js dynamicaccordion.js "
 echo ${SOURCES}
 cat ${SOURCES} > ../dist/bricks.js
 # uglifyjs --compress --mangle -- ../dist/bricks.js > ../dist/bricks.min.js

bricks/css/bricks.css

@@ -1,8 +1,10 @@
 html,
 body {
 	height: 100%;
+	width: 100%;
 	margin: 0;
 	overflow: auto;
+	display: flex;
 }
 
 .griddata {
@@ -66,8 +68,7 @@ body {
 .vcontainer {
 	display: flex;
 	flex-direction: column;
-	height:100%;
+	// overflow:auto;
-	scroll:auto;
 }
 
 .vbox {
@@ -78,8 +79,7 @@ body {
 .hcontainer {
 	display: flex;
 	flex-direction: row;
-	width:100%;
+	// overflow:auto;
-	scroll:auto;
 }
 
 .hbox {
@@ -93,7 +93,7 @@ body {
 
 .filler, .hfiller, .vfiller {
 	flex: auto;
-	scroll:auto;
+	// overflow:auto;
 }
 
 .vfiller .vbox:last-child {
@@ -252,3 +252,22 @@ div[tooltip] {
 	display: flex;
 	flex-direction: column;
 }
+
+/* Flex 布局 */
+.accordion {
+	display: flex;
+	flex-direction: column;
+}
+.accordion-item {
+	border: 1px solid #ccc;
+	margin-bottom: 5px;
+}
+.accordion-item-header {
+	padding: 10px;
+	background-color: #f0f0f0;
+	cursor: pointer;
+}
+.accordion-item-content {
+	padding: 10px;
+	background-color: #ffffff;
+}

bricks/dataviewer.js

@@ -54,7 +54,7 @@ bricks.DataViewer = class extends bricks.VScrollPanel {
 		}
 	}
 	add_row = async function(row, direction){
-		var s = obj_fmtstr(row, this.viewer_tmpl);
+		var s = bricks.obj_fmtstr(row, this.viewer_tmpl);
 		var desc = JSON.parse(s);
 		var w = await bricks.widgetBuild(desc, this);
 		if (! w){

bricks/layout.js

@@ -72,9 +72,18 @@ bricks.VBox = class extends bricks.Layout {
 	}
 }
 
+bricks.Filler = class extends bricks.Layout {
+	constructor(options){
+		super(options);
+		this.set_style('flexGrow', 1);
+		this.set_style('overflow', 'auto');
+	}
+}
+
 bricks.VFiller = class extends bricks.Layout {
 	constructor(options){
 		super(options);
+		
 		this.set_css('vfiller');
 	}
 }
@@ -95,6 +104,7 @@ bricks.HFiller = class extends bricks.Layout {
 
 bricks.Factory.register('HBox', bricks.HBox);
 bricks.Factory.register('VBox', bricks.VBox);
+bricks.Factory.register('Filler', bricks.Filler);
 bricks.Factory.register('HFiller', bricks.HFiller);
 bricks.Factory.register('VFiller', bricks.VFiller);
 

bricks/tree.js

@@ -4,7 +4,6 @@ bricks.TreeNode = class extends bricks.VBox {
 		var opts = {
 			width:'100%',
 			height:'auto',
-			overflow:'hidden'
 		}
 		super(opts);
 		this.tree = tree;
@@ -17,8 +16,7 @@ bricks.TreeNode = class extends bricks.VBox {
 			this.params['type'] = this.data[this.tree.opts.typeField];
 		}
 		var n = new bricks.HBox({
-				height:'auto',
+				height:this.tree.row_height,
-				overflow:'hidden',
 				width:'100%'
 		})
 		n.dom_element.style.margin = bricks.app.charsize * 0.2;
@@ -27,7 +25,7 @@ bricks.TreeNode = class extends bricks.VBox {
 		this.node_widget = n;
 		this.create_node_content(n);
 		if (! this.data.is_leaf) {
-			this.container = new bricks.VBox({height:'auto', overflow:'hidden'});
+			this.container = new bricks.VBox({height:'auto'});
 			this.add_widget(this.container);
 			this.container.dom_element.style.marginLeft = bricks.app.charsize + 'px';
 			if (this.data.children){
@@ -155,7 +153,11 @@ bricks.Tree = class extends bricks.VScrollPanel {
 		this.multitype_tree = this.opts.multitype_tree||false;
 		this.selected_node = null;
 		this.create_toolbar();
-		this.container = this;
+		this.container = new bricks.VBox({
+			"width":"100%",
+			"height":"auto",
+			"overflow":"auto"
+		});
 		this.add_widget(this.container);
 		this.data_id = null;
 		if (this.opts.dataurl){

bricks/utils.js

@@ -136,7 +136,7 @@ var objget = function(obj, key, defval){
 	return defval;
 }
 
-var obj_fmtstr = function(obj, fmt){
+bricks.obj_fmtstr = function(obj, fmt){
 	/* fmt like 
 		'my name is ${name}, ${age=}'
 		'${name:}, ${age=}'
@@ -201,7 +201,7 @@ var archorize = function(ele,archor){
 		'x':x,
 		'y':y
 	}
-	var tsf = obj_fmtstr(o, 'translateY(-${y}) translateX(-${x})');
+	var tsf = bricks.obj_fmtstr(o, 'translateY(-${y}) translateX(-${x})');
 	console.log('archorize(): tsf=', tsf);
 	ele.style.transform = tsf;
 	ele.style.position = "absolute";
@@ -307,3 +307,18 @@ bricks.playResponseAudio = async function(response, target){
 	widget.set_url(url);
 	widget.play();
 }
+
+bricks.widgetBuildWithData = async function(desc_tmpl, from_widget, data){
+	if (!desc_tmpl){
+		console.log('bricks.widgetBuildWithData():data=', data, 'desc_tmpl=', desc_tmpl);
+	}
+	var s = bricks.obj_fmtstr(data, desc_tmpl);
+	var desc = JSON.parse(s);
+	var w = await bricks.widgetBuild(desc, from_widget);
+	if (! w){
+		console.log(desc, 'widgetBuild() failed...........');
+		return;
+	}
+	w.row_data = data;
+	return w;
+}

bricks/widget.js

@@ -181,6 +181,13 @@ bricks.JsWidget = class {
 	hide(){
 		this.dom_element.style.display = 'none'
 	}
+	toggle_hide(){
+		if (this.dom_element.style.display == 'none'){
+			this.show();
+		} else {
+			this.hide();
+		}
+	}
 	bind(eventname, handler){
 		this.dom_element.addEventListener(eventname, handler);
 	}

examples/tree.json

@@ -48,14 +48,42 @@
 							"id":13,
 							"text":"node13",
 							"is_leaf":true
-						}
-					]
 						},
 						{
-					"id":2,
+							"id":14,
-					"text":"node2",
+							"text":"node14",
-					"is_leaf":false,
+							"is_leaf":true
-					"children":[
+						},
+						{
+							"id":15,
+							"text":"node15",
+							"is_leaf":true
+						},
+						{
+							"id":16,
+							"text":"node16",
+							"is_leaf":true
+						},
+						{
+							"id":17,
+							"text":"node17",
+							"is_leaf":true
+						},
+						{
+							"id":18,
+							"text":"node18",
+							"is_leaf":true
+						},
+						{
+							"id":19,
+							"text":"node19",
+							"is_leaf":true
+						},
+						{
+							"id":20,
+							"text":"node20",
+							"is_leaf":true
+						},
 						{
 							"id":21,
 							"text":"node21",
@@ -70,14 +98,113 @@
 							"id":23,
 							"text":"node23",
 							"is_leaf":true
+						},
+						{
+							"id":24,
+							"text":"node24",
+							"is_leaf":true
+						},
+						{
+							"id":25,
+							"text":"node25",
+							"is_leaf":true
+						},
+						{
+							"id":26,
+							"text":"node26",
+							"is_leaf":true
+						},
+						{
+							"id":27,
+							"text":"node27",
+							"is_leaf":true
+						},
+						{
+							"id":28,
+							"text":"node28",
+							"is_leaf":true
+						},
+						{
+							"id":29,
+							"text":"node29",
+							"is_leaf":true
+						},
+						{
+							"id":30,
+							"text":"node30",
+							"is_leaf":true
+						},
+						{
+							"id":31,
+							"text":"node31",
+							"is_leaf":true
+						},
+						{
+							"id":32,
+							"text":"node32",
+							"is_leaf":true
+						},
+						{
+							"id":33,
+							"text":"node33",
+							"is_leaf":true
+						},
+						{
+							"id":34,
+							"text":"node34",
+							"is_leaf":true
+						},
+						{
+							"id":35,
+							"text":"node35",
+							"is_leaf":true
+						},
+						{
+							"id":36,
+							"text":"node36",
+							"is_leaf":true
+						}
+					]
+				},
+				{
+					"id":2,
+					"text":"node2",
+					"is_leaf":false,
+					"children":[
+						{
+							"id":221,
+							"text":"node221",
+							"is_leaf":true
+						},
+						{
+							"id":222,
+							"text":"node222",
+							"is_leaf":true
+						},
+						{
+							"id":223,
+							"text":"node223",
+							"is_leaf":true
 						}
 					]
 				},
 				{
 					"id":3,
 					"text":"node3",
+					"is_leaf":false,
+					"children":[
+						{
+							"id":"3-1",
+							"text":"node3112",
+							"is_leaf":true
+						},
+						{
+							"id":"3-2",
+							"text":"node313",
 							"is_leaf":true
 						}
 					]
 				}
+			]
+		}
 	}