322 lines
13 KiB
HTML
322 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>The source code</title>
|
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
|
<style type="text/css">
|
|
.highlight { display: block; background-color: #ddd; }
|
|
</style>
|
|
<script type="text/javascript">
|
|
function highlight() {
|
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="prettyPrint(); highlight();">
|
|
<pre class="prettyprint lang-js"><span id='Ext-layout-ContainerLayout'>/**
|
|
</span> * @class Ext.layout.ContainerLayout
|
|
* <p>This class is intended to be extended or created via the <tt><b>{@link Ext.Container#layout layout}</b></tt>
|
|
* configuration property. See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
|
|
*/
|
|
Ext.layout.ContainerLayout = Ext.extend(Object, {
|
|
<span id='Ext-layout-ContainerLayout-cfg-extraCls'> /**
|
|
</span> * @cfg {String} extraCls
|
|
* <p>An optional extra CSS class that will be added to the container. This can be useful for adding
|
|
* customized styles to the container or any of its children using standard CSS rules. See
|
|
* {@link Ext.Component}.{@link Ext.Component#ctCls ctCls} also.</p>
|
|
* <p><b>Note</b>: <tt>extraCls</tt> defaults to <tt>''</tt> except for the following classes
|
|
* which assign a value by default:
|
|
* <div class="mdetail-params"><ul>
|
|
* <li>{@link Ext.layout.AbsoluteLayout Absolute Layout} : <tt>'x-abs-layout-item'</tt></li>
|
|
* <li>{@link Ext.layout.Box Box Layout} : <tt>'x-box-item'</tt></li>
|
|
* <li>{@link Ext.layout.ColumnLayout Column Layout} : <tt>'x-column'</tt></li>
|
|
* </ul></div>
|
|
* To configure the above Classes with an extra CSS class append to the default. For example,
|
|
* for ColumnLayout:<pre><code>
|
|
* extraCls: 'x-column custom-class'
|
|
* </code></pre>
|
|
* </p>
|
|
*/
|
|
<span id='Ext-layout-ContainerLayout-cfg-renderHidden'> /**
|
|
</span> * @cfg {Boolean} renderHidden
|
|
* True to hide each contained item on render (defaults to false).
|
|
*/
|
|
|
|
<span id='Ext-layout-ContainerLayout-property-activeItem'> /**
|
|
</span> * A reference to the {@link Ext.Component} that is active. For example, <pre><code>
|
|
* if(myPanel.layout.activeItem.id == 'item-1') { ... }
|
|
* </code></pre>
|
|
* <tt>activeItem</tt> only applies to layout styles that can display items one at a time
|
|
* (like {@link Ext.layout.AccordionLayout}, {@link Ext.layout.CardLayout}
|
|
* and {@link Ext.layout.FitLayout}). Read-only. Related to {@link Ext.Container#activeItem}.
|
|
* @type {Ext.Component}
|
|
* @property activeItem
|
|
*/
|
|
|
|
<span id='Ext-layout-ContainerLayout-property-monitorResize'> // private
|
|
</span> monitorResize:false,
|
|
<span id='Ext-layout-ContainerLayout-property-activeItem'> // private
|
|
</span> activeItem : null,
|
|
|
|
<span id='Ext-layout-ContainerLayout-method-constructor'> constructor : function(config){
|
|
</span> this.id = Ext.id(null, 'ext-layout-');
|
|
Ext.apply(this, config);
|
|
},
|
|
|
|
<span id='Ext-layout-ContainerLayout-property-type'> type: 'container',
|
|
</span>
|
|
<span id='Ext-layout-ContainerLayout-method-IEMeasureHack'> /* Workaround for how IE measures autoWidth elements. It prefers bottom-up measurements
|
|
</span> whereas other browser prefer top-down. We will hide all target child elements before we measure and
|
|
put them back to get an accurate measurement.
|
|
*/
|
|
IEMeasureHack : function(target, viewFlag) {
|
|
var tChildren = target.dom.childNodes, tLen = tChildren.length, c, d = [], e, i, ret;
|
|
for (i = 0 ; i < tLen ; i++) {
|
|
c = tChildren[i];
|
|
e = Ext.get(c);
|
|
if (e) {
|
|
d[i] = e.getStyle('display');
|
|
e.setStyle({display: 'none'});
|
|
}
|
|
}
|
|
ret = target ? target.getViewSize(viewFlag) : {};
|
|
for (i = 0 ; i < tLen ; i++) {
|
|
c = tChildren[i];
|
|
e = Ext.get(c);
|
|
if (e) {
|
|
e.setStyle({display: d[i]});
|
|
}
|
|
}
|
|
return ret;
|
|
},
|
|
|
|
<span id='Ext-layout-ContainerLayout-property-getLayoutTargetSize'> // Placeholder for the derived layouts
|
|
</span> getLayoutTargetSize : Ext.EmptyFn,
|
|
|
|
<span id='Ext-layout-ContainerLayout-method-layout'> // private
|
|
</span> layout : function(){
|
|
var ct = this.container, target = ct.getLayoutTarget();
|
|
if(!(this.hasLayout || Ext.isEmpty(this.targetCls))){
|
|
target.addClass(this.targetCls);
|
|
}
|
|
this.onLayout(ct, target);
|
|
ct.fireEvent('afterlayout', ct, this);
|
|
},
|
|
|
|
<span id='Ext-layout-ContainerLayout-method-onLayout'> // private
|
|
</span> onLayout : function(ct, target){
|
|
this.renderAll(ct, target);
|
|
},
|
|
|
|
<span id='Ext-layout-ContainerLayout-method-isValidParent'> // private
|
|
</span> isValidParent : function(c, target){
|
|
return target && c.getPositionEl().dom.parentNode == (target.dom || target);
|
|
},
|
|
|
|
<span id='Ext-layout-ContainerLayout-method-renderAll'> // private
|
|
</span> renderAll : function(ct, target){
|
|
var items = ct.items.items, i, c, len = items.length;
|
|
for(i = 0; i < len; i++) {
|
|
c = items[i];
|
|
if(c && (!c.rendered || !this.isValidParent(c, target))){
|
|
this.renderItem(c, i, target);
|
|
}
|
|
}
|
|
},
|
|
|
|
<span id='Ext-layout-ContainerLayout-method-renderItem'> /**
|
|
</span> * @private
|
|
* Renders the given Component into the target Element. If the Component is already rendered,
|
|
* it is moved to the provided target instead.
|
|
* @param {Ext.Component} c The Component to render
|
|
* @param {Number} position The position within the target to render the item to
|
|
* @param {Ext.Element} target The target Element
|
|
*/
|
|
renderItem : function(c, position, target){
|
|
if (c) {
|
|
if (!c.rendered) {
|
|
c.render(target, position);
|
|
this.configureItem(c);
|
|
} else if (!this.isValidParent(c, target)) {
|
|
if (Ext.isNumber(position)) {
|
|
position = target.dom.childNodes[position];
|
|
}
|
|
|
|
target.dom.insertBefore(c.getPositionEl().dom, position || null);
|
|
c.container = target;
|
|
this.configureItem(c);
|
|
}
|
|
}
|
|
},
|
|
|
|
<span id='Ext-layout-ContainerLayout-method-getRenderedItems'> // private.
|
|
</span> // Get all rendered items to lay out.
|
|
getRenderedItems: function(ct){
|
|
var t = ct.getLayoutTarget(), cti = ct.items.items, len = cti.length, i, c, items = [];
|
|
for (i = 0; i < len; i++) {
|
|
if((c = cti[i]).rendered && this.isValidParent(c, t) && c.shouldLayout !== false){
|
|
items.push(c);
|
|
}
|
|
};
|
|
return items;
|
|
},
|
|
|
|
<span id='Ext-layout-ContainerLayout-method-configureItem'> /**
|
|
</span> * @private
|
|
* Applies extraCls and hides the item if renderHidden is true
|
|
*/
|
|
configureItem: function(c){
|
|
if (this.extraCls) {
|
|
var t = c.getPositionEl ? c.getPositionEl() : c;
|
|
t.addClass(this.extraCls);
|
|
}
|
|
|
|
// If we are forcing a layout, do so *before* we hide so elements have height/width
|
|
if (c.doLayout && this.forceLayout) {
|
|
c.doLayout();
|
|
}
|
|
if (this.renderHidden && c != this.activeItem) {
|
|
c.hide();
|
|
}
|
|
},
|
|
|
|
<span id='Ext-layout-ContainerLayout-method-onRemove'> onRemove: function(c){
|
|
</span> if(this.activeItem == c){
|
|
delete this.activeItem;
|
|
}
|
|
if(c.rendered && this.extraCls){
|
|
var t = c.getPositionEl ? c.getPositionEl() : c;
|
|
t.removeClass(this.extraCls);
|
|
}
|
|
},
|
|
|
|
<span id='Ext-layout-ContainerLayout-method-afterRemove'> afterRemove: function(c){
|
|
</span> if(c.removeRestore){
|
|
c.removeMode = 'container';
|
|
delete c.removeRestore;
|
|
}
|
|
},
|
|
|
|
<span id='Ext-layout-ContainerLayout-method-onResize'> // private
|
|
</span> onResize: function(){
|
|
var ct = this.container,
|
|
b;
|
|
if(ct.collapsed){
|
|
return;
|
|
}
|
|
if(b = ct.bufferResize && ct.shouldBufferLayout()){
|
|
if(!this.resizeTask){
|
|
this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this);
|
|
this.resizeBuffer = Ext.isNumber(b) ? b : 50;
|
|
}
|
|
ct.layoutPending = true;
|
|
this.resizeTask.delay(this.resizeBuffer);
|
|
}else{
|
|
this.runLayout();
|
|
}
|
|
},
|
|
|
|
<span id='Ext-layout-ContainerLayout-method-runLayout'> runLayout: function(){
|
|
</span> var ct = this.container;
|
|
this.layout();
|
|
ct.onLayout();
|
|
delete ct.layoutPending;
|
|
},
|
|
|
|
<span id='Ext-layout-ContainerLayout-method-setContainer'> // private
|
|
</span> setContainer : function(ct){
|
|
/*
|
|
* This monitorResize flag will be renamed soon as to avoid confusion
|
|
* with the Container version which hooks onWindowResize to doLayout
|
|
*
|
|
* monitorResize flag in this context attaches the resize event between
|
|
* a container and it's layout
|
|
*/
|
|
if(this.monitorResize && ct != this.container){
|
|
var old = this.container;
|
|
if(old){
|
|
old.un(old.resizeEvent, this.onResize, this);
|
|
}
|
|
if(ct){
|
|
ct.on(ct.resizeEvent, this.onResize, this);
|
|
}
|
|
}
|
|
this.container = ct;
|
|
},
|
|
|
|
<span id='Ext-layout-ContainerLayout-method-parseMargins'> /**
|
|
</span> * Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
|
|
* (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)
|
|
* @param {Number|String} v The encoded margins
|
|
* @return {Object} An object with margin sizes for top, right, bottom and left
|
|
*/
|
|
parseMargins : function(v){
|
|
if (Ext.isNumber(v)) {
|
|
v = v.toString();
|
|
}
|
|
var ms = v.split(' '),
|
|
len = ms.length;
|
|
|
|
if (len == 1) {
|
|
ms[1] = ms[2] = ms[3] = ms[0];
|
|
} else if(len == 2) {
|
|
ms[2] = ms[0];
|
|
ms[3] = ms[1];
|
|
} else if(len == 3) {
|
|
ms[3] = ms[1];
|
|
}
|
|
|
|
return {
|
|
top :parseInt(ms[0], 10) || 0,
|
|
right :parseInt(ms[1], 10) || 0,
|
|
bottom:parseInt(ms[2], 10) || 0,
|
|
left :parseInt(ms[3], 10) || 0
|
|
};
|
|
},
|
|
|
|
<span id='Ext-layout-ContainerLayout-property-fieldTpl'> /**
|
|
</span> * The {@link Ext.Template Ext.Template} used by Field rendering layout classes (such as
|
|
* {@link Ext.layout.FormLayout}) to create the DOM structure of a fully wrapped,
|
|
* labeled and styled form Field. A default Template is supplied, but this may be
|
|
* overriden to create custom field structures. The template processes values returned from
|
|
* {@link Ext.layout.FormLayout#getTemplateArgs}.
|
|
* @property fieldTpl
|
|
* @type Ext.Template
|
|
*/
|
|
fieldTpl: (function() {
|
|
var t = new Ext.Template(
|
|
'<div class="x-form-item {itemCls}" tabIndex="-1">',
|
|
'<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>',
|
|
'<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
|
|
'</div><div class="{clearCls}"></div>',
|
|
'</div>'
|
|
);
|
|
t.disableFormats = true;
|
|
return t.compile();
|
|
})(),
|
|
|
|
<span id='Ext-layout-ContainerLayout-method-destroy'> /*
|
|
</span> * Destroys this layout. This is a template method that is empty by default, but should be implemented
|
|
* by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
|
|
* @protected
|
|
*/
|
|
destroy : function(){
|
|
// Stop any buffered layout tasks
|
|
if(this.resizeTask && this.resizeTask.cancel){
|
|
this.resizeTask.cancel();
|
|
}
|
|
if(this.container) {
|
|
this.container.un(this.container.resizeEvent, this.onResize, this);
|
|
}
|
|
if(!Ext.isEmpty(this.targetCls)){
|
|
var target = this.container.getLayoutTarget();
|
|
if(target){
|
|
target.removeClass(this.targetCls);
|
|
}
|
|
}
|
|
}
|
|
});</pre>
|
|
</body>
|
|
</html>
|