285 lines
No EOL
11 KiB
HTML
285 lines
No EOL
11 KiB
HTML
<html><head><title>BasicLayoutRegion.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>BasicLayoutRegion.js</h1><pre class="highlighted"><code><i>/**
|
|
* @class Ext.BasicLayoutRegion
|
|
* @extends Ext.util.Observable
|
|
* This class represents a lightweight region <b>in</b> a layout manager. This region does not move dom nodes
|
|
* and does not have a titlebar, tabs or any other features. All it does is size and position
|
|
* panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
|
|
*/</i>
|
|
Ext.BasicLayoutRegion = <b>function</b>(mgr, config, pos, skipConfig){
|
|
<b>this</b>.mgr = mgr;
|
|
<b>this</b>.position = pos;
|
|
<b>this</b>.events = {
|
|
<i>/**
|
|
* @event beforeremove
|
|
* Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
|
|
* @param {Ext.LayoutRegion} <b>this</b>
|
|
* @param {Ext.ContentPanel} panel The panel
|
|
* @param {Object} e The cancel event object
|
|
*/</i>
|
|
"beforeremove" : true,
|
|
<i>/**
|
|
* @event invalidated
|
|
* Fires when the layout <b>for</b> this region is changed.
|
|
* @param {Ext.LayoutRegion} <b>this</b>
|
|
*/</i>
|
|
"invalidated" : true,
|
|
<i>/**
|
|
* @event visibilitychange
|
|
* Fires when <b>this</b> region is shown or hidden
|
|
* @param {Ext.LayoutRegion} <b>this</b>
|
|
* @param {Boolean} visibility true or false
|
|
*/</i>
|
|
"visibilitychange" : true,
|
|
<i>/**
|
|
* @event paneladded
|
|
* Fires when a panel is added.
|
|
* @param {Ext.LayoutRegion} <b>this</b>
|
|
* @param {Ext.ContentPanel} panel The panel
|
|
*/</i>
|
|
"paneladded" : true,
|
|
<i>/**
|
|
* @event panelremoved
|
|
* Fires when a panel is removed.
|
|
* @param {Ext.LayoutRegion} <b>this</b>
|
|
* @param {Ext.ContentPanel} panel The panel
|
|
*/</i>
|
|
"panelremoved" : true,
|
|
<i>/**
|
|
* @event collapsed
|
|
* Fires when <b>this</b> region is collapsed.
|
|
* @param {Ext.LayoutRegion} <b>this</b>
|
|
*/</i>
|
|
"collapsed" : true,
|
|
<i>/**
|
|
* @event expanded
|
|
* Fires when <b>this</b> region is expanded.
|
|
* @param {Ext.LayoutRegion} <b>this</b>
|
|
*/</i>
|
|
"expanded" : true,
|
|
<i>/**
|
|
* @event slideshow
|
|
* Fires when <b>this</b> region is slid into view.
|
|
* @param {Ext.LayoutRegion} <b>this</b>
|
|
*/</i>
|
|
"slideshow" : true,
|
|
<i>/**
|
|
* @event slidehide
|
|
* Fires when <b>this</b> region slides out of view.
|
|
* @param {Ext.LayoutRegion} <b>this</b>
|
|
*/</i>
|
|
"slidehide" : true,
|
|
<i>/**
|
|
* @event panelactivated
|
|
* Fires when a panel is activated.
|
|
* @param {Ext.LayoutRegion} <b>this</b>
|
|
* @param {Ext.ContentPanel} panel The activated panel
|
|
*/</i>
|
|
"panelactivated" : true,
|
|
<i>/**
|
|
* @event resized
|
|
* Fires when the user resizes <b>this</b> region.
|
|
* @param {Ext.LayoutRegion} <b>this</b>
|
|
* @param {Number} newSize The <b>new</b> size (width <b>for</b> east/west, height <b>for</b> north/south)
|
|
*/</i>
|
|
"resized" : true
|
|
};
|
|
<i>/** A collection of panels <b>in</b> this region. @type Ext.util.MixedCollection */</i>
|
|
<b>this</b>.panels = <b>new</b> Ext.util.MixedCollection();
|
|
<b>this</b>.panels.getKey = <b>this</b>.getPanelId.createDelegate(<b>this</b>);
|
|
<b>this</b>.box = null;
|
|
<b>this</b>.activePanel = null;
|
|
<b>if</b>(skipConfig !== true){
|
|
<b>this</b>.applyConfig(config);
|
|
}
|
|
};
|
|
|
|
Ext.extend(Ext.BasicLayoutRegion, Ext.util.Observable, {
|
|
getPanelId : <b>function</b>(p){
|
|
<b>return</b> p.getId();
|
|
},
|
|
|
|
applyConfig : <b>function</b>(config){
|
|
<b>this</b>.margins = config.margins || <b>this</b>.margins || {top: 0, left: 0, right:0, bottom: 0};
|
|
<b>this</b>.config = config;
|
|
},
|
|
|
|
<i>/**
|
|
* Resizes the region to the specified size. For vertical regions (west, east) <b>this</b> adjusts
|
|
* the width, <b>for</b> horizontal (north, south) the height.
|
|
* @param {Number} newSize The <b>new</b> width or height
|
|
*/</i>
|
|
resizeTo : <b>function</b>(newSize){
|
|
<b>var</b> el = <b>this</b>.el ? <b>this</b>.el :
|
|
(<b>this</b>.activePanel ? <b>this</b>.activePanel.getEl() : null);
|
|
<b>if</b>(el){
|
|
<b>switch</b>(this.position){
|
|
<b>case</b> "east":
|
|
<b>case</b> "west":
|
|
el.setWidth(newSize);
|
|
<b>this</b>.fireEvent("resized", <b>this</b>, newSize);
|
|
<b>break</b>;
|
|
<b>case</b> "north":
|
|
<b>case</b> "south":
|
|
el.setHeight(newSize);
|
|
<b>this</b>.fireEvent("resized", <b>this</b>, newSize);
|
|
<b>break</b>;
|
|
}
|
|
}
|
|
},
|
|
|
|
getBox : <b>function</b>(){
|
|
<b>return</b> this.activePanel ? <b>this</b>.activePanel.getEl().getBox(false, true) : null;
|
|
},
|
|
|
|
getMargins : <b>function</b>(){
|
|
<b>return</b> this.margins;
|
|
},
|
|
|
|
updateBox : <b>function</b>(box){
|
|
<b>this</b>.box = box;
|
|
<b>var</b> el = <b>this</b>.activePanel.getEl();
|
|
el.dom.style.left = box.x + "px";
|
|
el.dom.style.top = box.y + "px";
|
|
<b>this</b>.activePanel.setSize(box.width, box.height);
|
|
},
|
|
|
|
<i>/**
|
|
* Returns the container element <b>for</b> this region.
|
|
* @<b>return</b> {Ext.Element}
|
|
*/</i>
|
|
getEl : <b>function</b>(){
|
|
<b>return</b> this.activePanel;
|
|
},
|
|
|
|
<i>/**
|
|
* Returns true <b>if</b> this region is currently visible.
|
|
* @<b>return</b> {Boolean}
|
|
*/</i>
|
|
isVisible : <b>function</b>(){
|
|
<b>return</b> this.activePanel ? true : false;
|
|
},
|
|
|
|
setActivePanel : <b>function</b>(panel){
|
|
panel = <b>this</b>.getPanel(panel);
|
|
<b>if</b>(this.activePanel && <b>this</b>.activePanel != panel){
|
|
<b>this</b>.activePanel.setActiveState(false);
|
|
<b>this</b>.activePanel.getEl().setLeftTop(-10000,-10000);
|
|
}
|
|
<b>this</b>.activePanel = panel;
|
|
panel.setActiveState(true);
|
|
<b>if</b>(this.box){
|
|
panel.setSize(<b>this</b>.box.width, <b>this</b>.box.height);
|
|
}
|
|
<b>this</b>.fireEvent("panelactivated", <b>this</b>, panel);
|
|
<b>this</b>.fireEvent("invalidated");
|
|
},
|
|
|
|
<i>/**
|
|
* Show the specified panel.
|
|
* @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
|
|
* @<b>return</b> {Ext.ContentPanel} The shown panel or null
|
|
*/</i>
|
|
showPanel : <b>function</b>(panel){
|
|
<b>if</b>(panel = <b>this</b>.getPanel(panel)){
|
|
<b>this</b>.setActivePanel(panel);
|
|
}
|
|
<b>return</b> panel;
|
|
},
|
|
|
|
<i>/**
|
|
* Get the active panel <b>for</b> this region.
|
|
* @<b>return</b> {Ext.ContentPanel} The active panel or null
|
|
*/</i>
|
|
getActivePanel : <b>function</b>(){
|
|
<b>return</b> this.activePanel;
|
|
},
|
|
|
|
<i>/**
|
|
* Add the passed ContentPanel(s)
|
|
* @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
|
|
* @<b>return</b> {Ext.ContentPanel} The panel added (<b>if</b> only one was added)
|
|
*/</i>
|
|
add : <b>function</b>(panel){
|
|
<b>if</b>(arguments.length > 1){
|
|
<b>for</b>(var i = 0, len = arguments.length; i < len; i++) {
|
|
<b>this</b>.add(arguments[i]);
|
|
}
|
|
<b>return</b> null;
|
|
}
|
|
<b>if</b>(this.hasPanel(panel)){
|
|
<b>this</b>.showPanel(panel);
|
|
<b>return</b> panel;
|
|
}
|
|
<b>var</b> el = panel.getEl();
|
|
<b>if</b>(el.dom.parentNode != <b>this</b>.mgr.el.dom){
|
|
<b>this</b>.mgr.el.dom.appendChild(el.dom);
|
|
}
|
|
<b>if</b>(panel.setRegion){
|
|
panel.setRegion(<b>this</b>);
|
|
}
|
|
<b>this</b>.panels.add(panel);
|
|
el.setStyle("position", "absolute");
|
|
<b>if</b>(!panel.background){
|
|
<b>this</b>.setActivePanel(panel);
|
|
<b>if</b>(this.config.initialSize && <b>this</b>.panels.getCount()==1){
|
|
<b>this</b>.resizeTo(<b>this</b>.config.initialSize);
|
|
}
|
|
}
|
|
<b>this</b>.fireEvent("paneladded", <b>this</b>, panel);
|
|
<b>return</b> panel;
|
|
},
|
|
|
|
<i>/**
|
|
* Returns true <b>if</b> the panel is <b>in</b> this region.
|
|
* @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
|
|
* @<b>return</b> {Boolean}
|
|
*/</i>
|
|
hasPanel : <b>function</b>(panel){
|
|
<b>if</b>(typeof panel == "object"){ <i>// must be panel obj</i>
|
|
panel = panel.getId();
|
|
}
|
|
<b>return</b> this.getPanel(panel) ? true : false;
|
|
},
|
|
|
|
<i>/**
|
|
* Removes the specified panel. If preservePanel is not true (either here or <b>in</b> the config), the panel is destroyed.
|
|
* @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
|
|
* @param {Boolean} preservePanel Overrides the config preservePanel option
|
|
* @<b>return</b> {Ext.ContentPanel} The panel that was removed
|
|
*/</i>
|
|
remove : <b>function</b>(panel, preservePanel){
|
|
panel = <b>this</b>.getPanel(panel);
|
|
<b>if</b>(!panel){
|
|
<b>return</b> null;
|
|
}
|
|
<b>var</b> e = {};
|
|
<b>this</b>.fireEvent("beforeremove", <b>this</b>, panel, e);
|
|
<b>if</b>(e.cancel === true){
|
|
<b>return</b> null;
|
|
}
|
|
<b>var</b> panelId = panel.getId();
|
|
<b>this</b>.panels.removeKey(panelId);
|
|
<b>return</b> panel;
|
|
},
|
|
|
|
<i>/**
|
|
* Returns the panel specified or null <b>if</b> it's not <b>in</b> this region.
|
|
* @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
|
|
* @<b>return</b> {Ext.ContentPanel}
|
|
*/</i>
|
|
getPanel : <b>function</b>(id){
|
|
<b>if</b>(typeof id == "object"){ <i>// must be panel obj</i>
|
|
<b>return</b> id;
|
|
}
|
|
<b>return</b> this.panels.get(id);
|
|
},
|
|
|
|
<i>/**
|
|
* Returns <b>this</b> regions position (north/south/east/west/center).
|
|
* @<b>return</b> {String}
|
|
*/</i>
|
|
getPosition: <b>function</b>(){
|
|
<b>return</b> this.position;
|
|
}
|
|
});</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright © 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
|
|
</body></html> |