This commit is contained in:
yumoqing 2024-03-06 14:04:55 +08:00
parent 6a1dd1836e
commit 5f957fb1d2
3 changed files with 107 additions and 182 deletions

View File

@ -3,7 +3,7 @@ SOURCES=" factory.js uitypesdef.js utils.js i18n.js widget.js \
jsoncall.js myoperator.js scroll.js menu.js modal.js \ jsoncall.js myoperator.js scroll.js menu.js modal.js \
markdown_viewer.js video.js audio.js toolbar.js tab.js \ markdown_viewer.js video.js audio.js toolbar.js tab.js \
input.js registerfunction.js button.js accordion.js \ input.js registerfunction.js button.js accordion.js \
tree.js multiple_state_image.js form.js message.js \ tree.js multiple_state_image.js dynamiccolumn.js form.js message.js \
paging.js datagrid.js dataviewer.js iframe.js \ paging.js datagrid.js dataviewer.js iframe.js \
miniform.js wterm.js dynamicaccordion.js " miniform.js wterm.js dynamicaccordion.js "
echo ${SOURCES} echo ${SOURCES}

View File

@ -6,16 +6,16 @@ bricks.FieldGroup = class extends bricks.VBox {
super(opts); super(opts);
} }
build_fields(form, parent, fields){ build_fields(form, parent, fields){
var dc = new DynColumn({}); var dc = new bricks.DynamicColumn({mobile_cols:2});
for (var i=0;i<=fields.length;i++){ for (var i=0;i<fields.length;i++){
if (fields[i].uitype == 'group'){ if (fields[i].uitype == 'group'){
if (dc.children.length>0){ if (dc.children.length>0){
parent.add_widget(dc); parent.add_widget(dc);
dc = new DynColumn({}); dc = new bricks.DynamicColumn({mobile_cols:2});
} }
build_fields(dc, fields[i].fields); this.build_fields(form, dc, fields[i].fields);
parent.add_widget(dc); parent.add_widget(dc);
dc = new DynColumn({}); dc = new bricks.DynamicColumn({mobile_cols:2});
} else { } else {
var box; var box;
if (! form.opts.input_layout || form.opts.input_layout == 'VBox'){ if (! form.opts.input_layout || form.opts.input_layout == 'VBox'){
@ -34,11 +34,7 @@ bricks.FieldGroup = class extends bricks.VBox {
var w = Input.factory(fields[i]); var w = Input.factory(fields[i]);
if (w){ if (w){
box.add_widget(w); box.add_widget(w);
this.name_inputs[fields[i].name] = w; form.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 { } else {
console.log(fields[i], 'createInput failed'); console.log(fields[i], 'createInput failed');
} }
@ -66,25 +62,105 @@ bricks.FormBody = class extends bricks.VScrollPanel {
] ]
} }
*/ */
constructor(opts){ constructor(form, opts){
opts.width = '100%'; opts.width = '100%';
opts.height = '100%'; opts.height = '100%';
super(opts); super(opts);
this.form = form;
this.name_inputs = {}; this.name_inputs = {};
this.max_item_height = 50; this.fg = new bricks.FieldGroup({});
this.dc = new DynamicColumn({}); this.fg.build_fields(this.form, this, form.opts.fields)
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);
// this.set_style('columnHeight', v);
v = this.opts.input_width || 400 + 'px';
console.log('v=', v);
this.set_style('columnWidth', v);
this.set_style('columnGap', '40px');
this.set_style('overflowX', 'none');
} }
render(){ }
bricks.Form = class extends bricks.VBox {
/*
{
title:
description:
notoolbar:False,
input_layout:"VBox" or "HBox", default is "VBox",
cols:
dataurl:
toolbar:
submit_url:
method:
fields
}
*/
constructor(opts){
opts.height = "100%";
opts.width = "100%";
opts.overflow = "auto";
super(opts);
this.name_inputs = {};
if (this.opts.title){
var t = new bricks.Title3({
otext:this.opts.title,
height:'auto',
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(this, 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%'});
widget.add_widget(box);
var tb_desc = this.opts.toolbar || {
width:"auto",
tools:[
{
icon:bricks_resource('imgs/submit.png'),
name:'submit',
label:'Submit'
},
{
icon:bricks_resource('imgs/cancel.png'),
name:'cancel',
label:'Cancel'
}
]
};
var tbw = new bricks.Toolbar(tb_desc);
tbw.bind('command', this.command_handle.bind(this));
box.add_widget(new bricks.HFiller());
box.add_widget(tbw);
box.add_widget(new bricks.HFiller());
}
command_handle(event){
var params = event.params;
console.log('Form(): click_handle() params=', params);
if (!params){
error('click_handle() get a null params');
return
}
if (params.name == 'submit'){
this.validation(this);
} else if (params.name == 'cancel'){
this.cancel();
} else if (params.name == 'reset'){
this.reset_data();
} else {
if (params.action){
f = bricks.buildEventHandler(this, params);
if (f) f(event);
}
}
}
cancel(){
this.dispatch('cancel');
} }
reset_data(){ reset_data(){
for (var name in this.name_inputs){ for (var name in this.name_inputs){
@ -127,164 +203,7 @@ bricks.FormBody = class extends bricks.VScrollPanel {
} }
} }
build_fields(){
var fields = this.opts.fields;
for (var i=0; i<fields.length; i++){
var box;
if (! this.opts.input_layout || this.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');
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);
var w = Input.factory(fields[i]);
if (w){
box.add_widget(w);
this.name_inputs[fields[i].name] = w;
if (this.max_item_height < box.height){
this.max_item_height = box.height;
}
console.log(fields[i].uitype, 'create Input ok');
} else {
console.log(fields[i], 'createInput failed');
}
}
}
}
bricks.Form = class extends bricks.VBox {
/*
{
title:
description:
notoolbar:False,
input_layout:"VBox" or "HBox", default is "VBox",
cols:
dataurl:
toolbar:
submit_url:
method:
fields
}
*/
constructor(opts){
opts.height = "100%";
opts.width = "100%";
opts.overflow = "auto";
super(opts);
if (this.opts.title){
var t = new bricks.Title3({
otext:this.opts.title,
height:'auto',
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%'});
widget.add_widget(box);
var tb_desc = this.opts.toolbar || {
width:"auto",
tools:[
{
icon:bricks_resource('imgs/submit.png'),
name:'submit',
label:'Submit'
},
{
icon:bricks_resource('imgs/cancel.png'),
name:'cancel',
label:'Cancel'
}
]
};
var tbw = new bricks.Toolbar(tb_desc);
tbw.bind('command', this.command_handle.bind(this));
box.add_widget(new bricks.HFiller());
box.add_widget(tbw);
box.add_widget(new bricks.HFiller());
}
command_handle(event){
var params = event.params;
console.log('Form(): click_handle() params=', params);
if (!params){
error('click_handle() get a null params');
return
}
if (params.name == 'submit'){
this.body.validation(this);
} else if (params.name == 'cancel'){
this.cancel();
} else if (params.name == 'reset'){
this.body.reset_data();
} else {
if (params.action){
f = bricks.buildEventHandler(this, params);
if (f) f(event);
}
}
}
getValue(){
return this.body.getValue();
}
cancel(){
this.dispatch('cancel');
}
} }
bricks.TabForm = class extends bricks.Form {
/*
options
{
css:
tab_long: 100%
tab_pos:"top"
items:[
{
name:
label:"tab1",
icon:
removable:
refresh:false,
content:{
"widgettype":...
}
}
]
}
{
...
fields:[
{
}
]
*/
constructor(opts){
super(opts);
}
build_fields(fields){
}
}
bricks.Factory.register('Form', bricks.Form); bricks.Factory.register('Form', bricks.Form);
// Factory.register('TabForm', TabForm);

View File

@ -190,6 +190,12 @@ bricks.JsWidget = class {
this.hide(); this.hide();
} }
} }
get_width(){
return this.dom_element.clientWidth;
}
get_height(){
return this.dom_element.clientHeight;
}
bind(eventname, handler){ bind(eventname, handler){
this.dom_element.addEventListener(eventname, handler); this.dom_element.addEventListener(eventname, handler);
} }