98 lines
No EOL
4.2 KiB
HTML
98 lines
No EOL
4.2 KiB
HTML
<html><head><title>ReaderLayout.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>ReaderLayout.js</h1><pre class="highlighted"><code><i>/**
|
|
* @class Ext.ReaderLayout
|
|
* @extends Ext.BorderLayout
|
|
* This is a pre-built layout that represents a classic, 5-pane application. It consists of a header, a primary
|
|
* center region containing two nested regions (a top one <b>for</b> a list view and one <b>for</b> item preview below),
|
|
* and regions on either side that can be used <b>for</b> navigation, application commands, informational displays, etc.
|
|
* The setup and configuration work exactly the same as it does <b>for</b> a {@link Ext.BorderLayout} - <b>this</b> class simply
|
|
* expedites the setup of the overall layout and regions <b>for</b> this common application style.
|
|
* Example:
|
|
<pre><code>
|
|
<b>var</b> reader = <b>new</b> Ext.ReaderLayout();
|
|
<b>var</b> CP = Ext.ContentPanel; <i>// shortcut <b>for</b> adding</i>
|
|
|
|
reader.beginUpdate();
|
|
reader.add("north", <b>new</b> CP("north", "North"));
|
|
reader.add("west", <b>new</b> CP("west", {title: "West"}));
|
|
reader.add("east", <b>new</b> CP("east", {title: "East"}));
|
|
|
|
reader.regions.listView.add(<b>new</b> CP("listView", "List"));
|
|
reader.regions.preview.add(<b>new</b> CP("preview", "Preview"));
|
|
reader.endUpdate();
|
|
</code></pre>
|
|
* @constructor
|
|
* Create a <b>new</b> ReaderLayout
|
|
* @param {Object} config Configuration options
|
|
* @param {String/HTMLElement/Element} container (optional) The container <b>this</b> layout is bound to (defaults to
|
|
* document.body <b>if</b> omitted)
|
|
*/</i>
|
|
Ext.ReaderLayout = <b>function</b>(config, renderTo){
|
|
<b>var</b> c = config || {size:{}};
|
|
Ext.ReaderLayout.superclass.constructor.call(<b>this</b>, renderTo || document.body, {
|
|
north: c.north !== false ? Ext.apply({
|
|
split:false,
|
|
initialSize: 32,
|
|
titlebar: false
|
|
}, c.north) : false,
|
|
west: c.west !== false ? Ext.apply({
|
|
split:true,
|
|
initialSize: 200,
|
|
minSize: 175,
|
|
maxSize: 400,
|
|
titlebar: true,
|
|
collapsible: true,
|
|
animate: true,
|
|
margins:{left:5,right:0,bottom:5,top:5},
|
|
cmargins:{left:5,right:5,bottom:5,top:5}
|
|
}, c.west) : false,
|
|
east: c.east !== false ? Ext.apply({
|
|
split:true,
|
|
initialSize: 200,
|
|
minSize: 175,
|
|
maxSize: 400,
|
|
titlebar: true,
|
|
collapsible: true,
|
|
animate: true,
|
|
margins:{left:0,right:5,bottom:5,top:5},
|
|
cmargins:{left:5,right:5,bottom:5,top:5}
|
|
}, c.east) : false,
|
|
center: Ext.apply({
|
|
tabPosition: 'top',
|
|
autoScroll:false,
|
|
closeOnTab: true,
|
|
titlebar:false,
|
|
margins:{left:c.west!==false ? 0 : 5,right:c.east!==false ? 0 : 5,bottom:5,top:2}
|
|
}, c.center)
|
|
});
|
|
|
|
<b>this</b>.el.addClass('x-reader');
|
|
|
|
<b>this</b>.beginUpdate();
|
|
|
|
<b>var</b> inner = <b>new</b> Ext.BorderLayout(Ext.get(document.body).createChild(), {
|
|
south: c.preview !== false ? Ext.apply({
|
|
split:true,
|
|
initialSize: 200,
|
|
minSize: 100,
|
|
autoScroll:true,
|
|
collapsible:true,
|
|
titlebar: true,
|
|
cmargins:{top:5,left:0, right:0, bottom:0}
|
|
}, c.preview) : false,
|
|
center: Ext.apply({
|
|
autoScroll:false,
|
|
titlebar:false,
|
|
minHeight:200
|
|
}, c.listView)
|
|
});
|
|
<b>this</b>.add('center', <b>new</b> Ext.NestedLayoutPanel(inner,
|
|
Ext.apply({title: c.mainTitle || '',tabTip:''},c.innerPanelCfg)));
|
|
|
|
<b>this</b>.endUpdate();
|
|
|
|
<b>this</b>.regions.preview = inner.getRegion('south');
|
|
<b>this</b>.regions.listView = inner.getRegion('center');
|
|
};
|
|
|
|
Ext.extend(Ext.ReaderLayout, Ext.BorderLayout);</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> |