extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/layout/component/Auto.js

@@ -0,0 +1,220 @@
+/**
+ * The class is the default component layout for {@link Ext.Component} when no explicit
+ * `{@link Ext.Component#componentLayout componentLayout}` is configured.
+ *
+ * This class uses template methods to perform the individual aspects of measurement,
+ * calculation and publication of results. The methods called depend on the component's
+ * {@link Ext.AbstractComponent#getSizeModel size model}.
+ * 
+ * ## configured / calculated
+ *
+ * In either of these size models, the dimension of the outer element is of a known size.
+ * The size is found in the `ownerContext` (the {@link Ext.layout.ContextItem} for the owner
+ * component) as either "width" or "height". This value, if available, is passed to the
+ * {@link #publishInnerWidth} or {@link #publishInnerHeight} method, respectively.
+ * 
+ * ## shrinkWrap
+ *
+ * When a dimension uses the `shrinkWrap` size model, that means the content is measured,
+ * then the outer (owner) size is calculated and published.
+ * 
+ * For example, for a shrinkWrap width, the following sequence of calls are made:
+ * 
+ * * {@link Ext.layout.component.Component#measureContentWidth}
+ * * {@link #publishOwnerWidth}
+ *    * {@link #calculateOwnerWidthFromContentWidth}
+ *    * {@link #publishInnerWidth} (in the event of hitting a min/maxWidth constraint)
+ *
+ * ## natural
+ *
+ * When a dimension uses the `natural` size model, the measurement is made on the outer
+ * (owner) element. This size is then used to determine the content area in much the same
+ * way as if the outer element had a `configured` or `calculated` size model.
+ * 
+ * * {@link Ext.layout.component.Component#measureOwnerWidth}
+ * * {@link #publishInnerWidth}
+ *
+ * @protected
+ */
+Ext.define('Ext.layout.component.Auto', {
+
+    /* Begin Definitions */
+
+    alias: 'layout.autocomponent',
+
+    extend: 'Ext.layout.component.Component',
+
+    /* End Definitions */
+
+    type: 'autocomponent',
+
+    /**
+     * @cfg {Boolean} [setHeightInDom=false]
+     * @protected
+     * When publishing height of an auto Component, it is usually not written to the DOM.
+     * Setting this to `true` overrides this behaviour.
+     */
+    setHeightInDom: false,
+
+    /**
+     * @cfg {Boolean} [setWidthInDom=false]
+     * @protected
+     * When publishing width of an auto Component, it is usually not written to the DOM.
+     * Setting this to `true` overrides this behaviour.
+     */
+    setWidthInDom: false,
+
+    waitForOuterHeightInDom: false,
+    waitForOuterWidthInDom: false,
+    
+    beginLayoutCycle: function(ownerContext, firstCycle){
+        var me = this,
+            lastWidthModel = me.lastWidthModel,
+            lastHeightModel = me.lastHeightModel,
+            owner = me.owner;
+            
+        me.callParent(arguments);
+            
+        if (lastWidthModel && lastWidthModel.fixed && ownerContext.widthModel.shrinkWrap) {
+            owner.el.setWidth(null);
+        }
+            
+        if (lastHeightModel && lastHeightModel.fixed && ownerContext.heightModel.shrinkWrap) {
+            owner.el.setHeight(null);
+        }    
+    },
+
+    calculate: function(ownerContext) {
+        var me = this,
+            measurement = me.measureAutoDimensions(ownerContext),
+            heightModel = ownerContext.heightModel,
+            widthModel = ownerContext.widthModel,
+            width, height;
+
+        // It is generally important to process widths before heights, since widths can
+        // often effect heights...
+        if (measurement.gotWidth) {
+            if (widthModel.shrinkWrap) {
+                me.publishOwnerWidth(ownerContext, measurement.contentWidth);
+            } else if (me.publishInnerWidth) {
+                me.publishInnerWidth(ownerContext, measurement.width);
+            }
+        } else if (!widthModel.auto && me.publishInnerWidth) {
+            width = me.waitForOuterWidthInDom ? ownerContext.getDomProp('width')
+                        : ownerContext.getProp('width');
+            if (width === undefined) {
+                me.done = false;
+            } else {
+                me.publishInnerWidth(ownerContext, width);
+            }
+        }
+
+        if (measurement.gotHeight) {
+            if (heightModel.shrinkWrap) {
+                me.publishOwnerHeight(ownerContext, measurement.contentHeight);
+            } else if (me.publishInnerHeight) {
+                me.publishInnerHeight(ownerContext, measurement.height);
+            }
+        } else if (!heightModel.auto && me.publishInnerHeight) {
+            height = me.waitForOuterHeightInDom ? ownerContext.getDomProp('height')
+                        : ownerContext.getProp('height');
+            if (height === undefined) {
+                me.done = false;
+            } else {
+               me.publishInnerHeight(ownerContext, height);
+            }
+        }
+
+        if (!measurement.gotAll) {
+            me.done = false;
+        }
+    },
+
+    calculateOwnerHeightFromContentHeight: function (ownerContext, contentHeight) {
+        return contentHeight + ownerContext.getFrameInfo().height;
+    },
+
+    calculateOwnerWidthFromContentWidth: function (ownerContext, contentWidth) {
+        return contentWidth + ownerContext.getFrameInfo().width;
+    },
+    
+    onConstrainSize: function (ownerContext, options) {
+        var heightModel = options.heightModel,
+            widthModel = options.widthModel;
+
+        if (heightModel) {
+            ownerContext.heightModel = heightModel;
+        }
+        if (widthModel) {
+            ownerContext.widthModel = widthModel;
+        }
+    },
+
+    publishOwnerHeight: function (ownerContext, contentHeight) {
+        var me = this,
+            owner = me.owner,
+            height = me.calculateOwnerHeightFromContentHeight(ownerContext, contentHeight),
+            heightModel, constrainedHeight, dirty;
+
+        if (isNaN(height)) {
+            me.done = false;
+        } else {
+            constrainedHeight = Ext.Number.constrain(height, owner.minHeight, owner.maxHeight);
+
+            if (constrainedHeight == height) {
+                dirty = me.setHeightInDom;
+            } else {
+                heightModel = me.sizeModels[
+                    (constrainedHeight < height) ? 'constrainedMax' : 'constrainedMin'];
+                height = constrainedHeight;
+
+                if (ownerContext.heightModel.calculatedFromShrinkWrap) {
+                    // don't bother to invalidate since that will come soon from the
+                    // owner... but note that we are constrained...
+                    ownerContext.heightModel = heightModel;
+                } else {
+                    ownerContext.invalidate({
+                        before: me.onConstrainSize,
+                        heightModel: heightModel
+                    });
+                }
+            }
+            
+            ownerContext.setHeight(height, dirty);
+        }
+    },
+
+    publishOwnerWidth: function (ownerContext, contentWidth) {
+        var me = this,
+            owner = me.owner,
+            width = me.calculateOwnerWidthFromContentWidth(ownerContext, contentWidth),
+            widthModel, constrainedWidth, dirty;
+
+        if (isNaN(width)) {
+            me.done = false;
+        } else {
+            constrainedWidth = Ext.Number.constrain(width, owner.minWidth, owner.maxWidth);
+
+            if (constrainedWidth == width) {
+                dirty = me.setWidthInDom;
+            } else {
+                widthModel = me.sizeModels[
+                    (constrainedWidth < width) ? 'constrainedMax' : 'constrainedMin'];
+                width = constrainedWidth;
+
+                if (ownerContext.widthModel.calculatedFromShrinkWrap) {
+                    // don't bother to invalidate since that will come soon from the
+                    // owner... but note that we are constrained...
+                    ownerContext.widthModel = widthModel;
+                } else {
+                    ownerContext.invalidate({
+                        before: me.onConstrainSize,
+                        widthModel: widthModel
+                    });
+                }
+            }
+
+            ownerContext.setWidth(width, dirty);
+        }
+    }
+});

data/app/assets/javascripts/extjs-rails/src/layout/component/Body.js

@@ -0,0 +1,80 @@
+/**
+ * Component layout for components which maintain an inner body element which must be resized to synchronize with the
+ * Component size.
+ * @private
+ */
+Ext.define('Ext.layout.component.Body', {
+
+    /* Begin Definitions */
+
+    alias: ['layout.body'],
+
+    extend: 'Ext.layout.component.Auto',
+
+    /* End Definitions */
+
+    type: 'body',
+
+    beginLayout: function (ownerContext) {
+        this.callParent(arguments);
+
+        ownerContext.bodyContext = ownerContext.getEl('body');
+    },
+
+    // Padding is exciting here because we have 2 el's: owner.el and owner.body. Content
+    // size always includes the padding of the targetEl, which should be owner.body. But
+    // it is common to have padding on owner.el also (such as a panel header), so we need
+    // to do some more padding work if targetContext is not owner.el. The base class has
+    // already handled the ownerContext's frameInfo (border+framing) so all that is left
+    // is padding.
+
+    calculateOwnerHeightFromContentHeight: function (ownerContext, contentHeight) {
+        var height = this.callParent(arguments);
+
+        if (ownerContext.targetContext != ownerContext) {
+            height += ownerContext.getPaddingInfo().height;
+        }
+
+        return height;
+    },
+
+    calculateOwnerWidthFromContentWidth: function (ownerContext, contentWidth) {
+        var width = this.callParent(arguments);
+
+        if (ownerContext.targetContext != ownerContext) {
+            width += ownerContext.getPaddingInfo().width;
+        }
+
+        return width;
+    },
+
+    measureContentWidth: function (ownerContext) {
+        return ownerContext.bodyContext.setWidth(ownerContext.bodyContext.el.dom.offsetWidth, false);
+    },
+
+    measureContentHeight: function (ownerContext) {
+        return ownerContext.bodyContext.setHeight(ownerContext.bodyContext.el.dom.offsetHeight, false);
+    },
+
+    publishInnerHeight: function (ownerContext, height) {
+        var innerHeight = height - ownerContext.getFrameInfo().height,
+            targetContext = ownerContext.targetContext;
+
+        if (targetContext != ownerContext) {
+            innerHeight -= ownerContext.getPaddingInfo().height;
+        }
+
+        ownerContext.bodyContext.setHeight(innerHeight, !ownerContext.heightModel.natural);
+    },
+
+    publishInnerWidth: function (ownerContext, width) {
+        var innerWidth = width - ownerContext.getFrameInfo().width,
+            targetContext = ownerContext.targetContext;
+
+        if (targetContext != ownerContext) {
+            innerWidth -= ownerContext.getPaddingInfo().width;
+        }
+
+        ownerContext.bodyContext.setWidth(innerWidth, !ownerContext.widthModel.natural);
+    }
+});

data/app/assets/javascripts/extjs-rails/src/layout/component/BoundList.js

@@ -0,0 +1,95 @@
+/**
+ * Component layout for {@link Ext.view.BoundList}.
+ * @private
+ */
+Ext.define('Ext.layout.component.BoundList', {
+    extend: 'Ext.layout.component.Auto',
+    alias: 'layout.boundlist',
+
+    type: 'component',
+    
+    beginLayout: function(ownerContext) {
+        var me = this,
+            owner = me.owner,
+            toolbar = owner.pagingToolbar;
+
+        me.callParent(arguments);
+        
+        if (owner.floating) {
+            ownerContext.savedXY = owner.el.getXY();
+            // move way offscreen to prevent any constraining
+            owner.el.setXY([-9999, -9999]);
+        }
+        
+        if (toolbar) {
+            ownerContext.toolbarContext = ownerContext.context.getCmp(toolbar);
+        }
+        ownerContext.listContext = ownerContext.getEl('listEl');
+    },
+    
+    beginLayoutCycle: function(ownerContext){
+        var owner = this.owner;
+        
+        this.callParent(arguments);
+        if (ownerContext.heightModel.auto) {
+            // Set the el/listEl to be autoHeight since they may have been previously sized
+            // by another layout process. If the el was at maxHeight first, the listEl will
+            // always size to the maxHeight regardless of the content.
+            owner.el.setHeight('auto');
+            owner.listEl.setHeight('auto');
+        }
+    },
+
+    getLayoutItems: function() {
+        var toolbar = this.owner.pagingToolbar;
+        return toolbar ? [toolbar] : [];
+    },
+    
+    isValidParent: function() {
+        // this only ever gets called with the toolbar, since it's rendered inside we
+        // know the parent is always valid
+        return true;
+    },
+
+    finishedLayout: function(ownerContext) {
+        var xy = ownerContext.savedXY;
+        
+        this.callParent(arguments);
+        if (xy) {
+            this.owner.el.setXY(xy);
+        }
+    },
+    
+    measureContentWidth: function(ownerContext) {
+        return this.owner.listEl.getWidth();
+    },
+    
+    measureContentHeight: function(ownerContext) {
+        return this.owner.listEl.getHeight();
+    },
+    
+    publishInnerHeight: function(ownerContext, height) {
+        var toolbar = ownerContext.toolbarContext,
+            toolbarHeight = 0;
+            
+        if (toolbar) {
+            toolbarHeight = toolbar.getProp('height');
+        }
+        
+        if (toolbarHeight === undefined) {
+            this.done = false;
+        } else {
+            ownerContext.listContext.setHeight(height - ownerContext.getFrameInfo().height - toolbarHeight);
+        }
+    },
+    
+    calculateOwnerHeightFromContentHeight: function(ownerContext){
+        var height = this.callParent(arguments),
+            toolbar = ownerContext.toolbarContext;
+            
+        if (toolbar) {
+            height += toolbar.getProp('height');
+        }
+        return height;
+    }
+});

data/app/assets/javascripts/extjs-rails/src/layout/component/Button.js

@@ -0,0 +1,261 @@
+/**
+ * Component layout for buttons
+ * @private
+ */
+Ext.define('Ext.layout.component.Button', {
+
+    /* Begin Definitions */
+
+    alias: ['layout.button'],
+
+    extend: 'Ext.layout.component.Auto',
+
+    /* End Definitions */
+
+    type: 'button',
+
+    cellClsRE: /-btn-(tl|br)\b/,
+    htmlRE: /<.*>/,
+
+    constructor: function () {
+        this.callParent(arguments);
+
+        this.hackWidth = Ext.isIE && (!Ext.isStrict || Ext.isIE6 || Ext.isIE7);
+        this.heightIncludesPadding = Ext.isIE6 && Ext.isStrict;
+    },
+
+    // TODO - use last run results if text has not changed?
+
+    beginLayout: function (ownerContext) {
+        this.callParent(arguments);
+
+        this.cacheTargetInfo(ownerContext);
+    },
+
+    beginLayoutCycle: function(ownerContext) {
+        var me = this,
+            empty = '',
+            owner = me.owner,
+            btnEl = owner.btnEl,
+            btnInnerEl = owner.btnInnerEl,
+            text = owner.text,
+            htmlAutoHeight;
+
+        me.callParent(arguments);
+
+        btnInnerEl.setStyle('overflow', empty);
+
+        // Clear all element widths
+        if (!ownerContext.widthModel.natural) {
+            owner.el.setStyle('width', empty);
+        }
+
+        // If the text is HTML we need to let the browser automatically size things to cope with the case where the text
+        // is multi-line. This incurs a cost as we then have to measure those elements to derive other sizes
+        htmlAutoHeight = ownerContext.heightModel.shrinkWrap && text && me.htmlRE.test(text);
+
+        btnEl.setStyle('width', empty);
+        btnEl.setStyle('height', htmlAutoHeight ? 'auto' : empty);
+        btnInnerEl.setStyle('width', empty);
+        btnInnerEl.setStyle('height', htmlAutoHeight ? 'auto' : empty);
+        btnInnerEl.setStyle('line-height', htmlAutoHeight ? 'normal' : empty);
+        btnInnerEl.setStyle('padding-top', empty);
+        owner.btnIconEl.setStyle('width', empty);
+    },
+
+    calculateOwnerHeightFromContentHeight: function (ownerContext, contentHeight) {
+        return contentHeight;
+    },
+
+    calculateOwnerWidthFromContentWidth: function (ownerContext, contentWidth) {
+        return contentWidth;
+    },
+
+    measureContentWidth: function (ownerContext) {
+        var me = this,
+            owner = me.owner,
+            btnEl = owner.btnEl,
+            btnInnerEl = owner.btnInnerEl,
+            text = owner.text,
+            btnFrameWidth, metrics, sizeIconEl, width, btnElContext, btnInnerElContext;
+
+        // IE suffers from various sizing problems, usually caused by relying on it to size elements automatically. Even
+        // if an element is sized correctly it can prove necessary to set that size explicitly on the element to get it
+        // to size and position its children correctly. While the exact nature of the problems varies depending on the
+        // browser version, doctype and button configuration there is a common solution: set the sizes manually.
+        if (owner.text && me.hackWidth && btnEl) {
+            btnFrameWidth = me.btnFrameWidth;
+
+            // If the button text is something like '<' or '<<' then we need to escape it or it won't be measured
+            // correctly. The button text is supposed to be HTML and strictly speaking '<' and '<<' aren't valid HTML.
+            // However in practice they are commonly used and have worked 'correctly' in previous versions.
+            if (text.indexOf('>') === -1) {
+                text = text.replace(/</g, '&lt;');
+            }
+
+            metrics = Ext.util.TextMetrics.measure(btnInnerEl, text);
+
+            width = metrics.width + btnFrameWidth + me.adjWidth;
+
+            btnElContext = ownerContext.getEl('btnEl');
+            btnInnerElContext = ownerContext.getEl('btnInnerEl');
+            sizeIconEl = (owner.icon || owner.iconCls) && 
+                    (owner.iconAlign == "top" || owner.iconAlign == "bottom");
+
+            // This cheat works (barely) with publishOwnerWidth which calls setProp also
+            // to publish the width. Since it is the same value we set here, the dirty bit
+            // we set true will not be cleared by publishOwnerWidth.
+            ownerContext.setWidth(width); // not setWidth (no framing)
+
+            btnElContext.setWidth(metrics.width + btnFrameWidth);
+            btnInnerElContext.setWidth(metrics.width + btnFrameWidth);
+
+            if (sizeIconEl) {
+                owner.btnIconEl.setWidth(metrics.width + btnFrameWidth);
+            }
+        } else {
+            width = ownerContext.el.getWidth();
+        }
+
+        return width;
+    },
+
+    measureContentHeight: function (ownerContext) {
+        var me = this,
+            owner = me.owner,
+            btnInnerEl = owner.btnInnerEl,
+            btnItem = ownerContext.getEl('btnEl'),
+            btnInnerItem = ownerContext.getEl('btnInnerEl'),
+            minTextHeight = me.minTextHeight,
+            adjHeight = me.adjHeight,
+            text = owner.getText(),
+            height,
+            textHeight,
+            topPadding;
+
+        if (owner.vertical) {
+            height = Ext.util.TextMetrics.measure(btnInnerEl, owner.text).width;
+            height += me.btnFrameHeight + adjHeight;
+
+            // Vertical buttons need height explicitly set
+            ownerContext.setHeight(height, /*dirty=*/true, /*force=*/true);
+        }
+        else {
+            // If the button text is HTML we have to handle it specially as it could contain multiple lines
+            if (text && me.htmlRE.test(text)) {
+                textHeight = btnInnerEl.getHeight();
+
+                // HTML content doesn't guarantee multiple lines: in the single line case it could now be too short for the icon
+                if (textHeight < minTextHeight) {
+                    topPadding = Math.floor((minTextHeight - textHeight) / 2);
+
+                    // Resize the span and use padding to center the text vertically. The hack to remove the padding
+                    // from the height on IE6 is especially needed for link buttons
+                    btnInnerItem.setHeight(minTextHeight - (me.heightIncludesPadding ? topPadding : 0));
+                    btnInnerItem.setProp('padding-top', topPadding);
+
+                    textHeight = minTextHeight;
+                }
+
+                // Calculate the height relative to the text span, auto can't be trusted in IE quirks
+                height = textHeight + adjHeight;
+            }
+            else {
+                height = ownerContext.el.getHeight();
+            }
+        }
+
+        // IE quirks needs the button height setting using style or it won't position the icon correctly (even if the height was already correct)
+        btnItem.setHeight(height - adjHeight);
+
+        return height;
+    },
+
+    publishInnerHeight: function(ownerContext, height) {
+        var me = this,
+            owner = me.owner,
+            isNum = Ext.isNumber,
+            btnItem = ownerContext.getEl('btnEl'),
+            btnInnerEl = owner.btnInnerEl,
+            btnInnerItem = ownerContext.getEl('btnInnerEl'),
+            btnHeight = isNum(height) ? height - me.adjHeight : height,
+            btnFrameHeight = me.btnFrameHeight,
+            text = owner.getText(),
+            textHeight,
+            paddingTop;
+
+        btnItem.setHeight(btnHeight);
+        btnInnerItem.setHeight(btnHeight);
+
+        // Only need the line-height setting for regular, horizontal Buttons
+        if (!owner.vertical && btnHeight >= 0) {
+            btnInnerItem.setProp('line-height', btnHeight - btnFrameHeight + 'px');
+        }
+
+        // Button text may contain markup that would force it to wrap to more than one line (e.g. 'Button<br>Label').
+        // When this happens, we cannot use the line-height set above for vertical centering; we instead reset the
+        // line-height to normal, measure the rendered text height, and add padding-top to center the text block
+        // vertically within the button's height. This is more expensive than the basic line-height approach so
+        // we only do it if the text contains markup.
+        if (text && me.htmlRE.test(text)) {
+            btnInnerItem.setProp('line-height', 'normal');
+            btnInnerEl.setStyle('line-height', 'normal');
+            textHeight = Ext.util.TextMetrics.measure(btnInnerEl, text).height;
+            paddingTop = Math.floor(Math.max(btnHeight - btnFrameHeight - textHeight, 0) / 2);
+            btnInnerItem.setProp('padding-top', me.btnFrameTop + paddingTop);
+            btnInnerItem.setHeight(btnHeight - (me.heightIncludesPadding ? paddingTop : 0));
+        }
+    },
+
+    publishInnerWidth: function(ownerContext, width) {
+        var me = this,
+            isNum = Ext.isNumber,
+            btnItem = ownerContext.getEl('btnEl'),
+            btnInnerItem = ownerContext.getEl('btnInnerEl'),
+            btnWidth = isNum(width) ? width - me.adjWidth : width;
+
+        btnItem.setWidth(btnWidth);
+        btnInnerItem.setWidth(btnWidth);
+    },
+    
+    clearTargetCache: function(){
+        delete this.adjWidth;    
+    },
+
+    cacheTargetInfo: function(ownerContext) {
+        var me = this,
+            owner = me.owner,
+            scale = owner.scale,
+            padding, frameSize, btnWrapPadding, btnInnerEl, innerFrameSize;
+
+        // The cache is only valid for a particular scale
+        if (!('adjWidth' in me) || me.lastScale !== scale) {
+            // If there has been a previous layout run it could have sullied the line-height
+            if (me.lastScale) {
+                owner.btnInnerEl.setStyle('line-height', '');
+            }
+
+            me.lastScale = scale;
+
+            padding = ownerContext.getPaddingInfo();
+            frameSize = ownerContext.getFrameInfo();
+            btnWrapPadding = ownerContext.getEl('btnWrap').getPaddingInfo();
+            btnInnerEl = ownerContext.getEl('btnInnerEl');
+            innerFrameSize = btnInnerEl.getPaddingInfo();
+
+            Ext.apply(me, {
+                // Width adjustment must take into account the arrow area. The btnWrap is the <em> which has padding to accommodate the arrow.
+                adjWidth       : btnWrapPadding.width + frameSize.width + padding.width,
+                adjHeight      : btnWrapPadding.height + frameSize.height + padding.height,
+                btnFrameWidth  : innerFrameSize.width,
+                btnFrameHeight : innerFrameSize.height,
+                btnFrameTop    : innerFrameSize.top,
+
+                // Use the line-height rather than height because if the text is multi-line then the height will be 'wrong'
+                minTextHeight  : parseInt(btnInnerEl.getStyle('line-height'), 10)
+            });
+        }
+
+        me.callParent(arguments);
+    }
+});