ExtJs_ExtBoxComponent类解说
来源：互联网 发布：淘宝客服怎么返现 编辑：程序博客网 时间：2024/04/29 02:32
/*
* Ext JS Library 3.3.0
*/
/**
* @class Ext.BoxComponent
* @extends Ext.Component
* Example use:
var myImage = new Ext.BoxComponent({
autoEl: {
tag: 'img',
src: '/images/my-image.jpg'
}
});
* @constructor
* @param {Ext.Element/String/Object} config The configuration options.
* @xtype box
* 目标：继承技巧
*/
Ext.BoxComponent = Ext.extend(Ext.Component, {
// Configs below are used for all Components when rendered by BoxLayout.
/**
* @cfg {Number} flex
*
Note: this config is only used when this Component is rendered
* by a Container which has been configured to use a BoxLayout.
* Each child Component with a flex property will be flexed either vertically(垂直地) (by a VBoxLayout)
* or horizontally(水平地) (by an HBoxLayout) according to the item's relative flex value
* compared to the sum of all Components with flex value specified. Any child items that have
* either a flex = 0 or flex = undefined will not be 'flexed' (the initial size will not be changed).
*/
// Configs below are used for all Components when rendered by AnchorLayout(锚点布局).
/**
* @cfg {String} anchor
Note: this config is only used when this Component is rendered
* by a Container which has been configured to use an AnchorLayout (or subclass thereof(它的)).
*/
// tabTip config is used when a BoxComponent is a child of a TabPanel
/**
* @cfg {String} tabTip
Note: this config is only used when this BoxComponent is a child item of a TabPanel.
* A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over
* the associated(有关系的) tab selector element. Ext.QuickTips.init()
* must be called in order for the tips to render.
*/
// Configs below are used for all Components when rendered by BorderLayout.
/**
* @cfg {String} region
Note: this config is only used when this BoxComponent is rendered
* by a Container which has been configured to use the BorderLayout
*/
//margins配置项的使用范围：
// margins config is used when a BoxComponent is rendered by BorderLayout or BoxLayout.
/**
* @cfg {Object} margins
Note: this config is only used when this BoxComponent is rendered
* by a Container which has been configured to use the BorderLayout
* or one of the two BoxLayout subclasses.
*
* format:margins格式：
{
top: (top margin),
right: (right margin),
bottom: (bottom margin),
left: (left margin)
}
If there is only one value, it applies to all sides.// 如果只有一个值，那就是四边都设为此值。
If there are two values, the top and bottom borders are set to the first value and the
right and left are set to the second.
If there are three values, the top is set to the first value, the left and right are set
to the second, and the bottom is set to the third.
If there are four values, they apply to the top, right, bottom, and left, respectively(依次).
默认格式值为：Defaults to:
{top:0, right:0, bottom:0, left:0}
*/
/**
* @cfg {Number} x
* The local x (left) coordinate(坐标) for this component if contained within a positioning container.
*/
/**
* @cfg {Number} y
* The local y (top) coordinate for this component if contained within a positioning container.
*/
/**
* @cfg {Number} pageX
* The page level x coordinate for this component if contained within a positioning container.
*/
/**
* @cfg {Number} pageY
* The page level y coordinate for this component if contained within a positioning container.
*/
/**
* @cfg {Number} height
* The height of this component in pixels(像素) (defaults to auto).
* Note to express this dimension as a percentage or offset see anchor.
*/
/**
* @cfg {Number} width
* The width of this component in pixels (defaults to auto).
* Note to express this dimension(尺寸) as a percentage or offset see anchor.
*/
/**
* @cfg {Number} boxMinHeight
*
*/
/**
* @cfg {Number} boxMinWidth
*
*/
/**
* @cfg {Number} boxMaxHeight
*
*/
/**
* @cfg {Number} boxMaxWidth
*
*/
/**
* @cfg {Boolean} autoHeight
*
True to use height:'auto', false to use fixed height (or allow it to be managed by its parent
* Example use:
var w = new Ext.Window({
title: 'Window',
width: 600,
autoHeight: true,
items: {
title: 'Collapse Me',
height: 400,
collapsible: true,
border: false,
listeners: {
beforecollapse: function() {
w.el.shadow.hide();
},
beforeexpand: function() {
w.el.shadow.hide();
},
collapse: function() {
w.syncShadow();
},
expand: function() {
w.syncShadow();
}
}
}
}).show();
*/
/**
* @cfg {Boolean} autoWidth
* Example use:
<div id='grid-container' style='margin-left:25%;width:50%'></div>
* A Panel rendered into that target element must listen for browser window resize in order to relay its
* child items when the browser changes its width:
var myPanel = new Ext.Panel({
renderTo: 'grid-container',
monitorResize: true, // relay on browser resize
title: 'Panel',
height: 400,
autoWidth: true,
layout: 'hbox',
layoutConfig: {
align: 'stretch'
},
defaults: {
flex: 1
},
items: [{
title: 'Box 1',
}, {
title: 'Box 2'
}, {
title: 'Box 3'
}]
});
*/
/**
* @cfg {Boolean} autoScroll
* true to use overflow:'auto' on the components layout element and show scroll bars automatically when
* necessary, false to clip(裁减) any overflowing content (defaults to false).
*/
/* // private internal(内部的) config
* {Boolean} deferHeight
* True to defer(延伸) height calculations(计算) to an external(外部的) component, false to allow this component to set its own
* height (defaults to false).
*/
// private
initComponent : function(){
Ext.BoxComponent.superclass.initComponent.call(this);
this.addEvents(
/**
* @event resize
* Fires after the component is resized.
* @param {Ext.Component} this
* @param {Number} adjWidth The box-adjusted width that was set
* @param {Number} adjHeight The box-adjusted height that was set
* @param {Number} rawWidth The width that was originally(原始的) specified
* @param {Number} rawHeight The height that was originally specified
*/
'resize',
/**
* @event move
* Fires after the component is moved.
* @param {Ext.Component} this
* @param {Number} x The new x position
* @param {Number} y The new y position
*/
'move'
);
}, //end of initComponent
// private, set in afterRender to signify(表示) that the component has been rendered
boxReady : false,
// private, used to defer height settings to subclasses
deferHeight: false,
/**
* Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
* either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.
* @return {Ext.BoxComponent} this
*/
setSize : function(w, h){
// support for standard size objects
if(typeof w == 'object'){
h = w.height;
w = w.width;
}
if (Ext.isDefined(w) && Ext.isDefined(this.boxMinWidth) && (w < this.boxMinWidth)) {
w = this.boxMinWidth;
}
if (Ext.isDefined(h) && Ext.isDefined(this.boxMinHeight) && (h < this.boxMinHeight)) {
h = this.boxMinHeight;
}
if (Ext.isDefined(w) && Ext.isDefined(this.boxMaxWidth) && (w > this.boxMaxWidth)) {
w = this.boxMaxWidth;
}
if (Ext.isDefined(h) && Ext.isDefined(this.boxMaxHeight) && (h > this.boxMaxHeight)) {
h = this.boxMaxHeight;
}
// not rendered
if(!this.boxReady){ //box没准备好，既没渲染时执行
this.width = w;
this.height = h;
return this;
}
if(this.cacheSizes !== false && this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
return this;
}
this.lastSize = {width: w, height: h};
var adj = this.adjustSize(w, h),
aw = adj.width,
ah = adj.height,
rz;
if(aw !== undefined || ah !== undefined){ // this code is nasty(令人讨厌的) but performs better with floaters
rz = this.getResizeEl();
if(!this.deferHeight && aw !== undefined && ah !== undefined){
rz.setSize(aw, ah);
}else if(!this.deferHeight && ah !== undefined){
rz.setHeight(ah);
}else if(aw !== undefined){
rz.setWidth(aw);
}
this.onResize(aw, ah, w, h);
this.fireEvent('resize', this, aw, ah, w, h);
}
return this;
},
/**
* Sets the width of the component. This method fires the resize event.
* @param {Mixed} width
* @return {Ext.BoxComponent} this
*/
setWidth : function(width){
return this.setSize(width);
},
/**
* Sets the height of the component. This method fires the resize event.
* @param {Mixed} height
* @return {Ext.BoxComponent} this
*/
setHeight : function(height){
return this.setSize(undefined, height);
},
/**
* Gets the current size of the component's underlying(基础的) element.
* @return {Object} An object containing the element's size {width: (element width), height: (element height)}
*/
getSize : function(){
return this.getResizeEl().getSize();
},
/**
* Gets the current width of the component's underlying element.
* @return {Number}
*/
getWidth : function(){
return this.getResizeEl().getWidth();
},
/**
* Gets the current height of the component's underlying element.
* @return {Number}
*/
getHeight : function(){
return this.getResizeEl().getHeight();
},
/**
* Gets the current size of the component's underlying element, including space taken by its margins.
* @return {Object} An object containing the element's size {width: (element width + left/right margins),
* height: (element height + top/bottom margins)}
*/
getOuterSize : function(){
var el = this.getResizeEl();
return {width: el.getWidth() + el.getMargins('lr'),
height: el.getHeight() + el.getMargins('tb')};
},
/**
* Gets the current XY position of the component's underlying element.
* @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
* @return {Array} The XY position of the element (e.g., [100, 200])
*/
getPosition : function(local){
var el = this.getPositionEl();
if(local === true){
return [el.getLeft(true), el.getTop(true)];
}
return this.xy || el.getXY();
},
/**
* Gets the current box measurements(测量) of the component's underlying element.
* @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
* @return {Object} box An object in the format {x, y, width, height}
*/
getBox : function(local){
var pos = this.getPosition(local);
var s = this.getSize();
s.x = pos[0];
s.y = pos[1];
return s;
},
/**
* Sets the current box measurements of the component's underlying element.
* @param {Object} box An object in the format {x, y, width, height}
* @return {Ext.BoxComponent} this
*/
updateBox : function(box){
this.setSize(box.width, box.height);
this.setPagePosition(box.x, box.y);
return this;
},
/**
* @return {Ext.Element} The Element which is to be resized by size managing layouts.
*/
getResizeEl : function(){
return this.resizeEl || this.el;
},
/**
* Sets the overflow on the content element of the component.
* @param {Boolean} scroll True to allow the Component to auto scroll.
* @return {Ext.BoxComponent} this
*/
setAutoScroll : function(scroll){
if(this.rendered){
this.getContentTarget().setOverflow(scroll ? 'auto' : '');
}
this.autoScroll = scroll;
return this;
},
/**
* Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
* This method fires the move event.
* @param {Number} left The new left
* @param {Number} top The new top
* @return {Ext.BoxComponent} this
*/
setPosition : function(x, y){
if(x && typeof x[1] == 'number'){
y = x[1];
x = x[0];
}
this.x = x;
this.y = y;
if(!this.boxReady){
return this;
}
var adj = this.adjustPosition(x, y);
var ax = adj.x, ay = adj.y;
var el = this.getPositionEl();
if(ax !== undefined || ay !== undefined){
if(ax !== undefined && ay !== undefined){
el.setLeftTop(ax, ay);
}else if(ax !== undefined){
el.setLeft(ax);
}else if(ay !== undefined){
el.setTop(ay);
}
this.onPosition(ax, ay);
this.fireEvent('move', this, ax, ay);
}
return this;
},
/**
* Sets the page XY position of the component. To set the left and top instead, use setPosition.
* This method fires the move event.
* @param {Number} x The new x position
* @param {Number} y The new y position
* @return {Ext.BoxComponent} this
*/
setPagePosition : function(x, y){
if(x && typeof x[1] == 'number'){
y = x[1];
x = x[0];
}
this.pageX = x;
this.pageY = y;
if(!this.boxReady){
return;
}
if(x === undefined || y === undefined){ // cannot translate(编译) undefined points
return;
}
var p = this.getPositionEl().translatePoints(x, y);
this.setPosition(p.left, p.top);
return this;
},
// privateafterRender事件
afterRender : function(){
Ext.BoxComponent.superclass.afterRender.call(this);
if(this.resizeEl){
this.resizeEl = Ext.get(this.resizeEl);
}
if(this.positionEl){
this.positionEl = Ext.get(this.positionEl);
}
this.boxReady = true;
Ext.isDefined(this.autoScroll) && this.setAutoScroll(this.autoScroll);
this.setSize(this.width, this.height);
if(this.x || this.y){
this.setPosition(this.x, this.y);
}else if(this.pageX || this.pageY){
this.setPagePosition(this.pageX, this.pageY);
}
},
/**
* Force the component's size to recalculate(重新计算) based on the underlying element's current height and width.
* @return {Ext.BoxComponent} this
*/
syncSize : function(){
delete this.lastSize;
this.setSize(this.autoWidth ? undefined : this.getResizeEl().getWidth(), this.autoHeight ? undefined : this.getResizeEl().getHeight());
return this;
},
/* // protected
* Called after the component is resized, this method is empty by default but can be implemented(继承) by any
* subclass that needs to perform custom logic after a resize occurs.
* @param {Number} adjWidth
* @param {Number} adjHeight
* @param {Number} rawWidth
* @param {Number} rawHeight
*/
onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){
},
/* // protected
* Called after the component is moved, this method is empty by default but can be implemented by any
* subclass that needs to perform custom logic after a move occurs.
* @param {Number} x The new x position
* @param {Number} y The new y position
*/
onPosition : function(x, y){
},
// private
adjustSize : function(w, h){
if(this.autoWidth){
w = 'auto';
}
if(this.autoHeight){
h = 'auto';
}
return {width : w, height: h};
},
// private
adjustPosition : function(x, y){
return {x : x, y: y};
}
});
Ext.reg('box', Ext.BoxComponent);
/**
* @class Ext.Spacer
* @extends Ext.BoxComponent
*
Used to provide a sizable space in a layout.
* @constructor
* @param {Object} config
*/
Ext.Spacer = Ext.extend(Ext.BoxComponent, {
autoEl:'div'
});
Ext.reg('spacer', Ext.Spacer);
- ExtJs_ExtBoxComponent类解说
- ExtJs_ExtComponent基类解说
- ExtJs_ExtButton类解说
- Android 实例解说Application类
- Android 实例解说Application类
- java基础知识---java集合类知识点解说
- [转]java抽象类和接口的区别---详细解说
- IOCP服务器/客户端类 详细解说 和 要点介绍
- 俄罗斯方块的model需要用到的类的详细解说
- Android Bound Service(三) ----- 解说 AIDL产生的接口类
- A,B,C类IP地址的解说
- fstab解说!
- 众评黄健翔解说
- Tomcat解说
- prototype解说
- CPU解说
- XMLHttpRequest 解说
- 眼跳解说
- linux 下strftime()的用法
- FileUpload上传多文件时出现“无法访问已关闭的文件”错误的解决方法
- 免费杀毒软件如何生存？
- 001. EsayUI系列之easyui-window
- hibernate的hibernate.hbm2ddl.auto配置参数
- ExtJs_ExtBoxComponent类解说
- 追MM与Java的23种设计模式
- Extjs Column布局常见问题及解决方法
- Q：若需要开发支持32bit与64bit的驱动程序，两者同时购买价格是否有优惠?
- 用sourceinsight看ns2源码 - [NS2]
- java1.5新特性之可变长参数
- 使用DLL在进程间共享数据
- UiModeManager设置夜间模式和行车模式
- Q：请问如何将两个应用程序包装在一个安装程序中，以简化日后的安装步骤？
