-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-layout.container.Accordion'>/**
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../prettify/prettify.js"></script>
+ <style type="text/css">
+ .highlight { display: block; background-color: #ddd; }
+ </style>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-layout-container-Accordion'>/**
</span> * @class Ext.layout.container.Accordion
* @extends Ext.layout.container.VBox
* <p>This is a layout that manages multiple Panels in an expandable accordion style such that only
extend: 'Ext.layout.container.VBox',
alias: ['layout.accordion'],
alternateClassName: 'Ext.layout.AccordionLayout',
-
+
align: 'stretch',
-<span id='Ext-layout.container.Accordion-cfg-fill'> /**
+<span id='Ext-layout-container-Accordion-cfg-fill'> /**
</span> * @cfg {Boolean} fill
* True to adjust the active item's height to fill the available space in the container, false to use the
* item's current height, or auto height if not explicitly set (defaults to true).
*/
fill : true,
-<span id='Ext-layout.container.Accordion-cfg-autoWidth'> /**
+<span id='Ext-layout-container-Accordion-cfg-autoWidth'> /**
</span> * @cfg {Boolean} autoWidth
* <p><b>This config is ignored in ExtJS 4.x.</b></p>
* Child Panels have their width actively managed to fit within the accordion's width.
*/
autoWidth : true,
-<span id='Ext-layout.container.Accordion-cfg-titleCollapse'> /**
+<span id='Ext-layout-container-Accordion-cfg-titleCollapse'> /**
</span> * @cfg {Boolean} titleCollapse
* <p><b>Not implemented in PR2.</b></p>
* True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow
* {@link #hideCollapseTool} should be false also.
*/
titleCollapse : true,
-<span id='Ext-layout.container.Accordion-cfg-hideCollapseTool'> /**
+<span id='Ext-layout-container-Accordion-cfg-hideCollapseTool'> /**
</span> * @cfg {Boolean} hideCollapseTool
* True to hide the contained Panels' collapse/expand toggle buttons, false to display them (defaults to false).
* When set to true, {@link #titleCollapse} is automatically set to <code>true</code>.
*/
hideCollapseTool : false,
-<span id='Ext-layout.container.Accordion-cfg-collapseFirst'> /**
+<span id='Ext-layout-container-Accordion-cfg-collapseFirst'> /**
</span> * @cfg {Boolean} collapseFirst
* True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools
* in the contained Panels' title bars, false to render it last (defaults to false).
*/
collapseFirst : false,
-<span id='Ext-layout.container.Accordion-cfg-animate'> /**
+<span id='Ext-layout-container-Accordion-cfg-animate'> /**
</span> * @cfg {Boolean} animate
* True to slide the contained panels open and closed during expand/collapse using animation, false to open and
* close directly with no animation (defaults to <code>true</code>). Note: The layout performs animated collapsing
* and expanding, <i>not</i> the child Panels.
*/
animate : true,
-<span id='Ext-layout.container.Accordion-cfg-activeOnTop'> /**
+<span id='Ext-layout-container-Accordion-cfg-activeOnTop'> /**
</span> * @cfg {Boolean} activeOnTop
* <p><b>Not implemented in PR4.</b></p>
* <p>Only valid when {@link #multi" is <code>false</code>.</p>
* false to keep the panels in the rendered order. <b>This is NOT compatible with "animate:true"</b> (defaults to false).
*/
activeOnTop : false,
-<span id='Ext-layout.container.Accordion-cfg-multi'> /**
+<span id='Ext-layout-container-Accordion-cfg-multi'> /**
</span> * @cfg {Boolean} multi
* Defaults to <code>false</code>. Set to <code>true</code> to enable multiple accordion items to be open at once.
*/
me.callParent(arguments);
if (me.fill) {
- if (!me.owner.el.dom.style.height) {
+ if (!me.owner.el.dom.style.height || !me.getLayoutTargetSize().height) {
return false;
}
} else {
delete comp.hideHeader;
comp.collapsible = true;
comp.title = comp.title || '&#160;';
- comp.setBorder(false);
// Set initial sizes
comp.width = targetSize.width;
comp.collapsed = true;
}
// Otherwise expand the first item with collapsed explicitly configured as false
- else if (comp.collapsed === false) {
+ else if (comp.hasOwnProperty('collapsed') && comp.collapsed === false) {
comp.flex = 1;
me.expandedItem = i;
} else {
comp.collapsed = true;
}
+ // If we are fitting, then intercept expand/collapse requests.
+ me.owner.mon(comp, {
+ show: me.onComponentShow,
+ beforeexpand: me.onComponentExpand,
+ beforecollapse: me.onComponentCollapse,
+ scope: me
+ });
} else {
delete comp.flex;
comp.animCollapse = me.initialAnimate;
comp.flex = 1;
}
}
-
+
// Render all Panels.
me.callParent(arguments);
-
+
// Postprocess rendered Panels.
ln = renderedPanels.length;
for (i = 0; i < ln; i++) {
comp.header.addCls(Ext.baseCSSPrefix + 'accordion-hd');
comp.body.addCls(Ext.baseCSSPrefix + 'accordion-body');
-
- // If we are fitting, then intercept expand/collapse requests.
- if (me.fill) {
- me.owner.mon(comp, {
- show: me.onComponentShow,
- beforeexpand: me.onComponentExpand,
- beforecollapse: me.onComponentCollapse,
- scope: me
- });
- }
}
},
onLayout: function() {
var me = this;
-
- me.updatePanelClasses();
-
+
+
if (me.fill) {
me.callParent(arguments);
} else {
}
}
}
-
+ me.updatePanelClasses();
+
return me;
},
-
+
updatePanelClasses: function() {
var children = this.getLayoutItems(),
ln = children.length,
siblingCollapsed = true,
i, child;
-
+
for (i = 0; i < ln; i++) {
child = children[i];
- if (!siblingCollapsed) {
- child.header.addCls(Ext.baseCSSPrefix + 'accordion-hd-sibling-expanded');
+
+ if (siblingCollapsed) {
+ child.header.removeCls(Ext.baseCSSPrefix + 'accordion-hd-sibling-expanded');
}
else {
- child.header.removeCls(Ext.baseCSSPrefix + 'accordion-hd-sibling-expanded');
+ child.header.addCls(Ext.baseCSSPrefix + 'accordion-hd-sibling-expanded');
}
+
if (i + 1 == ln && child.collapsed) {
child.header.addCls(Ext.baseCSSPrefix + 'accordion-hd-last-collapsed');
}
me.setCollapsed(comp);
}
}
-
+
me.animate = me.initialAnimate;
me.layout();
me.animate = false;
if (expanded.length === 1 && expanded[0] === comp) {
me.setExpanded(toExpand);
}
-
+
me.animate = me.initialAnimate;
me.layout();
me.animate = false;
// Show temporarily hidden docked items
for (; i < len; i++) {
- otherDocks[i].hidden = false;
+ otherDocks[i].show();
}
// If it was an initial native collapse which hides the body
}
comp.setAutoScroll(comp.initialConfig.autoScroll);
}
-});</pre></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff