oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webgui/www/extras/yui-ext/docs/output/ContentPanels.jss.html
JT Smith 547ced6500 upgraded yui to 2.2.2 and yui-ext to 1.0.1a
2007-07-05 04:23:55 +00:00

467 lines
No EOL
19 KiB
HTML
Raw Blame History

<html><head><title>ContentPanels.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>ContentPanels.js</h1><pre class="highlighted"><code><i>/**
* @class Ext.ContentPanel
* @extends Ext.util.Observable
* A basic ContentPanel element.
* @cfg {Boolean} fitToFrame True <b>for</b> this panel to adjust its size to fit when the region resizes (defaults to false)
* @cfg {Boolean} fitContainer When using fitToFrame and resizeEl, you can also fit the parent container (defaults to false)
* @cfg {Boolean/Object} autoCreate True to auto generate the DOM element <b>for</b> this panel, or a DomHelper config of the element to create
* @cfg {Boolean} closable True <b>if</b> the panel can be closed/removed
* @cfg {Boolean} background True <b>if</b> the panel should not be activated when it is added (defaults to false)
* @cfg {String/HTMLElement/Element} resizeEl An element to resize <b>if</b> fitToFrame is true (instead of <b>this</b> panel's element)
* @cfg {Toolbar} toolbar A toolbar <b>for</b> this panel
* @cfg {Boolean} autoScroll True to scroll overflow <b>in</b> this panel (use <b>with</b> fitToFrame)
* @cfg {String} title The title <b>for</b> this panel
* @cfg {Array} adjustments Values to &lt;b&gt;add&lt;/b&gt; to the width/height when doing a fitToFrame (<b>default</b> is [0, 0])
* @cfg {String} url Calls setUrl() <b>with</b> this value
* @cfg {String/Object} params When used <b>with</b> &quot;url&quot;, calls setUrl() <b>with</b> this value
* @cfg {Boolean} loadOnce Calls When used <b>with</b> &quot;url&quot;, calls setUrl() <b>with</b> this value
* @constructor
* Create a <b>new</b> ContentPanel.
* @param {String/HTMLElement/Element} el The container element <b>for</b> this panel
* @param {String/Object} config A string to set only the title or a config object
* @param {String} content (optional) Set the HTML content <b>for</b> this panel
*/</i>
Ext.ContentPanel = <b>function</b>(el, config, content){
Ext.ContentPanel.superclass.constructor.call(<b>this</b>);
<b>if</b>(el.autoCreate){
config = el;
el = Ext.id();
}
<b>this</b>.el = Ext.get(el);
<b>if</b>(!<b>this</b>.el &amp;&amp; config &amp;&amp; config.autoCreate){
<b>if</b>(typeof config.autoCreate == &quot;object&quot;){
<b>if</b>(!config.autoCreate.id){
config.autoCreate.id = config.id||el;
}
<b>this</b>.el = Ext.DomHelper.append(document.body,
config.autoCreate, true);
}<b>else</b>{
<b>this</b>.el = Ext.DomHelper.append(document.body,
{tag: &quot;div&quot;, cls: &quot;x-layout-inactive-content&quot;, id: config.id||el}, true);
}
}
<b>this</b>.closable = false;
<b>this</b>.loaded = false;
<b>this</b>.active = false;
<b>if</b>(typeof config == &quot;string&quot;){
<b>this</b>.title = config;
}<b>else</b>{
Ext.apply(<b>this</b>, config);
}
<b>if</b>(this.resizeEl){
<b>this</b>.resizeEl = Ext.get(<b>this</b>.resizeEl, true);
}<b>else</b>{
<b>this</b>.resizeEl = <b>this</b>.el;
}
<b>this</b>.addEvents({
<i>/**
* @event activate
* Fires when <b>this</b> panel is activated.
* @param {Ext.ContentPanel} <b>this</b>
*/</i>
&quot;activate&quot; : true,
<i>/**
* @event deactivate
* Fires when <b>this</b> panel is activated.
* @param {Ext.ContentPanel} <b>this</b>
*/</i>
&quot;deactivate&quot; : true,
<i>/**
* @event resize
* Fires when <b>this</b> panel is resized <b>if</b> fitToFrame is true.
* @param {Ext.ContentPanel} <b>this</b>
* @param {Number} width The width after any component adjustments
* @param {Number} height The height after any component adjustments
*/</i>
&quot;resize&quot; : true
});
<b>if</b>(this.autoScroll){
<b>this</b>.resizeEl.setStyle(&quot;overflow&quot;, &quot;auto&quot;);
}
content = content || <b>this</b>.content;
<b>if</b>(content){
<b>this</b>.setContent(content);
}
<b>if</b>(config &amp;&amp; config.url){
<b>this</b>.setUrl(<b>this</b>.url, <b>this</b>.params, <b>this</b>.loadOnce);
}
};
Ext.extend(Ext.ContentPanel, Ext.util.Observable, {
tabTip:'',
setRegion : <b>function</b>(region){
<b>this</b>.region = region;
<b>if</b>(region){
<b>this</b>.el.replaceClass(&quot;x-layout-inactive-content&quot;, &quot;x-layout-active-content&quot;);
}<b>else</b>{
<b>this</b>.el.replaceClass(&quot;x-layout-active-content&quot;, &quot;x-layout-inactive-content&quot;);
}
},
<i>/**
* Returns the toolbar <b>for</b> this Panel <b>if</b> one was configured.
* @<b>return</b> {Ext.Toolbar}
*/</i>
getToolbar : <b>function</b>(){
<b>return</b> this.toolbar;
},
setActiveState : <b>function</b>(active){
<b>this</b>.active = active;
<b>if</b>(!active){
<b>this</b>.fireEvent(&quot;deactivate&quot;, <b>this</b>);
}<b>else</b>{
<b>this</b>.fireEvent(&quot;activate&quot;, <b>this</b>);
}
},
<i>/**
* Updates <b>this</b> panel's element
* @param {String} content The <b>new</b> content
* @param {Boolean} loadScripts (optional) true to look <b>for</b> and process scripts
*/</i>
setContent : <b>function</b>(content, loadScripts){
<b>this</b>.el.update(content, loadScripts);
},
ignoreResize : <b>function</b>(w, h){
<b>if</b>(this.lastSize &amp;&amp; <b>this</b>.lastSize.width == w &amp;&amp; <b>this</b>.lastSize.height == h){
<b>return</b> true;
}<b>else</b>{
<b>this</b>.lastSize = {width: w, height: h};
<b>return</b> false;
}
},
<i>/**
* Get the {@link Ext.UpdateManager} <b>for</b> this panel. Enables you to perform Ajax updates.
* @<b>return</b> {Ext.UpdateManager} The UpdateManager
*/</i>
getUpdateManager : <b>function</b>(){
<b>return</b> this.el.getUpdateManager();
},
<i>/**
* Loads <b>this</b> content panel immediately <b>with</b> content from XHR. Note: to delay loading until the panel is activated, use setUrl.
* @param {Object/String/Function} url The url <b>for</b> this request or a <b>function</b> to call to get the url or a config object containing any of the following options:
&lt;pre&gt;&lt;code&gt;
panel.load({&lt;br/&gt;
url: &quot;your-url.php&quot;,&lt;br/&gt;
params: {param1: &quot;foo&quot;, param2: &quot;bar&quot;}, <i>// or a URL encoded string&lt;br/&gt;</i>
callback: yourFunction,&lt;br/&gt;
scope: yourObject, <i>//(optional scope) &lt;br/&gt;</i>
discardUrl: false, &lt;br/&gt;
nocache: false,&lt;br/&gt;
text: &quot;Loading...&quot;,&lt;br/&gt;
timeout: 30,&lt;br/&gt;
scripts: false&lt;br/&gt;
});
&lt;/code&gt;&lt;/pre&gt;
* The only required property is url. The optional properties nocache, text and scripts
* are shorthand <b>for</b> disableCaching, indicatorText and loadScripts and are used to set their associated property on <b>this</b> panel UpdateManager instance.
* @param {String/Object} params (optional) The parameters to pass as either a url encoded string &quot;param1=1&amp;amp;param2=2&quot; or an object {param1: 1, param2: 2}
* @param {Function} callback (optional) Callback when transaction is complete - called <b>with</b> signature (oElement, bSuccess, oResponse)
* @param {Boolean} discardUrl (optional) By <b>default</b> when you execute an update the defaultUrl is changed to the last used url. If true, it will not store the url.
* @<b>return</b> {Ext.ContentPanel} <b>this</b>
*/</i>
load : <b>function</b>(){
<b>var</b> um = <b>this</b>.el.getUpdateManager();
um.update.apply(um, arguments);
<b>return</b> this;
},
<i>/**
* Set a URL to be used to load the content <b>for</b> this panel. When <b>this</b> panel is activated, the content will be loaded from that URL.
* @param {String/Function} url The url to load the content from or a <b>function</b> to call to get the url
* @param {String/Object} params (optional) The string params <b>for</b> the update call or an object of the params. See {@link Ext.UpdateManager#update} <b>for</b> more details. (Defaults to null)
* @param {Boolean} loadOnce (optional) Whether to only load the content once. If <b>this</b> is false it makes the Ajax call every time <b>this</b> panel is activated. (Defaults to false)
* @<b>return</b> {Ext.UpdateManager} The UpdateManager
*/</i>
setUrl : <b>function</b>(url, params, loadOnce){
<b>if</b>(this.refreshDelegate){
<b>this</b>.removeListener(&quot;activate&quot;, <b>this</b>.refreshDelegate);
}
<b>this</b>.refreshDelegate = <b>this</b>._handleRefresh.createDelegate(<b>this</b>, [url, params, loadOnce]);
<b>this</b>.on(&quot;activate&quot;, <b>this</b>._handleRefresh.createDelegate(<b>this</b>, [url, params, loadOnce]));
<b>return</b> this.el.getUpdateManager();
},
_handleRefresh : <b>function</b>(url, params, loadOnce){
<b>if</b>(!loadOnce || !<b>this</b>.loaded){
<b>var</b> updater = <b>this</b>.el.getUpdateManager();
updater.update(url, params, <b>this</b>._setLoaded.createDelegate(<b>this</b>));
}
},
_setLoaded : <b>function</b>(){
<b>this</b>.loaded = true;
},
<i>/**
* Returns <b>this</b> panel's id
* @<b>return</b> {String}
*/</i>
getId : <b>function</b>(){
<b>return</b> this.el.id;
},
<i>/**
* Returns <b>this</b> panel's element
* @<b>return</b> {Ext.Element}
*/</i>
getEl : <b>function</b>(){
<b>return</b> this.el;
},
adjustForComponents : <b>function</b>(width, height){
<b>if</b>(this.resizeEl != <b>this</b>.el){
width -= <b>this</b>.el.getFrameWidth('lr');
height -= <b>this</b>.el.getFrameWidth('tb');
}
<b>if</b>(this.toolbar){
<b>var</b> te = <b>this</b>.toolbar.getEl();
height -= te.getHeight();
te.setWidth(width);
}
<b>if</b>(this.adjustments){
width += <b>this</b>.adjustments[0];
height += <b>this</b>.adjustments[1];
}
<b>return</b> {&quot;width&quot;: width, &quot;height&quot;: height};
},
setSize : <b>function</b>(width, height){
<b>if</b>(this.fitToFrame &amp;&amp; !<b>this</b>.ignoreResize(width, height)){
<b>if</b>(this.fitContainer &amp;&amp; <b>this</b>.resizeEl != <b>this</b>.el){
<b>this</b>.el.setSize(width, height);
}
<b>var</b> size = <b>this</b>.adjustForComponents(width, height);
<b>this</b>.resizeEl.setSize(<b>this</b>.autoWidth ? &quot;auto&quot; : size.width, <b>this</b>.autoHeight ? &quot;auto&quot; : size.height);
<b>this</b>.fireEvent('resize', <b>this</b>, size.width, size.height);
}
},
<i>/**
* Returns <b>this</b> panel's title
* @<b>return</b> {String}
*/</i>
getTitle : <b>function</b>(){
<b>return</b> this.title;
},
<i>/**
* Set <b>this</b> panel's title
* @param {String} title
*/</i>
setTitle : <b>function</b>(title){
<b>this</b>.title = title;
<b>if</b>(this.region){
<b>this</b>.region.updatePanelTitle(<b>this</b>, title);
}
},
<i>/**
* Returns true is <b>this</b> panel was configured to be closable
* @<b>return</b> {Boolean}
*/</i>
isClosable : <b>function</b>(){
<b>return</b> this.closable;
},
beforeSlide : <b>function</b>(){
<b>this</b>.el.clip();
<b>this</b>.resizeEl.clip();
},
afterSlide : <b>function</b>(){
<b>this</b>.el.unclip();
<b>this</b>.resizeEl.unclip();
},
<i>/**
* Force a content refresh from the URL specified <b>in</b> the setUrl() method.
* Will fail silently <b>if</b> the setUrl method has not been called.
* This does not activate the panel, just updates its content.
*/</i>
refresh : <b>function</b>(){
<b>if</b>(this.refreshDelegate){
<b>this</b>.loaded = false;
<b>this</b>.refreshDelegate();
}
},
<i>/**
* Destroys <b>this</b> panel
*/</i>
destroy : <b>function</b>(){
<b>this</b>.el.removeAllListeners();
<b>var</b> tempEl = document.createElement(&quot;span&quot;);
tempEl.appendChild(<b>this</b>.el.dom);
tempEl.innerHTML = &quot;&quot;;
<b>this</b>.el.remove();
<b>this</b>.el = null;
}
});
<i>/**
* @class Ext.GridPanel
* @extends Ext.ContentPanel
* @constructor
* Create a <b>new</b> GridPanel.
* @param {Ext.grid.Grid} grid The grid <b>for</b> this panel
* @param {String/Object} config A string to set only the title or a config object
*/</i>
Ext.GridPanel = <b>function</b>(grid, config){
<b>this</b>.wrapper = Ext.DomHelper.append(document.body, <i>// wrapper <b>for</b> IE7 strict &amp; safari scroll issue</i>
{tag: &quot;div&quot;, cls: &quot;x-layout-grid-wrapper x-layout-inactive-content&quot;}, true);
<b>this</b>.wrapper.dom.appendChild(grid.container.dom);
Ext.GridPanel.superclass.constructor.call(<b>this</b>, <b>this</b>.wrapper, config);
<b>if</b>(this.toolbar){
<b>this</b>.toolbar.el.insertBefore(<b>this</b>.wrapper.dom.firstChild);
}
grid.monitorWindowResize = false; <i>// turn off autosizing</i>
grid.autoHeight = false;
grid.autoWidth = false;
<b>this</b>.grid = grid;
<b>this</b>.grid.container.replaceClass(&quot;x-layout-inactive-content&quot;, &quot;x-layout-component-panel&quot;);
};
Ext.extend(Ext.GridPanel, Ext.ContentPanel, {
getId : <b>function</b>(){
<b>return</b> this.grid.id;
},
<i>/**
* Returns the grid <b>for</b> this panel
* @<b>return</b> {Ext.grid.Grid}
*/</i>
getGrid : <b>function</b>(){
<b>return</b> this.grid;
},
setSize : <b>function</b>(width, height){
<b>if</b>(!<b>this</b>.ignoreResize(width, height)){
<b>var</b> grid = <b>this</b>.grid;
<b>var</b> size = <b>this</b>.adjustForComponents(width, height);
grid.container.setSize(size.width, size.height);
grid.autoSize();
}
},
beforeSlide : <b>function</b>(){
<b>this</b>.grid.getView().scroller.clip();
},
afterSlide : <b>function</b>(){
<b>this</b>.grid.getView().scroller.unclip();
},
destroy : <b>function</b>(){
<b>this</b>.grid.destroy();
<b>delete</b> this.grid;
Ext.GridPanel.superclass.destroy.call(<b>this</b>);
}
});
<i>/**
* @class Ext.NestedLayoutPanel
* @extends Ext.ContentPanel
* @constructor
* Create a <b>new</b> NestedLayoutPanel.
* @param {Ext.BorderLayout} layout The layout <b>for</b> this panel
* @param {String/Object} config A string to set only the title or a config object
*/</i>
Ext.NestedLayoutPanel = <b>function</b>(layout, config){
Ext.NestedLayoutPanel.superclass.constructor.call(<b>this</b>, layout.getEl(), config);
layout.monitorWindowResize = false; <i>// turn off autosizing</i>
<b>this</b>.layout = layout;
<b>this</b>.layout.getEl().addClass(&quot;x-layout-nested-layout&quot;);
};
Ext.extend(Ext.NestedLayoutPanel, Ext.ContentPanel, {
setSize : <b>function</b>(width, height){
<b>if</b>(!<b>this</b>.ignoreResize(width, height)){
<b>var</b> size = <b>this</b>.adjustForComponents(width, height);
<b>var</b> el = <b>this</b>.layout.getEl();
el.setSize(size.width, size.height);
<b>var</b> touch = el.dom.offsetWidth;
<b>this</b>.layout.layout();
<i>// ie requires a double layout on the first pass</i>
<b>if</b>(Ext.isIE &amp;&amp; !<b>this</b>.initialized){
<b>this</b>.initialized = true;
<b>this</b>.layout.layout();
}
}
},
<i>/**
* Returns the nested BorderLayout <b>for</b> this panel
* @<b>return</b> {Ext.BorderLayout}
*/</i>
getLayout : <b>function</b>(){
<b>return</b> this.layout;
}
});
Ext.ScrollPanel = <b>function</b>(el, config, content){
config = config || {};
config.fitToFrame = true;
Ext.ScrollPanel.superclass.constructor.call(<b>this</b>, el, config, content);
<b>this</b>.el.dom.style.overflow = &quot;hidden&quot;;
<b>var</b> wrap = <b>this</b>.el.wrap({cls: &quot;x-scroller x-layout-inactive-content&quot;});
<b>this</b>.el.removeClass(&quot;x-layout-inactive-content&quot;);
<b>this</b>.el.on(&quot;mousewheel&quot;, <b>this</b>.onWheel, <b>this</b>);
<b>var</b> up = wrap.createChild({cls: &quot;x-scroller-up&quot;, html: &quot;&amp;#160;&quot;}, <b>this</b>.el.dom);
<b>var</b> down = wrap.createChild({cls: &quot;x-scroller-down&quot;, html: &quot;&amp;#160;&quot;});
up.unselectable(); down.unselectable();
up.on(&quot;click&quot;, <b>this</b>.scrollUp, <b>this</b>);
down.on(&quot;click&quot;, <b>this</b>.scrollDown, <b>this</b>);
up.addClassOnOver(&quot;x-scroller-btn-over&quot;);
down.addClassOnOver(&quot;x-scroller-btn-over&quot;);
up.addClassOnClick(&quot;x-scroller-btn-click&quot;);
down.addClassOnClick(&quot;x-scroller-btn-click&quot;);
<b>this</b>.adjustments = [0, -(up.getHeight() + down.getHeight())];
<b>this</b>.resizeEl = <b>this</b>.el;
<b>this</b>.el = wrap; <b>this</b>.up = up; <b>this</b>.down = down;
};
Ext.extend(Ext.ScrollPanel, Ext.ContentPanel, {
increment : 100,
wheelIncrement : 5,
scrollUp : <b>function</b>(){
<b>this</b>.resizeEl.scroll(&quot;up&quot;, <b>this</b>.increment, {callback: <b>this</b>.afterScroll, scope: <b>this</b>});
},
scrollDown : <b>function</b>(){
<b>this</b>.resizeEl.scroll(&quot;down&quot;, <b>this</b>.increment, {callback: <b>this</b>.afterScroll, scope: <b>this</b>});
},
afterScroll : <b>function</b>(){
<b>var</b> el = <b>this</b>.resizeEl;
<b>var</b> t = el.dom.scrollTop, h = el.dom.scrollHeight, ch = el.dom.clientHeight;
<b>this</b>.up[t == 0 ? &quot;addClass&quot; : &quot;removeClass&quot;](&quot;x-scroller-btn-disabled&quot;);
<b>this</b>.down[h - t &lt;= ch ? &quot;addClass&quot; : &quot;removeClass&quot;](&quot;x-scroller-btn-disabled&quot;);
},
setSize : <b>function</b>(){
Ext.ScrollPanel.superclass.setSize.apply(<b>this</b>, arguments);
<b>this</b>.afterScroll();
},
onWheel : <b>function</b>(e){
<b>var</b> d = e.getWheelDelta();
<b>this</b>.resizeEl.dom.scrollTop -= (d*<b>this</b>.wheelIncrement);
<b>this</b>.afterScroll();
e.stopEvent();
},
setContent : <b>function</b>(content, loadScripts){
<b>this</b>.resizeEl.update(content, loadScripts);
}
});</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright &copy; 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
</body></html>
Reference in a new issue View git blame Copy permalink