Alien-Web-ExtJS-V3
view release on metacpan or search on metacpan
share/pkgs/cmp-foundation-debug.js view on Meta::CPAN
* <li><b>Percentage</b> : Any value between 1 and 100, expressed as a percentage.<div class="sub-desc">
* The first anchor is the percentage width that the item should take up within the container, and the
* second is the percentage height. For example:<pre><code>
// two values specified
anchor: '100% 50%' // render item complete width of the container and
// 1/2 height of the container
// one value specified
anchor: '100%' // the width value; the height will default to auto
* </code></pre></div></li>
*
* <li><b>Offsets</b> : Any positive or negative integer value.<div class="sub-desc">
* This is a raw adjustment where the first anchor is the offset from the right edge of the container,
* and the second is the offset from the bottom edge. For example:<pre><code>
// two values specified
anchor: '-50 -100' // render item the complete width of the container
// minus 50 pixels and
// the complete height minus 100 pixels.
// one value specified
anchor: '-50' // anchor value is assumed to be the right offset value
// bottom offset will default to 0
* </code></pre></div></li>
*
* <li><b>Sides</b> : Valid values are <tt>'right'</tt> (or <tt>'r'</tt>) and <tt>'bottom'</tt>
* (or <tt>'b'</tt>).<div class="sub-desc">
* Either the container must have a fixed size or an anchorSize config value defined at render time in
* order for these to have any effect.</div></li>
*
* <li><b>Mixed</b> : <div class="sub-desc">
* Anchor values can also be mixed as needed. For example, to render the width offset from the container
* right edge by 50 pixels and 75% of the container's height use:
* <pre><code>
anchor: '-50 75%'
* </code></pre></div></li>
*
*
* </ul></div>
*/
// private
monitorResize : true,
type : 'anchor',
/**
* @cfg {String} defaultAnchor
*
* default anchor for all child container items applied if no anchor or specific width is set on the child item. Defaults to '100%'.
*
*/
defaultAnchor : '100%',
parseAnchorRE : /^(r|right|b|bottom)$/i,
getLayoutTargetSize : function() {
var target = this.container.getLayoutTarget(), ret = {};
if (target) {
ret = target.getViewSize();
// IE in strict mode will return a width of 0 on the 1st pass of getViewSize.
// Use getStyleSize to verify the 0 width, the adjustment pass will then work properly
// with getViewSize
if (Ext.isIE9m && Ext.isStrict && ret.width == 0){
ret = target.getStyleSize();
}
ret.width -= target.getPadding('lr');
ret.height -= target.getPadding('tb');
}
return ret;
},
// private
onLayout : function(container, target) {
Ext.layout.AnchorLayout.superclass.onLayout.call(this, container, target);
var size = this.getLayoutTargetSize(),
containerWidth = size.width,
containerHeight = size.height,
overflow = target.getStyle('overflow'),
components = this.getRenderedItems(container),
len = components.length,
boxes = [],
box,
anchorWidth,
anchorHeight,
component,
anchorSpec,
calcWidth,
calcHeight,
anchorsArray,
totalHeight = 0,
i,
el;
if(containerWidth < 20 && containerHeight < 20){
return;
}
// find the container anchoring size
if(container.anchorSize) {
if(typeof container.anchorSize == 'number') {
anchorWidth = container.anchorSize;
} else {
anchorWidth = container.anchorSize.width;
anchorHeight = container.anchorSize.height;
}
} else {
anchorWidth = container.initialConfig.width;
anchorHeight = container.initialConfig.height;
}
for(i = 0; i < len; i++) {
component = components[i];
el = component.getPositionEl();
// If a child container item has no anchor and no specific width, set the child to the default anchor size
if (!component.anchor && component.items && !Ext.isNumber(component.width) && !(Ext.isIE6 && Ext.isStrict)){
component.anchor = this.defaultAnchor;
}
if(component.anchor) {
share/pkgs/cmp-foundation-debug.js view on Meta::CPAN
* <pre><code>
// All columns are percentages -- they must add up to 1
var p = new Ext.Panel({
title: 'Column Layout - Percentage Only',
layout:'column',
items: [{
title: 'Column 1',
columnWidth: .25
},{
title: 'Column 2',
columnWidth: .6
},{
title: 'Column 3',
columnWidth: .15
}]
});
// Mix of width and columnWidth -- all columnWidth values must add up
// to 1. The first column will take up exactly 120px, and the last two
// columns will fill the remaining container width.
var p = new Ext.Panel({
title: 'Column Layout - Mixed',
layout:'column',
items: [{
title: 'Column 1',
width: 120
},{
title: 'Column 2',
columnWidth: .8
},{
title: 'Column 3',
columnWidth: .2
}]
});
</code></pre>
*/
Ext.layout.ColumnLayout = Ext.extend(Ext.layout.ContainerLayout, {
// private
monitorResize:true,
type: 'column',
extraCls: 'x-column',
scrollOffset : 0,
// private
targetCls: 'x-column-layout-ct',
isValidParent : function(c, target){
return this.innerCt && c.getPositionEl().dom.parentNode == this.innerCt.dom;
},
getLayoutTargetSize : function() {
var target = this.container.getLayoutTarget(), ret;
if (target) {
ret = target.getViewSize();
// IE in strict mode will return a width of 0 on the 1st pass of getViewSize.
// Use getStyleSize to verify the 0 width, the adjustment pass will then work properly
// with getViewSize
if (Ext.isIE9m && Ext.isStrict && ret.width == 0){
ret = target.getStyleSize();
}
ret.width -= target.getPadding('lr');
ret.height -= target.getPadding('tb');
}
return ret;
},
renderAll : function(ct, target) {
if(!this.innerCt){
// the innerCt prevents wrapping and shuffling while
// the container is resizing
this.innerCt = target.createChild({cls:'x-column-inner'});
this.innerCt.createChild({cls:'x-clear'});
}
Ext.layout.ColumnLayout.superclass.renderAll.call(this, ct, this.innerCt);
},
// private
onLayout : function(ct, target){
var cs = ct.items.items,
len = cs.length,
c,
i,
m,
margins = [];
this.renderAll(ct, target);
var size = this.getLayoutTargetSize();
if (Ext.isIE9m && (size.width < 1 && size.height < 1)) { // display none?
return;
}
var w = size.width - this.scrollOffset,
h = size.height,
pw = w;
this.innerCt.setWidth(w);
// some columns can be percentages while others are fixed
// so we need to make 2 passes
for(i = 0; i < len; i++){
c = cs[i];
m = c.getPositionEl().getMargins('lr');
margins[i] = m;
if(!c.columnWidth){
pw -= (c.getWidth() + m);
}
}
pw = pw < 0 ? 0 : pw;
for(i = 0; i < len; i++){
c = cs[i];
share/pkgs/cmp-foundation-debug.js view on Meta::CPAN
* @param {Ext.Element} target The target element
*/
handleTargetOverflow: function(previousTargetSize, container, target) {
var overflow = target.getStyle('overflow');
if (overflow && overflow != 'hidden' &&!this.adjustmentPass) {
var newTargetSize = this.getLayoutTargetSize();
if (newTargetSize.width != previousTargetSize.width || newTargetSize.height != previousTargetSize.height){
this.adjustmentPass = true;
this.onLayout(container, target);
}
}
delete this.adjustmentPass;
},
// private
isValidParent : function(c, target) {
return this.innerCt && c.getPositionEl().dom.parentNode == this.innerCt.dom;
},
/**
* @private
* Returns all items that are both rendered and visible
* @return {Array} All matching items
*/
getVisibleItems: function(ct) {
var ct = ct || this.container,
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.hidden !== true && c.collapsed !== true && c.shouldLayout !== false){
items.push(c);
}
}
return items;
},
// private
renderAll : function(ct, target) {
if (!this.innerCt) {
// the innerCt prevents wrapping and shuffling while the container is resizing
this.innerCt = target.createChild({cls:this.innerCls});
this.padding = this.parseMargins(this.padding);
}
Ext.layout.BoxLayout.superclass.renderAll.call(this, ct, this.innerCt);
},
getLayoutTargetSize : function() {
var target = this.container.getLayoutTarget(), ret;
if (target) {
ret = target.getViewSize();
// IE in strict mode will return a width of 0 on the 1st pass of getViewSize.
// Use getStyleSize to verify the 0 width, the adjustment pass will then work properly
// with getViewSize
if (Ext.isIE9m && Ext.isStrict && ret.width == 0){
ret = target.getStyleSize();
}
ret.width -= target.getPadding('lr');
ret.height -= target.getPadding('tb');
}
return ret;
},
// private
renderItem : function(c) {
if(Ext.isString(c.margins)){
c.margins = this.parseMargins(c.margins);
}else if(!c.margins){
c.margins = this.defaultMargins;
}
Ext.layout.BoxLayout.superclass.renderItem.apply(this, arguments);
},
/**
* @private
*/
destroy: function() {
Ext.destroy(this.overflowHandler);
Ext.layout.BoxLayout.superclass.destroy.apply(this, arguments);
}
});
/**
* @class Ext.layout.boxOverflow.None
* @extends Object
* Base class for Box Layout overflow handlers. These specialized classes are invoked when a Box Layout
* (either an HBox or a VBox) has child items that are either too wide (for HBox) or too tall (for VBox)
* for its container.
*/
Ext.layout.boxOverflow.None = Ext.extend(Object, {
constructor: function(layout, config) {
this.layout = layout;
Ext.apply(this, config || {});
},
handleOverflow: Ext.emptyFn,
clearOverflow: Ext.emptyFn
});
Ext.layout.boxOverflow.none = Ext.layout.boxOverflow.None;
/**
* @class Ext.layout.boxOverflow.Menu
* @extends Ext.layout.boxOverflow.None
* Description
*/
Ext.layout.boxOverflow.Menu = Ext.extend(Ext.layout.boxOverflow.None, {
( run in 0.966 second using v1.01-cache-2.11-cpan-5b529ec07f3 )