/*
|
关闭
|
最大化(包含还原) toggle逻辑
|
最小化(包含还原)
|
伸缩(上下,左右) 配合父容器的布局,改变伸缩逻辑和图片样式.
|
伸缩的时候,重要的是控制好minWidth/minHeight,在父容器内进行一个比较小的占位
|
当确定为collapse的时候,不要对子元素进行doLayout(提高性能!)
|
|
*/
|
|
/**
|
@name Edo.containers.Panel
|
@class
|
@typeName panel
|
@description 实现header头容器
|
@extend Edo.containers.Box
|
@example
|
|
|
*/
|
Edo.containers.Panel = function(){
|
Edo.containers.Panel.superclass.constructor.call(this);
|
|
//titleclick
|
};
|
Edo.containers.Panel.extend(Edo.containers.Box,{
|
/**
|
@name Edo.containers.Panel#collapseHeight
|
@property
|
@default 26
|
*/
|
collapseHeight: 26,
|
/**
|
@name Edo.containers.Panel#collapseWidth
|
@property
|
@default 26
|
*/
|
collapseWidth: 26,
|
/**
|
@name Edo.containers.Panel#minHeight
|
@property
|
@default 22
|
*/
|
minHeight: 22, //当折叠后,此容器不调用measure和doLayout,不操作子元素
|
/**
|
@name Edo.containers.Panel#headerHeight
|
@property
|
@type Number
|
@default 25
|
@description 头部高度
|
*/
|
headerHeight: 25,
|
/**
|
@name Edo.containers.Panel#title
|
@property
|
@type String
|
@description 标题文本
|
*/
|
title: '',
|
/**
|
@name Edo.containers.Panel#titleIcon
|
@property
|
@type String
|
@description 标题图标
|
*/
|
titleIcon: '',
|
|
titleCollapse: false,
|
|
titlebar: null,
|
|
elCls: 'e-panel e-box e-div',
|
|
getInnerHtml: function(sb){
|
var h = this.headerHeight;
|
if(!isBorderBox){
|
h -= 1;
|
}
|
sb[sb.length] = '<div class="e-panel-header" style="height:'+h+'px;line-height:'+h+'px;"><div class="e-panel-title">'+this.doTitle()+'</div><div class="e-titlebar"></div></div>';
|
Edo.containers.Panel.superclass.getInnerHtml.call(this, sb);
|
},
|
initEvents: function(){
|
Edo.containers.Panel.superclass.initEvents.call(this);
|
|
this.on('click', this._onClick, this);
|
},
|
createChildren: function(el){
|
Edo.containers.Panel.superclass.createChildren.call(this, el);
|
this.scrollEl = this.el.lastChild;
|
|
this.headerCt = this.el.firstChild;
|
this.titleCt = this.headerCt.firstChild;
|
this.titlebarCt = this.headerCt.lastChild;
|
|
if(this.titlebar){
|
this.titlebar.render(this.titlebarCt);
|
}
|
},
|
measure: function(){
|
Edo.containers.Panel.superclass.measure.call(this);
|
this.realHeight += this.headerHeight;
|
this.measureSize();
|
},
|
getLayoutBox: function(){
|
var box = Edo.containers.Panel.superclass.getLayoutBox.call(this);
|
var hd = this.headerHeight;
|
box.y += hd;
|
box.height -= hd;
|
|
box.right = box.x + box.width;
|
box.bottom = box.y + box.height;
|
return box;
|
},
|
doTitle: function(){
|
var title = "";
|
if(this.titleIcon) title += '<div style="float:left;margin-right:3px;" class="e-panel-titleicon '+this.titleIcon+'"></div>';
|
if(this.title) title += '<div style="float:left;">'+this.title+'</div>';
|
if(this.titleCt) this.titleCt.innerHTML = title;
|
return title;
|
},
|
_setTitle: function(value){
|
if(this.title != value){
|
this.title = value;
|
this.doTitle();
|
this.changeProperty('title', value);
|
}
|
},
|
_setTitleIcon: function(value){
|
if(this.titleIcon != value){
|
this.titleIcon = value;
|
this.doTitle();
|
this.changeProperty('titleIcon', value);
|
}
|
},
|
_setHeaderHeight: function(value){
|
value = parseInt(value);
|
if(isNaN(value)) throw new Error('headerHeight must is Number type');
|
if(this.headerHeight != value){
|
this.headerHeight = value;
|
|
this.collapseHeight = value + this.border[0];
|
this.relayout('headerHeight', value);
|
}
|
},
|
syncSize: function(){ //设置组件尺寸,并设置容器子元素的所有尺寸!
|
var h = this.headerHeight;
|
if(!isBorderBox){
|
h -= 1;
|
}
|
if(this.el){
|
this.headerCt.style.height = h + 'px';
|
this.headerCt.style.lineHeight = h + 'px';
|
}
|
Edo.containers.Panel.superclass.syncSize.call(this);
|
},
|
_setTitlebar: function(value){
|
if(!(value instanceof Array)) value = [value];
|
value.each(function(o){
|
var c = o.cls;
|
Edo.apply(o,{
|
type: 'button',
|
simpleButton: true,
|
height: 15,
|
width: 15,
|
minHeight: 15,
|
minWidth: 15,
|
cls: c,
|
overCls: o.overCls || c+'-over',
|
focusCls: o.focusCls || c+'-focus',
|
pressedCls: o.pressedCls || c+'-pressed'
|
});
|
});
|
|
if(this.titlebar){
|
this.titlebar.destory();
|
}
|
|
this.titlebar = Edo.create({
|
type: 'ct',
|
layout: 'horizontal',
|
horizontalGap: 1,
|
height: 15,
|
children: value,
|
onclick: function(e){
|
e.stop();
|
}
|
});
|
this.titlebar.owner = this;
|
|
if(this.titlebarCt){
|
this.titlebar.render(this.titlebarCt);
|
}
|
},
|
_onClick: function(e){
|
if(e.within(this.headerCt) && this.titleCollapse){
|
this.toggle();
|
}
|
}
|
|
//// setCollapseProperty: function(value){
|
//// this.collapseProperty = value;
|
//// if(this.el){
|
//// if(value == 'width'){
|
//// //e-collapse-width
|
//// Edo.util.Dom.addClass(this.titleCt, 'e-collapse-width');
|
//// Edo.util.Dom.addClass(this.scrollEl, 'e-collapse-width');
|
//// }else{
|
//// Edo.util.Dom.removeClass(this.titleCt, 'e-collapse-width');
|
//// Edo.util.Dom.removeClass(this.scrollEl, 'e-collapse-width');
|
//// }
|
//// }
|
//// }
|
});
|
|
Edo.containers.Panel.regType('panel', 'dialog');
|
|
Edo.containers.Dialog = Edo.containers.Panel;
|
