/*
|
实现外观边框和内间距.
|
border
|
padding
|
*/
|
|
/**
|
@name Edo.containers.Box
|
@class
|
@typeName box
|
@description 盒容器,实现边框border和内间距padding
|
@extend Edo.containers.Container
|
@example
|
*/
|
Edo.containers.Box = function(){
|
Edo.containers.Box.superclass.constructor.call(this);
|
};
|
Edo.containers.Box.extend(Edo.containers.Container, {
|
/**
|
@name Edo.containers.Application#defaultWidth
|
@property
|
@default 60
|
*/
|
defaultWidth: 60,
|
/**
|
@name Edo.containers.Application#defaultHeight
|
@property
|
@default 22
|
*/
|
defaultHeight: 22,
|
/**
|
@name Edo.containers.Box#border
|
@property
|
@type [top, right, bottom, left]
|
@default [1,1,1,1]
|
@description 边框线宽度
|
*/
|
border: [1,1,1,1],
|
/**
|
@name Edo.containers.Box#padding
|
@property
|
@type [top, right, bottom, left]
|
@default [1,1,1,1]
|
@description 内边距宽度
|
*/
|
padding: [5,5,5,5],
|
|
elCls: 'e-box',
|
/**
|
@name Edo.containers.Box#bodyStyle
|
@property
|
@type String
|
@description body的style
|
*/
|
bodyStyle: '', //bodyStyle
|
/**
|
@name Edo.containers.Box#bodyCls
|
@property
|
@type String
|
@description body的cls
|
*/
|
bodyCls: '',
|
|
getInnerHtml: function(sb){
|
var box = this._getBox();
|
var lb = this.getLayoutBox(box);
|
|
sb[sb.length] = '<div class="e-box-scrollct ';
|
sb[sb.length] = this.bodyCls;
|
sb[sb.length] = '" style="';
|
sb[sb.length] = this.bodyStyle;
|
sb[sb.length] = ';width:';
|
sb[sb.length] = lb.width;
|
sb[sb.length] = 'px;height:';
|
sb[sb.length] = lb.height;
|
sb[sb.length] = 'px;margin:0px;padding:0px;border:0px;position:absolute;left:';
|
|
sb[sb.length] = lb.x - box.x - this.border[3];
|
sb[sb.length] = 'px;top:';
|
sb[sb.length] = lb.y - box.y - this.border[0];
|
sb[sb.length] = 'px;';
|
sb[sb.length] = ';'+this.doScrollPolicy();
|
|
|
sb[sb.length] = '"></div>';
|
},
|
|
createHtml: function(w, h, appendArray){
|
this._getBPStyle();
|
|
return Edo.containers.Box.superclass.createHtml.call(this, w, h, appendArray);
|
},
|
|
createChildren: function(el){
|
Edo.containers.Box.superclass.createChildren.call(this, el);
|
this.scrollEl = this.el.firstChild; //这个操作很耗时 1000个box生成,要耗掉150左右毫秒
|
},
|
measure: function(){
|
Edo.containers.Box.superclass.measure.call(this);
|
|
var b = this.border;
|
var p = this.padding;
|
//1)给得到的布局参考值加上所有的偏移
|
this.realWidth += b[3] + p[3] + b[1] + p[1]; //如果不是绝对设置的,则需要加上偏移
|
this.realHeight += b[0] + p[0] + b[2] + p[2];
|
|
//2)确保操作...
|
this.measureSize();
|
},
|
getLayoutBox: function(box){ //获取容器的布局尺寸!!!要减掉偏移!!!
|
var b = this.border;
|
var p = this.padding;
|
|
box = box || Edo.containers.Box.superclass.getLayoutBox.call(this);
|
box.width = box.width - b[3] - p[3] - b[1] - p[1];
|
box.height = box.height - b[0] - p[0] - b[2] - p[2];
|
box.x += b[3] + p[3];
|
box.y += b[0] + p[0];
|
box.right = box.x + box.width;
|
box.bottom = box.y + box.height;
|
return box; //这里的逻辑没问题!!!
|
},
|
syncSize: function(){
|
var w = this.realWidth, h = this.realHeight;
|
|
this.domWidth = w;
|
this.domHeight = h;
|
Edo.containers.Box.superclass.syncSize.call(this);
|
|
},
|
_setBodyCls: function(value){
|
if(this.bodyCls != value){
|
this.bodyCls = value;
|
if(this.el){
|
Edo.util.Dom.addClass(this.scrollEl, value);
|
}
|
this.changeProperty('bodyCls', value);
|
}
|
},
|
_setBodyStyle: function(value){
|
if(this.bodyStyle != value){
|
this.bodyStyle = value;
|
if(this.el){
|
Edo.util.Dom.applyStyles(this.scrollEl, value);
|
}
|
this.changeProperty('bodyStyle', value);
|
}
|
},
|
_getBPStyle: function(){
|
var b = this.border;//, p = this.padding;
|
var style = 'border-left-width:'+ b[3]+'px;border-top-width:'+ b[0]+'px;border-right-width:'+ b[1]+'px;border-bottom-width:'+ b[2] + 'px;';
|
//style += 'padding-left:'+ p[0]+'px;padding-top:'+ p[1]+'px;padding-right:'+ p[2]+'px;padding-bottom:'+ p[3]+'px;';
|
this.addStyle(style);
|
},
|
_setBorder: function(value){
|
value = this._toArray(value);
|
if(!this._checkTheSame(this.border, value)){
|
this.border = value;
|
this.addStyle(this._getBPStyle());
|
this.relayout('border', value);
|
this.changeProperty('border', value);
|
}
|
},
|
_setPadding: function(value){
|
value = this._toArray(value);
|
if(!this._checkTheSame(this.padding, value)){
|
|
this.padding = value;
|
this.addStyle(this._getBPStyle());
|
|
this.relayout('padding', value);
|
this.changeProperty('padding', value);
|
}
|
}
|
});
|
Edo.containers.Box.regType('box');
|
