bugfix
This commit is contained in:
yumoqing
parent
6a1dd1836e
commit
5f957fb1d2
@ -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}
|
||||||
|
|||||||
281
bricks/form.js
281
bricks/form.js
@ -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);
|
|
||||||
|
|||||||
@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user