-<!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.HBox'>/**
-</span> * @class Ext.layout.container.HBox
- * @extends Ext.layout.container.Box
- * <p>A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal
- * space between child items containing a numeric <code>flex</code> configuration.</p>
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../resources/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-HBox'>/**
+</span> * A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal
+ * space between child items containing a numeric `flex` configuration.
+ *
* This layout may also be used to set the heights of child items by configuring it with the {@link #align} option.
- * {@img Ext.layout.container.HBox/Ext.layout.container.HBox.png Ext.layout.container.HBox container layout}
- * Example usage:
- Ext.create('Ext.Panel', {
- width: 500,
- height: 300,
- title: "HBoxLayout Panel",
- layout: {
- type: 'hbox',
- align: 'stretch'
- },
- renderTo: document.body,
- items: [{
- xtype: 'panel',
- title: 'Inner Panel One',
- flex: 2
- },{
- xtype: 'panel',
- title: 'Inner Panel Two',
- flex: 1
- },{
- xtype: 'panel',
- title: 'Inner Panel Three',
- flex: 1
- }]
- });
+ *
+ * @example
+ * Ext.create('Ext.Panel', {
+ * width: 500,
+ * height: 300,
+ * title: "HBoxLayout Panel",
+ * layout: {
+ * type: 'hbox',
+ * align: 'stretch'
+ * },
+ * renderTo: document.body,
+ * items: [{
+ * xtype: 'panel',
+ * title: 'Inner Panel One',
+ * flex: 2
+ * },{
+ * xtype: 'panel',
+ * title: 'Inner Panel Two',
+ * flex: 1
+ * },{
+ * xtype: 'panel',
+ * title: 'Inner Panel Three',
+ * flex: 1
+ * }]
+ * });
*/
Ext.define('Ext.layout.container.HBox', {
alias: ['layout.hbox'],
extend: 'Ext.layout.container.Box',
alternateClassName: 'Ext.layout.HBoxLayout',
-
+
/* End Definitions */
-<span id='Ext-layout.container.HBox-cfg-align'> /**
+<span id='Ext-layout-container-HBox-cfg-align'> /**
</span> * @cfg {String} align
- * Controls how the child items of the container are aligned. Acceptable configuration values for this
- * property are:
- * <div class="mdetail-params"><ul>
- * <li><b><tt>top</tt></b> : <b>Default</b><div class="sub-desc">child items are aligned vertically
- * at the <b>top</b> of the container</div></li>
- * <li><b><tt>middle</tt></b> : <div class="sub-desc">child items are aligned vertically in the
- * <b>middle</b> of the container</div></li>
- * <li><b><tt>stretch</tt></b> : <div class="sub-desc">child items are stretched vertically to fill
- * the height of the container</div></li>
- * <li><b><tt>stretchmax</tt></b> : <div class="sub-desc">child items are stretched vertically to
- * the height of the largest item.</div></li>
- * </ul></div>
+ * Controls how the child items of the container are aligned. Acceptable configuration values for this property are:
+ *
+ * - **top** : **Default** child items are aligned vertically at the **top** of the container
+ * - **middle** : child items are aligned vertically in the **middle** of the container
+ * - **stretch** : child items are stretched vertically to fill the height of the container
+ * - **stretchmax** : child items are stretched vertically to the height of the largest item.
*/
align: 'top', // top, middle, stretch, strechmax
perpendicularRB: 'b',
perpendicularLeftTop: 'top',
perpendicularRightBottom: 'bottom',
- perpendicularPosition: 'y'
-});</pre></pre></body></html>
\ No newline at end of file
+ perpendicularPosition: 'y',
+ configureItem: function(item) {
+ if (item.flex) {
+ item.layoutManagedWidth = 1;
+ } else {
+ item.layoutManagedWidth = 2;
+ }
+
+ if (this.align === 'stretch' || this.align === 'stretchmax') {
+ item.layoutManagedHeight = 1;
+ } else {
+ item.layoutManagedHeight = 2;
+ }
+ this.callParent(arguments);
+ }
+});</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff