开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > 中间件编程 > 查看源码
BorderLayout.js
资源名称：ext-3.0.0.zip　[点击查看]
上传用户：shuoshiled
上传日期：2018-01-28
资源大小：10124k
文件大小：40k
源码类别：

中间件编程

开发平台：

JavaScript

BorderLayout.js：源码内容
  1. /*!
  2.  * Ext JS Library 3.0.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  4.  * licensing@extjs.com
  5.  * http://www.extjs.com/license
  6.  */
  7. /**
  8.  * @class Ext.layout.BorderLayout
  9.  * @extends Ext.layout.ContainerLayout
  10.  * <p>This is a multi-pane, application-oriented UI layout style that supports multiple
  11.  * nested panels, automatic {@link Ext.layout.BorderLayout.Region#split split} bars between
  12.  * {@link Ext.layout.BorderLayout.Region#BorderLayout.Region regions} and built-in
  13.  * {@link Ext.layout.BorderLayout.Region#collapsible expanding and collapsing} of regions.</p>
  14.  * <p>This class is intended to be extended or created via the <tt>layout:'border'</tt>
  15.  * {@link Ext.Container#layout} config, and should generally not need to be created directly
  16.  * via the new keyword.</p>
  17.  * <p>BorderLayout does not have any direct config options (other than inherited ones).
  18.  * All configuration options available for customizing the BorderLayout are at the
  19.  * {@link Ext.layout.BorderLayout.Region} and {@link Ext.layout.BorderLayout.SplitRegion}
  20.  * levels.</p>
  21.  * <p>Example usage:</p>
  22.  * <pre><code>
  23. var myBorderPanel = new Ext.Panel({
  24.     {@link Ext.Component#renderTo renderTo}: document.body,
  25.     {@link Ext.BoxComponent#width width}: 700,
  26.     {@link Ext.BoxComponent#height height}: 500,
  27.     {@link Ext.Panel#title title}: 'Border Layout',
  28.     {@link Ext.Container#layout layout}: 'border',
  29.     {@link Ext.Container#items items}: [{
  30.         {@link Ext.Panel#title title}: 'South Region is resizable',
  31.         {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'south',     // position for region
  32.         {@link Ext.BoxComponent#height height}: 100,
  33.         {@link Ext.layout.BorderLayout.Region#split split}: true,         // enable resizing
  34.         {@link Ext.SplitBar#minSize minSize}: 75,         // defaults to {@link Ext.layout.BorderLayout.Region#minHeight 50} 
  35.         {@link Ext.SplitBar#maxSize maxSize}: 150,
  36.         {@link Ext.layout.BorderLayout.Region#margins margins}: '0 5 5 5'
  37.     },{
  38.         // xtype: 'panel' implied by default
  39.         {@link Ext.Panel#title title}: 'West Region is collapsible',
  40.         {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}:'west',
  41.         {@link Ext.layout.BorderLayout.Region#margins margins}: '5 0 0 5',
  42.         {@link Ext.BoxComponent#width width}: 200,
  43.         {@link Ext.layout.BorderLayout.Region#collapsible collapsible}: true,   // make collapsible
  44.         {@link Ext.layout.BorderLayout.Region#cmargins cmargins}: '5 5 0 5', // adjust top margin when collapsed
  45.         {@link Ext.Component#id id}: 'west-region-container',
  46.         {@link Ext.Container#layout layout}: 'fit',
  47.         {@link Ext.Panel#unstyled unstyled}: true
  48.     },{
  49.         {@link Ext.Panel#title title}: 'Center Region',
  50.         {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'center',     // center region is required, no width/height specified
  51.         {@link Ext.Component#xtype xtype}: 'container',
  52.         {@link Ext.Container#layout layout}: 'fit',
  53.         {@link Ext.layout.BorderLayout.Region#margins margins}: '5 5 0 0'
  54.     }]
  55. });
  56. </code></pre>
  57.  * <p><b><u>Notes</u></b>:</p><div class="mdetail-params"><ul>
  58.  * <li>Any container using the BorderLayout <b>must</b> have a child item with <tt>region:'center'</tt>.
  59.  * The child item in the center region will always be resized to fill the remaining space not used by
  60.  * the other regions in the layout.</li>
  61.  * <li>Any child items with a region of <tt>west</tt> or <tt>east</tt> must have <tt>width</tt> defined
  62.  * (an integer representing the number of pixels that the region should take up).</li>
  63.  * <li>Any child items with a region of <tt>north</tt> or <tt>south</tt> must have <tt>height</tt> defined.</li>
  64.  * <li>The regions of a BorderLayout are <b>fixed at render time</b> and thereafter, its child Components may not be removed or added</b>.  To add/remove
  65.  * Components within a BorderLayout, have them wrapped by an additional Container which is directly
  66.  * managed by the BorderLayout.  If the region is to be collapsible, the Container used directly
  67.  * by the BorderLayout manager should be a Panel.  In the following example a Container (an Ext.Panel)
  68.  * is added to the west region:
  69.  * <div style="margin-left:16px"><pre><code>
  70. wrc = {@link Ext#getCmp Ext.getCmp}('west-region-container');
  71. wrc.{@link Ext.Panel#removeAll removeAll}();
  72. wrc.{@link Ext.Container#add add}({
  73.     title: 'Added Panel',
  74.     html: 'Some content'
  75. });
  76. wrc.{@link Ext.Container#doLayout doLayout}();
  77.  * </code></pre></div>
  78.  * </li>
  79.  * <li> To reference a {@link Ext.layout.BorderLayout.Region Region}:
  80.  * <div style="margin-left:16px"><pre><code>
  81. wr = myBorderPanel.layout.west;
  82.  * </code></pre></div>
  83.  * </li>
  84.  * </ul></div>
  85.  */
  86. Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, {
  87.     // private
  88.     monitorResize:true,
  89.     // private
  90.     rendered : false,
  92.     // private
  93.     onLayout : function(ct, target){
  94.         var collapsed;
  95.         if(!this.rendered){
  96.             target.addClass('x-border-layout-ct');
  97.             var items = ct.items.items;
  98.             collapsed = [];
  99.             for(var i = 0, len = items.length; i < len; i++) {
  100.                 var c = items[i];
  101.                 var pos = c.region;
  102.                 if(c.collapsed){
  103.                     collapsed.push(c);
  104.                 }
  105.                 c.collapsed = false;
  106.                 if(!c.rendered){
  107.                     c.cls = c.cls ? c.cls +' x-border-panel' : 'x-border-panel';
  108.                     c.render(target, i);
  109.                 }
  110.                 this[pos] = pos != 'center' && c.split ?
  111.                     new Ext.layout.BorderLayout.SplitRegion(this, c.initialConfig, pos) :
  112.                     new Ext.layout.BorderLayout.Region(this, c.initialConfig, pos);
  113.                 this[pos].render(target, c);
  114.             }
  115.             this.rendered = true;
  116.         }
  118.         var size = target.getViewSize();
  119.         if(size.width < 20 || size.height < 20){ // display none?
  120.             if(collapsed){
  121.                 this.restoreCollapsed = collapsed;
  122.             }
  123.             return;
  124.         }else if(this.restoreCollapsed){
  125.             collapsed = this.restoreCollapsed;
  126.             delete this.restoreCollapsed;
  127.         }
  129.         var w = size.width, h = size.height;
  130.         var centerW = w, centerH = h, centerY = 0, centerX = 0;
  132.         var n = this.north, s = this.south, west = this.west, e = this.east, c = this.center;
  133.         if(!c && Ext.layout.BorderLayout.WARN !== false){
  134.             throw 'No center region defined in BorderLayout ' + ct.id;
  135.         }
  137.         if(n && n.isVisible()){
  138.             var b = n.getSize();
  139.             var m = n.getMargins();
  140.             b.width = w - (m.left+m.right);
  141.             b.x = m.left;
  142.             b.y = m.top;
  143.             centerY = b.height + b.y + m.bottom;
  144.             centerH -= centerY;
  145.             n.applyLayout(b);
  146.         }
  147.         if(s && s.isVisible()){
  148.             var b = s.getSize();
  149.             var m = s.getMargins();
  150.             b.width = w - (m.left+m.right);
  151.             b.x = m.left;
  152.             var totalHeight = (b.height + m.top + m.bottom);
  153.             b.y = h - totalHeight + m.top;
  154.             centerH -= totalHeight;
  155.             s.applyLayout(b);
  156.         }
  157.         if(west && west.isVisible()){
  158.             var b = west.getSize();
  159.             var m = west.getMargins();
  160.             b.height = centerH - (m.top+m.bottom);
  161.             b.x = m.left;
  162.             b.y = centerY + m.top;
  163.             var totalWidth = (b.width + m.left + m.right);
  164.             centerX += totalWidth;
  165.             centerW -= totalWidth;
  166.             west.applyLayout(b);
  167.         }
  168.         if(e && e.isVisible()){
  169.             var b = e.getSize();
  170.             var m = e.getMargins();
  171.             b.height = centerH - (m.top+m.bottom);
  172.             var totalWidth = (b.width + m.left + m.right);
  173.             b.x = w - totalWidth + m.left;
  174.             b.y = centerY + m.top;
  175.             centerW -= totalWidth;
  176.             e.applyLayout(b);
  177.         }
  178.         if(c){
  179.             var m = c.getMargins();
  180.             var centerBox = {
  181.                 x: centerX + m.left,
  182.                 y: centerY + m.top,
  183.                 width: centerW - (m.left+m.right),
  184.                 height: centerH - (m.top+m.bottom)
  185.             };
  186.             c.applyLayout(centerBox);
  187.         }
  188.         if(collapsed){
  189.             for(var i = 0, len = collapsed.length; i < len; i++){
  190.                 collapsed[i].collapse(false);
  191.             }
  192.         }
  193.         if(Ext.isIE && Ext.isStrict){ // workaround IE strict repainting issue
  194.             target.repaint();
  195.         }
  196.     },
  198.     destroy: function() {
  199.         var r = ['north', 'south', 'east', 'west'];
  200.         for (var i = 0; i < r.length; i++) {
  201.             var region = this[r[i]];
  202.             if(region){
  203.                 if(region.destroy){
  204.                     region.destroy();
  205.                 }else if (region.split){
  206.                     region.split.destroy(true);
  207.                 }
  208.             }
  209.         }
  210.         Ext.layout.BorderLayout.superclass.destroy.call(this);
  211.     }
  213.     /**
  214.      * @property activeItem
  215.      * @hide
  216.      */
  217. });
  219. /**
  220.  * @class Ext.layout.BorderLayout.Region
  221.  * <p>This is a region of a {@link Ext.layout.BorderLayout BorderLayout} that acts as a subcontainer
  222.  * within the layout.  Each region has its own {@link Ext.layout.ContainerLayout layout} that is
  223.  * independent of other regions and the containing BorderLayout, and can be any of the
  224.  * {@link Ext.layout.ContainerLayout valid Ext layout types}.</p>
  225.  * <p>Region size is managed automatically and cannot be changed by the user -- for
  226.  * {@link #split resizable regions}, see {@link Ext.layout.BorderLayout.SplitRegion}.</p>
  227.  * @constructor
  228.  * Create a new Region.
  229.  * @param {Layout} layout The {@link Ext.layout.BorderLayout BorderLayout} instance that is managing this Region.
  230.  * @param {Object} config The configuration options
  231.  * @param {String} position The region position.  Valid values are: <tt>north</tt>, <tt>south</tt>,
  232.  * <tt>east</tt>, <tt>west</tt> and <tt>center</tt>.  Every {@link Ext.layout.BorderLayout BorderLayout}
  233.  * <b>must have a center region</b> for the primary content -- all other regions are optional.
  234.  */
  235. Ext.layout.BorderLayout.Region = function(layout, config, pos){
  236.     Ext.apply(this, config);
  237.     this.layout = layout;
  238.     this.position = pos;
  239.     this.state = {};
  240.     if(typeof this.margins == 'string'){
  241.         this.margins = this.layout.parseMargins(this.margins);
  242.     }
  243.     this.margins = Ext.applyIf(this.margins || {}, this.defaultMargins);
  244.     if(this.collapsible){
  245.         if(typeof this.cmargins == 'string'){
  246.             this.cmargins = this.layout.parseMargins(this.cmargins);
  247.         }
  248.         if(this.collapseMode == 'mini' && !this.cmargins){
  249.             this.cmargins = {left:0,top:0,right:0,bottom:0};
  250.         }else{
  251.             this.cmargins = Ext.applyIf(this.cmargins || {},
  252.                 pos == 'north' || pos == 'south' ? this.defaultNSCMargins : this.defaultEWCMargins);
  253.         }
  254.     }
  255. };
  257. Ext.layout.BorderLayout.Region.prototype = {
  258.     /**
  259.      * @cfg {Boolean} animFloat
  260.      * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated
  261.      * panel that will close again once the user mouses out of that panel (or clicks out if
  262.      * <tt>{@link #autoHide} = false</tt>).  Setting <tt>{@link #animFloat} = false</tt> will
  263.      * prevent the open and close of these floated panels from being animated (defaults to <tt>true</tt>).
  264.      */
  265.     /**
  266.      * @cfg {Boolean} autoHide
  267.      * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated
  268.      * panel.  If <tt>autoHide = true</tt>, the panel will automatically hide after the user mouses
  269.      * out of the panel.  If <tt>autoHide = false</tt>, the panel will continue to display until the
  270.      * user clicks outside of the panel (defaults to <tt>true</tt>).
  271.      */
  272.     /**
  273.      * @cfg {String} collapseMode
  274.      * <tt>collapseMode</tt> supports two configuration values:<div class="mdetail-params"><ul>
  275.      * <li><b><tt>undefined</tt></b> (default)<div class="sub-desc">By default, {@link #collapsible}
  276.      * regions are collapsed by clicking the expand/collapse tool button that renders into the region's
  277.      * title bar.</div></li>
  278.      * <li><b><tt>'mini'</tt></b><div class="sub-desc">Optionally, when <tt>collapseMode</tt> is set to
  279.      * <tt>'mini'</tt> the region's split bar will also display a small collapse button in the center of
  280.      * the bar. In <tt>'mini'</tt> mode the region will collapse to a thinner bar than in normal mode.
  281.      * </div></li>
  282.      * </ul></div></p>
  283.      * <p><b>Note</b>: if a collapsible region does not have a title bar, then set <tt>collapseMode =
  284.      * 'mini'</tt> and <tt>{@link #split} = true</tt> in order for the region to be {@link #collapsible}
  285.      * by the user as the expand/collapse tool button (that would go in the title bar) will not be rendered.</p>
  286.      * <p>See also <tt>{@link #cmargins}</tt>.</p>
  287.      */
  288.     /**
  289.      * @cfg {Object} margins
  290.      * An object containing margins to apply to the region when in the expanded state in the
  291.      * format:<pre><code>
  292. {
  293.     top: (top margin),
  294.     right: (right margin),
  295.     bottom: (bottom margin),
  296.     left: (left margin)
  297. }</code></pre>
  298.      * <p>May also be a string containing space-separated, numeric margin values. The order of the
  299.      * sides associated with each value matches the way CSS processes margin values:</p>
  300.      * <p><div class="mdetail-params"><ul>
  301.      * <li>If there is only one value, it applies to all sides.</li>
  302.      * <li>If there are two values, the top and bottom borders are set to the first value and the
  303.      * right and left are set to the second.</li>
  304.      * <li>If there are three values, the top is set to the first value, the left and right are set
  305.      * to the second, and the bottom is set to the third.</li>
  306.      * <li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li>
  307.      * </ul></div></p>
  308.      * <p>Defaults to:</p><pre><code>
  309.      * {top:0, right:0, bottom:0, left:0}
  310.      * </code></pre>
  311.      */
  312.     /**
  313.      * @cfg {Object} cmargins
  314.      * An object containing margins to apply to the region when in the collapsed state in the
  315.      * format:<pre><code>
  316. {
  317.     top: (top margin),
  318.     right: (right margin),
  319.     bottom: (bottom margin),
  320.     left: (left margin)
  321. }</code></pre>
  322.      * <p>May also be a string containing space-separated, numeric margin values. The order of the
  323.      * sides associated with each value matches the way CSS processes margin values.</p>
  324.      * <p><ul>
  325.      * <li>If there is only one value, it applies to all sides.</li>
  326.      * <li>If there are two values, the top and bottom borders are set to the first value and the
  327.      * right and left are set to the second.</li>
  328.      * <li>If there are three values, the top is set to the first value, the left and right are set
  329.      * to the second, and the bottom is set to the third.</li>
  330.      * <li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li>
  331.      * </ul></p>
  332.      */
  333.     /**
  334.      * @cfg {Boolean} collapsible
  335.      * <p><tt>true</tt> to allow the user to collapse this region (defaults to <tt>false</tt>).  If
  336.      * <tt>true</tt>, an expand/collapse tool button will automatically be rendered into the title
  337.      * bar of the region, otherwise the button will not be shown.</p>
  338.      * <p><b>Note</b>: that a title bar is required to display the collapse/expand toggle button -- if
  339.      * no <tt>title</tt> is specified for the region's panel, the region will only be collapsible if
  340.      * <tt>{@link #collapseMode} = 'mini'</tt> and <tt>{@link #split} = true</tt>.
  341.      */
  342.     collapsible : false,
  343.     /**
  344.      * @cfg {Boolean} split
  345.      * <p><tt>true</tt> to create a {@link Ext.layout.BorderLayout.SplitRegion SplitRegion} and 
  346.      * display a 5px wide {@link Ext.SplitBar} between this region and its neighbor, allowing the user to
  347.      * resize the regions dynamically.  Defaults to <tt>false</tt> creating a
  348.      * {@link Ext.layout.BorderLayout.Region Region}.</p><br>
  349.      * <p><b>Notes</b>:</p><div class="mdetail-params"><ul>
  350.      * <li>this configuration option is ignored if <tt>region='center'</tt></li> 
  351.      * <li>when <tt>split == true</tt>, it is common to specify a
  352.      * <tt>{@link Ext.SplitBar#minSize minSize}</tt> and <tt>{@link Ext.SplitBar#maxSize maxSize}</tt>
  353.      * for the {@link Ext.BoxComponent BoxComponent} representing the region. These are not native
  354.      * configs of {@link Ext.BoxComponent BoxComponent}, and are used only by this class.</li>
  355.      * <li>if <tt>{@link #collapseMode} = 'mini'</tt> requires <tt>split = true</tt> to reserve space
  356.      * for the collapse tool</tt></li> 
  357.      * </ul></div> 
  358.      */
  359.     split:false,
  360.     /**
  361.      * @cfg {Boolean} floatable
  362.      * <tt>true</tt> to allow clicking a collapsed region's bar to display the region's panel floated
  363.      * above the layout, <tt>false</tt> to force the user to fully expand a collapsed region by
  364.      * clicking the expand button to see it again (defaults to <tt>true</tt>).
  365.      */
  366.     floatable: true,
  367.     /**
  368.      * @cfg {Number} minWidth
  369.      * <p>The minimum allowable width in pixels for this region (defaults to <tt>50</tt>).
  370.      * <tt>maxWidth</tt> may also be specified.</p><br>
  371.      * <p><b>Note</b>: setting the <tt>{@link Ext.SplitBar#minSize minSize}</tt> / 
  372.      * <tt>{@link Ext.SplitBar#maxSize maxSize}</tt> supersedes any specified 
  373.      * <tt>minWidth</tt> / <tt>maxWidth</tt>.</p>
  374.      */
  375.     minWidth:50,
  376.     /**
  377.      * @cfg {Number} minHeight
  378.      * The minimum allowable height in pixels for this region (defaults to <tt>50</tt>)
  379.      * <tt>maxHeight</tt> may also be specified.</p><br>
  380.      * <p><b>Note</b>: setting the <tt>{@link Ext.SplitBar#minSize minSize}</tt> / 
  381.      * <tt>{@link Ext.SplitBar#maxSize maxSize}</tt> supersedes any specified 
  382.      * <tt>minHeight</tt> / <tt>maxHeight</tt>.</p>
  383.      */
  384.     minHeight:50,
  386.     // private
  387.     defaultMargins : {left:0,top:0,right:0,bottom:0},
  388.     // private
  389.     defaultNSCMargins : {left:5,top:5,right:5,bottom:5},
  390.     // private
  391.     defaultEWCMargins : {left:5,top:0,right:5,bottom:0},
  392.     floatingZIndex: 100,
  394.     /**
  395.      * True if this region is collapsed. Read-only.
  396.      * @type Boolean
  397.      * @property
  398.      */
  399.     isCollapsed : false,
  401.     /**
  402.      * This region's panel.  Read-only.
  403.      * @type Ext.Panel
  404.      * @property panel
  405.      */
  406.     /**
  407.      * This region's layout.  Read-only.
  408.      * @type Layout
  409.      * @property layout
  410.      */
  411.     /**
  412.      * This region's layout position (north, south, east, west or center).  Read-only.
  413.      * @type String
  414.      * @property position
  415.      */
  417.     // private
  418.     render : function(ct, p){
  419.         this.panel = p;
  420.         p.el.enableDisplayMode();
  421.         this.targetEl = ct;
  422.         this.el = p.el;
  424.         var gs = p.getState, ps = this.position;
  425.         p.getState = function(){
  426.             return Ext.apply(gs.call(p) || {}, this.state);
  427.         }.createDelegate(this);
  429.         if(ps != 'center'){
  430.             p.allowQueuedExpand = false;
  431.             p.on({
  432.                 beforecollapse: this.beforeCollapse,
  433.                 collapse: this.onCollapse,
  434.                 beforeexpand: this.beforeExpand,
  435.                 expand: this.onExpand,
  436.                 hide: this.onHide,
  437.                 show: this.onShow,
  438.                 scope: this
  439.             });
  440.             if(this.collapsible || this.floatable){
  441.                 p.collapseEl = 'el';
  442.                 p.slideAnchor = this.getSlideAnchor();
  443.             }
  444.             if(p.tools && p.tools.toggle){
  445.                 p.tools.toggle.addClass('x-tool-collapse-'+ps);
  446.                 p.tools.toggle.addClassOnOver('x-tool-collapse-'+ps+'-over');
  447.             }
  448.         }
  449.     },
  451.     // private
  452.     getCollapsedEl : function(){
  453.         if(!this.collapsedEl){
  454.             if(!this.toolTemplate){
  455.                 var tt = new Ext.Template(
  456.                      '<div class="x-tool x-tool-{id}">&#160;</div>'
  457.                 );
  458.                 tt.disableFormats = true;
  459.                 tt.compile();
  460.                 Ext.layout.BorderLayout.Region.prototype.toolTemplate = tt;
  461.             }
  462.             this.collapsedEl = this.targetEl.createChild({
  463.                 cls: "x-layout-collapsed x-layout-collapsed-"+this.position,
  464.                 id: this.panel.id + '-xcollapsed'
  465.             });
  466.             this.collapsedEl.enableDisplayMode('block');
  468.             if(this.collapseMode == 'mini'){
  469.                 this.collapsedEl.addClass('x-layout-cmini-'+this.position);
  470.                 this.miniCollapsedEl = this.collapsedEl.createChild({
  471.                     cls: "x-layout-mini x-layout-mini-"+this.position, html: "&#160;"
  472.                 });
  473.                 this.miniCollapsedEl.addClassOnOver('x-layout-mini-over');
  474.                 this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
  475.                 this.collapsedEl.on('click', this.onExpandClick, this, {stopEvent:true});
  476.             }else {
  477.                 if(this.collapsible !== false && !this.hideCollapseTool) {
  478.                     var t = this.toolTemplate.append(
  479.                             this.collapsedEl.dom,
  480.                             {id:'expand-'+this.position}, true);
  481.                     t.addClassOnOver('x-tool-expand-'+this.position+'-over');
  482.                     t.on('click', this.onExpandClick, this, {stopEvent:true});
  483.                 }
  484.                 if(this.floatable !== false || this.titleCollapse){
  485.                    this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
  486.                    this.collapsedEl.on("click", this[this.floatable ? 'collapseClick' : 'onExpandClick'], this);
  487.                 }
  488.             }
  489.         }
  490.         return this.collapsedEl;
  491.     },
  493.     // private
  494.     onExpandClick : function(e){
  495.         if(this.isSlid){
  496.             this.afterSlideIn();
  497.             this.panel.expand(false);
  498.         }else{
  499.             this.panel.expand();
  500.         }
  501.     },
  503.     // private
  504.     onCollapseClick : function(e){
  505.         this.panel.collapse();
  506.     },
  508.     // private
  509.     beforeCollapse : function(p, animate){
  510.         this.lastAnim = animate;
  511.         if(this.splitEl){
  512.             this.splitEl.hide();
  513.         }
  514.         this.getCollapsedEl().show();
  515.         this.panel.el.setStyle('z-index', 100);
  516.         this.isCollapsed = true;
  517.         this.layout.layout();
  518.     },
  520.     // private
  521.     onCollapse : function(animate){
  522.         this.panel.el.setStyle('z-index', 1);
  523.         if(this.lastAnim === false || this.panel.animCollapse === false){
  524.             this.getCollapsedEl().dom.style.visibility = 'visible';
  525.         }else{
  526.             this.getCollapsedEl().slideIn(this.panel.slideAnchor, {duration:.2});
  527.         }
  528.         this.state.collapsed = true;
  529.         this.panel.saveState();
  530.     },
  532.     // private
  533.     beforeExpand : function(animate){
  534.         var c = this.getCollapsedEl();
  535.         this.el.show();
  536.         if(this.position == 'east' || this.position == 'west'){
  537.             this.panel.setSize(undefined, c.getHeight());
  538.         }else{
  539.             this.panel.setSize(c.getWidth(), undefined);
  540.         }
  541.         c.hide();
  542.         c.dom.style.visibility = 'hidden';
  543.         this.panel.el.setStyle('z-index', this.floatingZIndex);
  544.     },
  546.     // private
  547.     onExpand : function(){
  548.         this.isCollapsed = false;
  549.         if(this.splitEl){
  550.             this.splitEl.show();
  551.         }
  552.         this.layout.layout();
  553.         this.panel.el.setStyle('z-index', 1);
  554.         this.state.collapsed = false;
  555.         this.panel.saveState();
  556.     },
  558.     // private
  559.     collapseClick : function(e){
  560.         if(this.isSlid){
  561.            e.stopPropagation();
  562.            this.slideIn();
  563.         }else{
  564.            e.stopPropagation();
  565.            this.slideOut();
  566.         }
  567.     },
  569.     // private
  570.     onHide : function(){
  571.         if(this.isCollapsed){
  572.             this.getCollapsedEl().hide();
  573.         }else if(this.splitEl){
  574.             this.splitEl.hide();
  575.         }
  576.     },
  578.     // private
  579.     onShow : function(){
  580.         if(this.isCollapsed){
  581.             this.getCollapsedEl().show();
  582.         }else if(this.splitEl){
  583.             this.splitEl.show();
  584.         }
  585.     },
  587.     /**
  588.      * True if this region is currently visible, else false.
  589.      * @return {Boolean}
  590.      */
  591.     isVisible : function(){
  592.         return !this.panel.hidden;
  593.     },
  595.     /**
  596.      * Returns the current margins for this region.  If the region is collapsed, the
  597.      * {@link #cmargins} (collapsed margins) value will be returned, otherwise the
  598.      * {@link #margins} value will be returned.
  599.      * @return {Object} An object containing the element's margins: <tt>{left: (left
  600.      * margin), top: (top margin), right: (right margin), bottom: (bottom margin)}</tt>
  601.      */
  602.     getMargins : function(){
  603.         return this.isCollapsed && this.cmargins ? this.cmargins : this.margins;
  604.     },
  606.     /**
  607.      * Returns the current size of this region.  If the region is collapsed, the size of the
  608.      * collapsedEl will be returned, otherwise the size of the region's panel will be returned.
  609.      * @return {Object} An object containing the element's size: <tt>{width: (element width),
  610.      * height: (element height)}</tt>
  611.      */
  612.     getSize : function(){
  613.         return this.isCollapsed ? this.getCollapsedEl().getSize() : this.panel.getSize();
  614.     },
  616.     /**
  617.      * Sets the specified panel as the container element for this region.
  618.      * @param {Ext.Panel} panel The new panel
  619.      */
  620.     setPanel : function(panel){
  621.         this.panel = panel;
  622.     },
  624.     /**
  625.      * Returns the minimum allowable width for this region.
  626.      * @return {Number} The minimum width
  627.      */
  628.     getMinWidth: function(){
  629.         return this.minWidth;
  630.     },
  632.     /**
  633.      * Returns the minimum allowable height for this region.
  634.      * @return {Number} The minimum height
  635.      */
  636.     getMinHeight: function(){
  637.         return this.minHeight;
  638.     },
  640.     // private
  641.     applyLayoutCollapsed : function(box){
  642.         var ce = this.getCollapsedEl();
  643.         ce.setLeftTop(box.x, box.y);
  644.         ce.setSize(box.width, box.height);
  645.     },
  647.     // private
  648.     applyLayout : function(box){
  649.         if(this.isCollapsed){
  650.             this.applyLayoutCollapsed(box);
  651.         }else{
  652.             this.panel.setPosition(box.x, box.y);
  653.             this.panel.setSize(box.width, box.height);
  654.         }
  655.     },
  657.     // private
  658.     beforeSlide: function(){
  659.         this.panel.beforeEffect();
  660.     },
  662.     // private
  663.     afterSlide : function(){
  664.         this.panel.afterEffect();
  665.     },
  667.     // private
  668.     initAutoHide : function(){
  669.         if(this.autoHide !== false){
  670.             if(!this.autoHideHd){
  671.                 var st = new Ext.util.DelayedTask(this.slideIn, this);
  672.                 this.autoHideHd = {
  673.                     "mouseout": function(e){
  674.                         if(!e.within(this.el, true)){
  675.                             st.delay(500);
  676.                         }
  677.                     },
  678.                     "mouseover" : function(e){
  679.                         st.cancel();
  680.                     },
  681.                     scope : this
  682.                 };
  683.             }
  684.             this.el.on(this.autoHideHd);
  685.         }
  686.     },
  688.     // private
  689.     clearAutoHide : function(){
  690.         if(this.autoHide !== false){
  691.             this.el.un("mouseout", this.autoHideHd.mouseout);
  692.             this.el.un("mouseover", this.autoHideHd.mouseover);
  693.         }
  694.     },
  696.     // private
  697.     clearMonitor : function(){
  698.         Ext.getDoc().un("click", this.slideInIf, this);
  699.     },
  701.     /**
  702.      * If this Region is {@link #floatable}, this method slides this Region into full visibility <i>over the top
  703.      * of the center Region</i> where it floats until either {@link #slideIn} is called, or other regions of the layout
  704.      * are clicked, or the mouse exits the Region.
  705.      */
  706.     slideOut : function(){
  707.         if(this.isSlid || this.el.hasActiveFx()){
  708.             return;
  709.         }
  710.         this.isSlid = true;
  711.         var ts = this.panel.tools;
  712.         if(ts && ts.toggle){
  713.             ts.toggle.hide();
  714.         }
  715.         this.el.show();
  716.         if(this.position == 'east' || this.position == 'west'){
  717.             this.panel.setSize(undefined, this.collapsedEl.getHeight());
  718.         }else{
  719.             this.panel.setSize(this.collapsedEl.getWidth(), undefined);
  720.         }
  721.         this.restoreLT = [this.el.dom.style.left, this.el.dom.style.top];
  722.         this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
  723.         this.el.setStyle("z-index", this.floatingZIndex+2);
  724.         this.panel.el.replaceClass('x-panel-collapsed', 'x-panel-floating');
  725.         if(this.animFloat !== false){
  726.             this.beforeSlide();
  727.             this.el.slideIn(this.getSlideAnchor(), {
  728.                 callback: function(){
  729.                     this.afterSlide();
  730.                     this.initAutoHide();
  731.                     Ext.getDoc().on("click", this.slideInIf, this);
  732.                 },
  733.                 scope: this,
  734.                 block: true
  735.             });
  736.         }else{
  737.             this.initAutoHide();
  738.              Ext.getDoc().on("click", this.slideInIf, this);
  739.         }
  740.     },
  742.     // private
  743.     afterSlideIn : function(){
  744.         this.clearAutoHide();
  745.         this.isSlid = false;
  746.         this.clearMonitor();
  747.         this.el.setStyle("z-index", "");
  748.         this.panel.el.replaceClass('x-panel-floating', 'x-panel-collapsed');
  749.         this.el.dom.style.left = this.restoreLT[0];
  750.         this.el.dom.style.top = this.restoreLT[1];
  752.         var ts = this.panel.tools;
  753.         if(ts && ts.toggle){
  754.             ts.toggle.show();
  755.         }
  756.     },
  758.     /**
  759.      * If this Region is {@link #floatable}, and this Region has been slid into floating visibility, then this method slides
  760.      * this region back into its collapsed state.
  761.      */
  762.     slideIn : function(cb){
  763.         if(!this.isSlid || this.el.hasActiveFx()){
  764.             Ext.callback(cb);
  765.             return;
  766.         }
  767.         this.isSlid = false;
  768.         if(this.animFloat !== false){
  769.             this.beforeSlide();
  770.             this.el.slideOut(this.getSlideAnchor(), {
  771.                 callback: function(){
  772.                     this.el.hide();
  773.                     this.afterSlide();
  774.                     this.afterSlideIn();
  775.                     Ext.callback(cb);
  776.                 },
  777.                 scope: this,
  778.                 block: true
  779.             });
  780.         }else{
  781.             this.el.hide();
  782.             this.afterSlideIn();
  783.         }
  784.     },
  786.     // private
  787.     slideInIf : function(e){
  788.         if(!e.within(this.el)){
  789.             this.slideIn();
  790.         }
  791.     },
  793.     // private
  794.     anchors : {
  795.         "west" : "left",
  796.         "east" : "right",
  797.         "north" : "top",
  798.         "south" : "bottom"
  799.     },
  801.     // private
  802.     sanchors : {
  803.         "west" : "l",
  804.         "east" : "r",
  805.         "north" : "t",
  806.         "south" : "b"
  807.     },
  809.     // private
  810.     canchors : {
  811.         "west" : "tl-tr",
  812.         "east" : "tr-tl",
  813.         "north" : "tl-bl",
  814.         "south" : "bl-tl"
  815.     },
  817.     // private
  818.     getAnchor : function(){
  819.         return this.anchors[this.position];
  820.     },
  822.     // private
  823.     getCollapseAnchor : function(){
  824.         return this.canchors[this.position];
  825.     },
  827.     // private
  828.     getSlideAnchor : function(){
  829.         return this.sanchors[this.position];
  830.     },
  832.     // private
  833.     getAlignAdj : function(){
  834.         var cm = this.cmargins;
  835.         switch(this.position){
  836.             case "west":
  837.                 return [0, 0];
  838.             break;
  839.             case "east":
  840.                 return [0, 0];
  841.             break;
  842.             case "north":
  843.                 return [0, 0];
  844.             break;
  845.             case "south":
  846.                 return [0, 0];
  847.             break;
  848.         }
  849.     },
  851.     // private
  852.     getExpandAdj : function(){
  853.         var c = this.collapsedEl, cm = this.cmargins;
  854.         switch(this.position){
  855.             case "west":
  856.                 return [-(cm.right+c.getWidth()+cm.left), 0];
  857.             break;
  858.             case "east":
  859.                 return [cm.right+c.getWidth()+cm.left, 0];
  860.             break;
  861.             case "north":
  862.                 return [0, -(cm.top+cm.bottom+c.getHeight())];
  863.             break;
  864.             case "south":
  865.                 return [0, cm.top+cm.bottom+c.getHeight()];
  866.             break;
  867.         }
  868.     }
  869. };
  871. /**
  872.  * @class Ext.layout.BorderLayout.SplitRegion
  873.  * @extends Ext.layout.BorderLayout.Region
  874.  * <p>This is a specialized type of {@link Ext.layout.BorderLayout.Region BorderLayout region} that
  875.  * has a built-in {@link Ext.SplitBar} for user resizing of regions.  The movement of the split bar
  876.  * is configurable to move either {@link #tickSize smooth or incrementally}.</p>
  877.  * @constructor
  878.  * Create a new SplitRegion.
  879.  * @param {Layout} layout The {@link Ext.layout.BorderLayout BorderLayout} instance that is managing this Region.
  880.  * @param {Object} config The configuration options
  881.  * @param {String} position The region position.  Valid values are: north, south, east, west and center.  Every
  882.  * BorderLayout must have a center region for the primary content -- all other regions are optional.
  883.  */
  884. Ext.layout.BorderLayout.SplitRegion = function(layout, config, pos){
  885.     Ext.layout.BorderLayout.SplitRegion.superclass.constructor.call(this, layout, config, pos);
  886.     // prevent switch
  887.     this.applyLayout = this.applyFns[pos];
  888. };
  890. Ext.extend(Ext.layout.BorderLayout.SplitRegion, Ext.layout.BorderLayout.Region, {
  891.     /**
  892.      * @cfg {Number} tickSize
  893.      * The increment, in pixels by which to move this Region's {@link Ext.SplitBar SplitBar}.
  894.      * By default, the {@link Ext.SplitBar SplitBar} moves smoothly.
  895.      */
  896.     /**
  897.      * @cfg {String} splitTip
  898.      * The tooltip to display when the user hovers over a
  899.      * {@link Ext.layout.BorderLayout.Region#collapsible non-collapsible} region's split bar
  900.      * (defaults to <tt>"Drag to resize."</tt>).  Only applies if
  901.      * <tt>{@link #useSplitTips} = true</tt>.
  902.      */
  903.     splitTip : "Drag to resize.",
  904.     /**
  905.      * @cfg {String} collapsibleSplitTip
  906.      * The tooltip to display when the user hovers over a
  907.      * {@link Ext.layout.BorderLayout.Region#collapsible collapsible} region's split bar
  908.      * (defaults to "Drag to resize. Double click to hide."). Only applies if
  909.      * <tt>{@link #useSplitTips} = true</tt>.
  910.      */
  911.     collapsibleSplitTip : "Drag to resize. Double click to hide.",
  912.     /**
  913.      * @cfg {Boolean} useSplitTips
  914.      * <tt>true</tt> to display a tooltip when the user hovers over a region's split bar
  915.      * (defaults to <tt>false</tt>).  The tooltip text will be the value of either
  916.      * <tt>{@link #splitTip}</tt> or <tt>{@link #collapsibleSplitTip}</tt> as appropriate.
  917.      */
  918.     useSplitTips : false,
  920.     // private
  921.     splitSettings : {
  922.         north : {
  923.             orientation: Ext.SplitBar.VERTICAL,
  924.             placement: Ext.SplitBar.TOP,
  925.             maxFn : 'getVMaxSize',
  926.             minProp: 'minHeight',
  927.             maxProp: 'maxHeight'
  928.         },
  929.         south : {
  930.             orientation: Ext.SplitBar.VERTICAL,
  931.             placement: Ext.SplitBar.BOTTOM,
  932.             maxFn : 'getVMaxSize',
  933.             minProp: 'minHeight',
  934.             maxProp: 'maxHeight'
  935.         },
  936.         east : {
  937.             orientation: Ext.SplitBar.HORIZONTAL,
  938.             placement: Ext.SplitBar.RIGHT,
  939.             maxFn : 'getHMaxSize',
  940.             minProp: 'minWidth',
  941.             maxProp: 'maxWidth'
  942.         },
  943.         west : {
  944.             orientation: Ext.SplitBar.HORIZONTAL,
  945.             placement: Ext.SplitBar.LEFT,
  946.             maxFn : 'getHMaxSize',
  947.             minProp: 'minWidth',
  948.             maxProp: 'maxWidth'
  949.         }
  950.     },
  952.     // private
  953.     applyFns : {
  954.         west : function(box){
  955.             if(this.isCollapsed){
  956.                 return this.applyLayoutCollapsed(box);
  957.             }
  958.             var sd = this.splitEl.dom, s = sd.style;
  959.             this.panel.setPosition(box.x, box.y);
  960.             var sw = sd.offsetWidth;
  961.             s.left = (box.x+box.width-sw)+'px';
  962.             s.top = (box.y)+'px';
  963.             s.height = Math.max(0, box.height)+'px';
  964.             this.panel.setSize(box.width-sw, box.height);
  965.         },
  966.         east : function(box){
  967.             if(this.isCollapsed){
  968.                 return this.applyLayoutCollapsed(box);
  969.             }
  970.             var sd = this.splitEl.dom, s = sd.style;
  971.             var sw = sd.offsetWidth;
  972.             this.panel.setPosition(box.x+sw, box.y);
  973.             s.left = (box.x)+'px';
  974.             s.top = (box.y)+'px';
  975.             s.height = Math.max(0, box.height)+'px';
  976.             this.panel.setSize(box.width-sw, box.height);
  977.         },
  978.         north : function(box){
  979.             if(this.isCollapsed){
  980.                 return this.applyLayoutCollapsed(box);
  981.             }
  982.             var sd = this.splitEl.dom, s = sd.style;
  983.             var sh = sd.offsetHeight;
  984.             this.panel.setPosition(box.x, box.y);
  985.             s.left = (box.x)+'px';
  986.             s.top = (box.y+box.height-sh)+'px';
  987.             s.width = Math.max(0, box.width)+'px';
  988.             this.panel.setSize(box.width, box.height-sh);
  989.         },
  990.         south : function(box){
  991.             if(this.isCollapsed){
  992.                 return this.applyLayoutCollapsed(box);
  993.             }
  994.             var sd = this.splitEl.dom, s = sd.style;
  995.             var sh = sd.offsetHeight;
  996.             this.panel.setPosition(box.x, box.y+sh);
  997.             s.left = (box.x)+'px';
  998.             s.top = (box.y)+'px';
  999.             s.width = Math.max(0, box.width)+'px';
  1000.             this.panel.setSize(box.width, box.height-sh);
  1001.         }
  1002.     },
  1004.     // private
  1005.     render : function(ct, p){
  1006.         Ext.layout.BorderLayout.SplitRegion.superclass.render.call(this, ct, p);
  1008.         var ps = this.position;
  1010.         this.splitEl = ct.createChild({
  1011.             cls: "x-layout-split x-layout-split-"+ps, html: "&#160;",
  1012.             id: this.panel.id + '-xsplit'
  1013.         });
  1015.         if(this.collapseMode == 'mini'){
  1016.             this.miniSplitEl = this.splitEl.createChild({
  1017.                 cls: "x-layout-mini x-layout-mini-"+ps, html: "&#160;"
  1018.             });
  1019.             this.miniSplitEl.addClassOnOver('x-layout-mini-over');
  1020.             this.miniSplitEl.on('click', this.onCollapseClick, this, {stopEvent:true});
  1021.         }
  1023.         var s = this.splitSettings[ps];
  1025.         this.split = new Ext.SplitBar(this.splitEl.dom, p.el, s.orientation);
  1026.         this.split.tickSize = this.tickSize;
  1027.         this.split.placement = s.placement;
  1028.         this.split.getMaximumSize = this[s.maxFn].createDelegate(this);
  1029.         this.split.minSize = this.minSize || this[s.minProp];
  1030.         this.split.on("beforeapply", this.onSplitMove, this);
  1031.         this.split.useShim = this.useShim === true;
  1032.         this.maxSize = this.maxSize || this[s.maxProp];
  1034.         if(p.hidden){
  1035.             this.splitEl.hide();
  1036.         }
  1038.         if(this.useSplitTips){
  1039.             this.splitEl.dom.title = this.collapsible ? this.collapsibleSplitTip : this.splitTip;
  1040.         }
  1041.         if(this.collapsible){
  1042.             this.splitEl.on("dblclick", this.onCollapseClick,  this);
  1043.         }
  1044.     },
  1046.     //docs inherit from superclass
  1047.     getSize : function(){
  1048.         if(this.isCollapsed){
  1049.             return this.collapsedEl.getSize();
  1050.         }
  1051.         var s = this.panel.getSize();
  1052.         if(this.position == 'north' || this.position == 'south'){
  1053.             s.height += this.splitEl.dom.offsetHeight;
  1054.         }else{
  1055.             s.width += this.splitEl.dom.offsetWidth;
  1056.         }
  1057.         return s;
  1058.     },
  1060.     // private
  1061.     getHMaxSize : function(){
  1062.          var cmax = this.maxSize || 10000;
  1063.          var center = this.layout.center;
  1064.          return Math.min(cmax, (this.el.getWidth()+center.el.getWidth())-center.getMinWidth());
  1065.     },
  1067.     // private
  1068.     getVMaxSize : function(){
  1069.         var cmax = this.maxSize || 10000;
  1070.         var center = this.layout.center;
  1071.         return Math.min(cmax, (this.el.getHeight()+center.el.getHeight())-center.getMinHeight());
  1072.     },
  1074.     // private
  1075.     onSplitMove : function(split, newSize){
  1076.         var s = this.panel.getSize();
  1077.         this.lastSplitSize = newSize;
  1078.         if(this.position == 'north' || this.position == 'south'){
  1079.             this.panel.setSize(s.width, newSize);
  1080.             this.state.height = newSize;
  1081.         }else{
  1082.             this.panel.setSize(newSize, s.height);
  1083.             this.state.width = newSize;
  1084.         }
  1085.         this.layout.layout();
  1086.         this.panel.saveState();
  1087.         return false;
  1088.     },
  1090.     /**
  1091.      * Returns a reference to the split bar in use by this region.
  1092.      * @return {Ext.SplitBar} The split bar
  1093.      */
  1094.     getSplitBar : function(){
  1095.         return this.split;
  1096.     },
  1098.     // inherit docs
  1099.     destroy : function() {
  1100.         Ext.destroy(
  1101.             this.miniSplitEl,
  1102.             this.split,
  1103.             this.splitEl
  1104.         );
  1105.     }
  1106. });
  1108. Ext.Container.LAYOUTS['border'] = Ext.layout.BorderLayout;