Alien-Web-ExtJS-V3
view release on metacpan or search on metacpan
share/ext-all-debug-w-comments.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/ext-all-debug-w-comments.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/ext-all-debug-w-comments.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, {
share/ext-all-debug-w-comments.js view on Meta::CPAN
* This is supposed to happen at each level through the inheritance chain. So
* a DDProxy implentation will execute apply config on DDProxy, DD, and
* DragDrop in order to get all of the parameters that are available in
* each object.
* @method applyConfig
*/
applyConfig: function() {
// configurable properties:
// padding, isTarget, maintainOffset, primaryButtonOnly
this.padding = this.config.padding || [0, 0, 0, 0];
this.isTarget = (this.config.isTarget !== false);
this.maintainOffset = (this.config.maintainOffset);
this.primaryButtonOnly = (this.config.primaryButtonOnly !== false);
},
/**
* Executed when the linked element is available
* @method handleOnAvailable
* @private
*/
handleOnAvailable: function() {
this.available = true;
this.resetConstraints();
this.onAvailable();
},
/**
* Configures the padding for the target zone in px. Effectively expands
* (or reduces) the virtual object size for targeting calculations.
* Supports css-style shorthand; if only one parameter is passed, all sides
* will have that padding, and if only two are passed, the top and bottom
* will have the first param, the left and right the second.
* @method setPadding
* @param {int} iTop Top pad
* @param {int} iRight Right pad
* @param {int} iBot Bot pad
* @param {int} iLeft Left pad
*/
setPadding: function(iTop, iRight, iBot, iLeft) {
// this.padding = [iLeft, iRight, iTop, iBot];
if (!iRight && 0 !== iRight) {
this.padding = [iTop, iTop, iTop, iTop];
} else if (!iBot && 0 !== iBot) {
this.padding = [iTop, iRight, iTop, iRight];
} else {
this.padding = [iTop, iRight, iBot, iLeft];
}
},
/**
* Stores the initial placement of the linked element.
* @method setInitPosition
* @param {int} diffX the X offset, default 0
* @param {int} diffY the Y offset, default 0
*/
setInitPosition: function(diffX, diffY) {
var el = this.getEl();
if (!this.DDM.verifyEl(el)) {
return;
}
var dx = diffX || 0;
var dy = diffY || 0;
var p = Dom.getXY( el );
this.initPageX = p[0] - dx;
this.initPageY = p[1] - dy;
this.lastPageX = p[0];
this.lastPageY = p[1];
this.setStartPosition(p);
},
/**
* Sets the start position of the element. This is set when the obj
* is initialized, the reset when a drag is started.
* @method setStartPosition
* @param pos current position (from previous lookup)
* @private
*/
setStartPosition: function(pos) {
var p = pos || Dom.getXY( this.getEl() );
this.deltaSetXY = null;
this.startPageX = p[0];
this.startPageY = p[1];
},
/**
* Add this instance to a group of related drag/drop objects. All
* instances belong to at least one group, and can belong to as many
* groups as needed.
* @method addToGroup
* @param sGroup {string} the name of the group
*/
addToGroup: function(sGroup) {
this.groups[sGroup] = true;
this.DDM.regDragDrop(this, sGroup);
},
/**
* Remove's this instance from the supplied interaction group
* @method removeFromGroup
* @param {string} sGroup The group to drop
*/
removeFromGroup: function(sGroup) {
if (this.groups[sGroup]) {
delete this.groups[sGroup];
}
this.DDM.removeDDFromGroup(this, sGroup);
},
/**
* Allows you to specify that an element other than the linked element
* will be moved with the cursor during a drag
share/ext-all-debug-w-comments.js view on Meta::CPAN
if (! this.dragCurrent) {
return;
}
clearTimeout(this.clickTimeout);
if (this.dragThreshMet) {
this.fireEvents(e, true);
} else {
}
this.stopDrag(e);
this.stopEvent(e);
},
/**
* Utility to stop event propagation and event default, if these
* features are turned on.
* @method stopEvent
* @param {Event} e the event as returned by this.getEvent()
*/
stopEvent: function(e){
if(this.stopPropagation) {
e.stopPropagation();
}
if (this.preventDefault) {
e.preventDefault();
}
},
/**
* Internal function to clean up event handlers after the drag
* operation is complete
* @method stopDrag
* @param {Event} e the event
* @private
*/
stopDrag: function(e) {
// Fire the drag end event for the item that was dragged
if (this.dragCurrent) {
if (this.dragThreshMet) {
this.dragCurrent.b4EndDrag(e);
this.dragCurrent.endDrag(e);
}
this.dragCurrent.onMouseUp(e);
}
this.dragCurrent = null;
this.dragOvers = {};
},
/**
* Internal function to handle the mousemove event. Will be invoked
* from the context of the html element.
*
* @TODO figure out what we can do about mouse events lost when the
* user drags objects beyond the window boundary. Currently we can
* detect this in internet explorer by verifying that the mouse is
* down during the mousemove event. Firefox doesn't give us the
* button state on the mousemove event.
* @method handleMouseMove
* @param {Event} e the event
* @private
*/
handleMouseMove: function(e) {
if (! this.dragCurrent) {
return true;
}
// var button = e.which || e.button;
// check for IE mouseup outside of page boundary
if (Ext.isIE && (e.button !== 0 && e.button !== 1 && e.button !== 2)) {
this.stopEvent(e);
return this.handleMouseUp(e);
}
if (!this.dragThreshMet) {
var diffX = Math.abs(this.startX - e.getPageX());
var diffY = Math.abs(this.startY - e.getPageY());
if (diffX > this.clickPixelThresh ||
diffY > this.clickPixelThresh) {
this.startDrag(this.startX, this.startY);
}
}
if (this.dragThreshMet) {
this.dragCurrent.b4Drag(e);
this.dragCurrent.onDrag(e);
if(!this.dragCurrent.moveOnly){
this.fireEvents(e, false);
}
}
this.stopEvent(e);
return true;
},
/**
* Iterates over all of the DragDrop elements to find ones we are
* hovering over or dropping on
* @method fireEvents
* @param {Event} e the event
* @param {boolean} isDrop is this a drop op or a mouseover op?
* @private
*/
fireEvents: function(e, isDrop) {
var me = this,
dragCurrent = me.dragCurrent,
mousePoint = e.getPoint(),
overTarget,
overTargetEl,
allTargets = [],
oldOvers = [], // cache the previous dragOver array
outEvts = [],
overEvts = [],
dropEvts = [],
enterEvts = [],
share/ext-all-debug-w-comments.js view on Meta::CPAN
break;
// Otherwise the object with the most overlap wins
} else {
if (!winner ||
winner.overlap.getArea() < dd.overlap.getArea()) {
winner = dd;
}
}
}
}
return winner;
},
/**
* Refreshes the cache of the top-left and bottom-right points of the
* drag and drop objects in the specified group(s). This is in the
* format that is stored in the drag and drop instance, so typical
* usage is:
* <code>
* Ext.dd.DragDropMgr.refreshCache(ddinstance.groups);
* </code>
* Alternatively:
* <code>
* Ext.dd.DragDropMgr.refreshCache({group1:true, group2:true});
* </code>
* @TODO this really should be an indexed array. Alternatively this
* method could accept both.
* @method refreshCache
* @param {Object} groups an associative array of groups to refresh
*/
refreshCache: function(groups) {
for (var sGroup in groups) {
if ("string" != typeof sGroup) {
continue;
}
for (var i in this.ids[sGroup]) {
var oDD = this.ids[sGroup][i];
if (this.isTypeOfDD(oDD)) {
// if (this.isTypeOfDD(oDD) && oDD.isTarget) {
var loc = this.getLocation(oDD);
if (loc) {
this.locationCache[oDD.id] = loc;
} else {
delete this.locationCache[oDD.id];
// this will unregister the drag and drop object if
// the element is not in a usable state
// oDD.unreg();
}
}
}
}
},
/**
* This checks to make sure an element exists and is in the DOM. The
* main purpose is to handle cases where innerHTML is used to remove
* drag and drop objects from the DOM. IE provides an 'unspecified
* error' when trying to access the offsetParent of such an element
* @method verifyEl
* @param {HTMLElement} el the element to check
* @return {boolean} true if the element looks usable
*/
verifyEl: function(el) {
if (el) {
var parent;
if(Ext.isIE){
try{
parent = el.offsetParent;
}catch(e){}
}else{
parent = el.offsetParent;
}
if (parent) {
return true;
}
}
return false;
},
/**
* Returns a Region object containing the drag and drop element's position
* and size, including the padding configured for it
* @method getLocation
* @param {DragDrop} oDD the drag and drop object to get the
* location for
* @return {Ext.lib.Region} a Region object representing the total area
* the element occupies, including any padding
* the instance is configured for.
*/
getLocation: function(oDD) {
if (! this.isTypeOfDD(oDD)) {
return null;
}
var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l, region;
try {
pos= Ext.lib.Dom.getXY(el);
} catch (e) { }
if (!pos) {
return null;
}
x1 = pos[0];
x2 = x1 + el.offsetWidth;
y1 = pos[1];
y2 = y1 + el.offsetHeight;
t = y1 - oDD.padding[0];
r = x2 + oDD.padding[1];
b = y2 + oDD.padding[2];
l = x1 - oDD.padding[3];
return new Ext.lib.Region( t, r, b, l );
},
/**
* Checks the cursor location to see if it over the target
* @method isOverTarget
* @param {Ext.lib.Point} pt The point to evaluate
* @param {DragDrop} oTarget the DragDrop object we are inspecting
share/ext-all-debug-w-comments.js view on Meta::CPAN
cs = this.columns = columns;
// auto calculate missing column widths
if(colsWithWidth < len){
var remaining = len - colsWithWidth;
if(allocatedWidth < this.maxColumnWidth){
var perCol = ((this.maxColumnWidth-allocatedWidth) / remaining)/100;
for(var j = 0; j < len; j++){
var c = cs[j];
if(!c.width){
c.width = perCol;
}
}
}
}
Ext.list.ListView.superclass.initComponent.call(this);
},
onRender : function(){
this.autoEl = {
cls: 'x-list-wrap'
};
Ext.list.ListView.superclass.onRender.apply(this, arguments);
this.internalTpl.overwrite(this.el, {columns: this.columns});
this.innerBody = Ext.get(this.el.dom.childNodes[1].firstChild);
this.innerHd = Ext.get(this.el.dom.firstChild.firstChild);
if(this.hideHeaders){
this.el.dom.firstChild.style.display = 'none';
}
},
getTemplateTarget : function(){
return this.innerBody;
},
/**
* <p>Function which can be overridden which returns the data object passed to this
* view's {@link #tpl template} to render the whole ListView. The returned object
* shall contain the following properties:</p>
* <div class="mdetail-params"><ul>
* <li><b>columns</b> : String<div class="sub-desc">See <tt>{@link #columns}</tt></div></li>
* <li><b>rows</b> : String<div class="sub-desc">See
* <tt>{@link Ext.DataView}.{@link Ext.DataView#collectData collectData}</div></li>
* </ul></div>
* @param {Array} records An Array of {@link Ext.data.Record}s to be rendered into the DataView.
* @param {Number} startIndex the index number of the Record being prepared for rendering.
* @return {Object} A data object containing properties to be processed by a repeating
* XTemplate as described above.
*/
collectData : function(){
var rs = Ext.list.ListView.superclass.collectData.apply(this, arguments);
return {
columns: this.columns,
rows: rs
};
},
verifyInternalSize : function(){
if(this.lastSize){
this.onResize(this.lastSize.width, this.lastSize.height);
}
},
// private
onResize : function(w, h){
var body = this.innerBody.dom,
header = this.innerHd.dom,
scrollWidth = w - Ext.num(this.scrollOffset, Ext.getScrollBarWidth()) + 'px',
parentNode;
if(!body){
return;
}
parentNode = body.parentNode;
if(Ext.isNumber(w)){
if(this.reserveScrollOffset || ((parentNode.offsetWidth - parentNode.clientWidth) > 10)){
body.style.width = scrollWidth;
header.style.width = scrollWidth;
}else{
body.style.width = w + 'px';
header.style.width = w + 'px';
setTimeout(function(){
if((parentNode.offsetWidth - parentNode.clientWidth) > 10){
body.style.width = scrollWidth;
header.style.width = scrollWidth;
}
}, 10);
}
}
if(Ext.isNumber(h)){
parentNode.style.height = Math.max(0, h - header.parentNode.offsetHeight) + 'px';
}
},
updateIndexes : function(){
Ext.list.ListView.superclass.updateIndexes.apply(this, arguments);
this.verifyInternalSize();
},
findHeaderIndex : function(header){
header = header.dom || header;
var parentNode = header.parentNode,
children = parentNode.parentNode.childNodes,
i = 0,
c;
for(; c = children[i]; i++){
if(c == parentNode){
return i;
}
}
return -1;
},
setHdWidths : function(){
var els = this.innerHd.dom.getElementsByTagName('div'),
i = 0,
columns = this.columns,
len = columns.length;
for(; i < len; i++){
els[i].style.width = (columns[i].width*100) + '%';
}
}
});
Ext.reg('listview', Ext.list.ListView);
// Backwards compatibility alias
Ext.ListView = Ext.list.ListView;/**
* @class Ext.list.Column
* <p>This class encapsulates column configuration data to be used in the initialization of a
* {@link Ext.list.ListView ListView}.</p>
* <p>While subclasses are provided to render data in different ways, this class renders a passed
* data field unchanged and is usually used for textual columns.</p>
*/
Ext.list.Column = Ext.extend(Object, {
/**
* @private
* @cfg {Boolean} isColumn
* Used by ListView constructor method to avoid reprocessing a Column
* if <code>isColumn</code> is not set ListView will recreate a new Ext.list.Column
* Defaults to true.
*/
isColumn: true,
/**
* @cfg {String} align
* Set the CSS text-align property of the column. Defaults to <tt>'left'</tt>.
*/
align: 'left',
/**
* @cfg {String} header Optional. The header text to be used as innerHTML
* (html tags are accepted) to display in the ListView. <b>Note</b>: to
* have a clickable header with no text displayed use <tt>' '</tt>.
*/
header: '',
( run in 0.556 second using v1.01-cache-2.11-cpan-5b529ec07f3 )