ExtJs_ExtBoxComponent类解说

?

?

?

/*

?* 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,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,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',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;

?? ?},

?

?? ?// private afterRender事件

?? ?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);