/**
|
@name Edo.containers.FormItem
|
@class
|
@typeName formitem
|
@description 带label左侧文本显示框的容器,提供表单布局方式
|
@extend Edo.containers.Box
|
@example
|
|
|
*/
|
Edo.containers.FormItem = function(){
|
Edo.containers.FormItem.superclass.constructor.call(this);
|
|
};
|
Edo.containers.FormItem.extend(Edo.containers.Box, {
|
/**
|
@name Edo.containers.FormItem#defaultHeight
|
@property
|
@default 22
|
*/
|
defaultHeight: 22,
|
/**
|
@name Edo.containers.FormItem#minHeight
|
@property
|
@default 22
|
*/
|
minHeight: 22,
|
/**
|
@name Edo.containers.FormItem#border
|
@property
|
@default [0,0,0,0]
|
*/
|
border: [0,0,0,0],
|
/**
|
@name Edo.containers.FormItem#padding
|
@property
|
@default [0,0,0,0]
|
*/
|
padding: [0,0,0,0],
|
|
/**
|
@name Edo.containers.FormItem#labelPosition
|
@property
|
@type {String}
|
@default left
|
@description label方位.top/right/bottom/left
|
*/
|
labelPosition: 'left',
|
/**
|
@name Edo.containers.FormItem#label
|
@property
|
@type {String}
|
@description 文本
|
*/
|
label: '',
|
/**
|
@name Edo.containers.FormItem#labelWidth
|
@property
|
@type {String}
|
@description 文本宽度
|
*/
|
labelWidth: 60,
|
labelHeight: 22,
|
/**
|
@name Edo.containers.FormItem#labelAlign
|
@property
|
@type {String}
|
@description 文本偏移
|
*/
|
labelAlign: 'left',
|
/**
|
@name Edo.containers.FormItem#labelCls
|
@property
|
@type {String}
|
@description 文本cls
|
*/
|
labelCls: '',
|
/**
|
@name Edo.containers.FormItem#labelStyle
|
@property
|
@type {String}
|
@description 文本style
|
*/
|
labelStyle: '',
|
|
elCls: 'e-formitem e-box e-div',
|
|
forId: '', //如果没有设置, 可以focus第一个child
|
|
measure: function(){
|
Edo.containers.FormItem.superclass.measure.call(this);
|
if(this.labelPosition=='left' || this.labelPosition == 'right'){
|
this.realWidth += this.labelWidth;
|
}else{
|
this.realHeight += this.labelHeight;
|
}
|
|
this.measureSize();
|
},
|
getLayoutBox: function(){
|
var box = Edo.containers.FormItem.superclass.getLayoutBox.call(this);
|
|
switch(this.labelPosition){
|
case "top":
|
box.y += this.labelHeight;
|
box.height -= this.labelHeight;
|
break;
|
case "right":
|
box.width -= this.labelWidth;
|
break;
|
case "bottom":
|
box.height -= this.labelHeight;
|
break;
|
case "left":
|
box.x += this.labelWidth;
|
box.width -= this.labelWidth;
|
break;
|
}
|
|
box.right = box.x + box.width;
|
box.bottom = box.y + box.height;
|
return box;
|
},
|
|
doLabel: function(){
|
if(this.el){
|
this.labelCt.innerHTML = '<div style="float:'+this.labelAlign+';">'+this.label+'</div>';
|
}
|
},
|
_setLabel: function(value){
|
if(this.label != value){
|
this.label = value;
|
this.doLabel();
|
}
|
},
|
_setLabelAlign: function(value){
|
if(this.labelAlign != value){
|
this.labelAlign = value;
|
this.doLabel();
|
}
|
},
|
_setLabelPosition: function(value){
|
if(this.labelPosition != value){
|
this.labelPosition = value;
|
this.relayout('labelPosition', value);
|
}
|
},
|
_setLabelStyle: function(value){
|
if(this.labelStyle != value){
|
this.labelStyle = value;
|
if(this.labelCt) Edo.util.Dom.applyStyles(this.labelCt, value);
|
}
|
},
|
_setLabelCls: function(value){
|
if(this.labelCls != value){
|
this.labelCls = value;
|
Edo.util.Dom.addClass(this.labelCt, this.labelCls);
|
}
|
},
|
_setLabelWidth: function(value){
|
value = parseInt(value);
|
if(isNaN(value)) throw new Error('labelWidth must is Number type');
|
if(this.labelWidth != value){
|
this.labelWidth = value;
|
|
this.relayout('labelWidth', value);
|
}
|
},
|
_setForId: function(value){
|
|
if(this.forId != value){
|
this.forId = value;
|
|
var cmp = Edo.getCmp(value);
|
if(cmp){
|
//点击事件,激发cmp的focus方法.
|
|
//获取cmp的focusEl,设置htmlFor
|
}else{
|
this.labelCt.dom.htmlFor = value;
|
}
|
}
|
},
|
syncSize: function(){ //设置组件尺寸,并设置容器子元素的所有尺寸!
|
Edo.containers.FormItem.superclass.syncSize.call(this);
|
|
var box = this.getLayoutBox();
|
var w = this.labelWidth, h = this.labelHeight;
|
var style = 'top:auto;right:auto;bottom:auto;left:auto;';
|
switch(this.labelPosition){
|
case "top":
|
w = box.width;
|
style += 'left:'+this.padding[3]+'px;top:'+this.padding[0]+'px';
|
break;
|
case "right":
|
h = box.height;
|
style += 'right:'+this.padding[1]+'px;top:'+this.padding[0]+'px';
|
break;
|
case "bottom":
|
w = box.width;
|
style += 'left:'+this.padding[3]+'px;bottom:'+this.padding[2]+'px';
|
break;
|
case "left":
|
h = box.height;
|
style += 'left:'+this.padding[3]+'px;top:'+this.padding[0]+'px';
|
break;
|
}
|
|
Edo.util.Dom.setSize(this.labelCt, w, h);
|
Edo.util.Dom.applyStyles(this.labelCt, style);
|
},
|
getInnerHtml: function(sb){
|
sb[sb.length] = '<label for="'+this.forId+'" class="e-formitem-label '+this.labelCls+'" style="overflow:hidden;text-align:'+this.labelAlign+';'+this.labelStyle+';">'+this.label+'</label>';
|
Edo.containers.Panel.superclass.getInnerHtml.call(this, sb);
|
},
|
createChildren: function(el){
|
Edo.containers.FormItem.superclass.createChildren.call(this, el);
|
this.scrollEl = this.el.lastChild;
|
|
this.labelCt = this.el.firstChild;
|
}
|
});
|
|
Edo.containers.FormItem.regType('formitem');
|
