extjs-rails 4.1.0.alpha1

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

@@ -0,0 +1,79 @@
+/**
+ * @class Ext.layout.component.Draw
+ * @private
+ *
+ */
+
+Ext.define('Ext.layout.component.Draw', {
+
+    /* Begin Definitions */
+
+    alias: 'layout.draw',
+
+    extend: 'Ext.layout.component.Auto',
+
+    /* End Definitions */
+
+    type: 'draw',
+    
+    measureContentWidth : function (ownerContext) {
+        var target = ownerContext.target,
+            surface = target.surface,
+            paddingInfo = ownerContext.getPaddingInfo(),
+            bbox = ownerContext.surfaceBBox || (ownerContext.surfaceBBox = surface.items.getBBox());
+        if (!target.viewBox) {
+            if (target.autoSize) {
+                return bbox.width + paddingInfo.width;
+            } else {
+                return bbox.x + bbox.width + paddingInfo.width;
+            }
+        } else {
+            if (ownerContext.heightModel.shrinkWrap) {
+                return paddingInfo.width;
+            } else {
+                return bbox.width / bbox.height * (ownerContext.getProp('contentHeight') - paddingInfo.height) + paddingInfo.width;
+            }
+        }
+    },
+    
+    measureContentHeight : function (ownerContext) {
+        var target = ownerContext.target,
+            surface = target.surface,
+            paddingInfo = ownerContext.getPaddingInfo(),
+            bbox = ownerContext.surfaceBBox || (ownerContext.surfaceBBox = surface.items.getBBox());
+        if (!ownerContext.target.viewBox) {
+            if (target.autoSize) {
+                return bbox.height + paddingInfo.height;
+            } else {
+                return bbox.y + bbox.height + paddingInfo.height;
+            }
+        } else {
+            if (ownerContext.widthModel.shrinkWrap) {
+                return paddingInfo.height;
+            } else {
+                return bbox.height / bbox.width * (ownerContext.getProp('contentWidth') - paddingInfo.width) + paddingInfo.height;
+            }
+        }
+    },
+
+    publishInnerWidth: function (ownerContext, width) {
+        ownerContext.setContentWidth(width - ownerContext.getFrameInfo().width, true);
+    },
+    
+    publishInnerHeight: function (ownerContext, height) {
+        ownerContext.setContentHeight(height - ownerContext.getFrameInfo().height, true);
+    },
+    
+    finishedLayout: function (ownerContext) {
+        // TODO: Is there a better way doing this?
+        var props = ownerContext.props,
+            paddingInfo = ownerContext.getPaddingInfo();
+
+        // We don't want the cost of getProps, so we just use the props data... this is ok
+        // because all the props have been calculated by this time
+        this.owner.setSurfaceSize(props.contentWidth - paddingInfo.width, props.contentHeight - paddingInfo.height);
+        
+        // calls afterComponentLayout, so we want the surface to be sized before that:
+        this.callParent(arguments);
+    }
+});

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

@@ -0,0 +1,62 @@
+/**
+ * Component layout for Ext.form.FieldSet components
+ * @private
+ */
+Ext.define('Ext.layout.component.FieldSet', {
+    extend: 'Ext.layout.component.Body',
+    alias: ['layout.fieldset'],
+
+    type: 'fieldset',
+
+    /*beginLayout: function (ownerContext) {
+        this.callParent(arguments);
+
+        var legend = this.owner.legend;
+        if (legend) {
+            ownerContext.legendContext = ownerContext.context.getCmp(legend);
+        }
+    },*/
+
+    beginLayoutCycle: function (ownerContext) {
+        var target = ownerContext.target,
+            lastSize;
+
+        this.callParent(arguments);
+
+        // Each time we begin (2nd+ would be due to invalidate) we need to publish the
+        // known contentHeight if we are collapsed:
+        //
+        if (target.collapsed) {
+            ownerContext.heightModel = this.sizeModels.shrinkWrap;
+            ownerContext.setContentHeight(0);
+
+            // If we are also shrinkWrap width, we must provide a contentWidth (since the
+            // container layout is not going to run).
+            //
+            if (ownerContext.widthModel.shrinkWrap) {
+                lastSize = target.lastComponentSize;
+                ownerContext.setContentWidth((lastSize && lastSize.contentWidth) || 100);
+            }
+        }
+    },
+
+    calculateOwnerHeightFromContentHeight: function (ownerContext, contentHeight) {
+        // Height of fieldset is content height plus top border width (which is either the legend height or top border width) plus bottom border width
+        return ownerContext.getProp('contentHeight') + ownerContext.getPaddingInfo().height + (ownerContext.target.legend ? ownerContext.target.legend.getHeight() : ownerContext.getBorderInfo().top) + ownerContext.getBorderInfo().bottom;
+    },
+
+    publishInnerHeight: function (ownerContext, height) {
+        this.callParent(arguments);
+        if (ownerContext.target.legend) {
+            ownerContext.bodyContext.setHeight(ownerContext.bodyContext.getProp('height') - ownerContext.target.legend.getHeight(), !ownerContext.heightModel.natural);
+        }
+    },
+
+    getLayoutItems : function() {
+        var legend = this.owner.legend;
+        if (legend) {
+            return [ legend ];
+        }
+        return [];
+    }
+});

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

@@ -0,0 +1,54 @@
+/**
+ * @private
+ */
+Ext.define('Ext.layout.component.ProgressBar', {
+
+    /* Begin Definitions */
+
+    alias: ['layout.progressbar'],
+
+    extend: 'Ext.layout.component.Auto',
+
+    /* End Definitions */
+
+    type: 'progressbar',
+
+    beginLayout: function (ownerContext) {
+        var me = this,
+            i, textEls;
+
+        me.callParent(arguments);
+
+        if (!ownerContext.textEls) {
+            textEls = me.owner.textEl; // an Ext.Element or CompositeList (raw DOM el's)
+
+            if (textEls.isComposite) {
+                ownerContext.textEls = [];
+                textEls = textEls.elements;
+                for (i = textEls.length; i--; ) {
+                    ownerContext.textEls[i] = ownerContext.getEl(Ext.get(textEls[i]));
+                }
+            } else {
+                ownerContext.textEls = [ ownerContext.getEl('textEl') ];
+            }
+        }
+    },
+
+    calculate: function(ownerContext) {
+        var me = this,
+            i, textEls, width;
+
+        me.callParent(arguments);
+
+        if (Ext.isNumber(width = ownerContext.getProp('width'))) {
+            width -= ownerContext.getBorderInfo().width;
+            textEls = ownerContext.textEls;
+
+            for (i = textEls.length; i--; ) {
+                textEls[i].setWidth(width);
+            }
+        } else {
+            me.done = false;
+        }
+    }
+});

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

@@ -0,0 +1,23 @@
+/**
+ * Component layout for tabs
+ * @private
+ */
+Ext.define('Ext.layout.component.Tab', {
+
+    extend: 'Ext.layout.component.Button',
+    alias: 'layout.tab',
+
+    beginLayout: function(ownerContext) {
+        var me = this,
+            closable = me.owner.closable;
+
+        // Changing the close button visibility causes our cached measurements to be wrong,
+        // so we must convince our base class to re-cache those adjustments...
+        if (me.lastClosable !== closable) {
+            me.lastClosable = closable;
+            me.clearTargetCache();
+        }
+
+        me.callParent(arguments);
+    }
+});

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

@@ -0,0 +1,52 @@
+/**
+ * Layout class for {@link Ext.form.field.ComboBox} fields. Handles sizing the input field.
+ * @private
+ */
+Ext.define('Ext.layout.component.field.ComboBox', {
+    extend: 'Ext.layout.component.field.Trigger',
+    alias: 'layout.combobox',
+    requires: ['Ext.util.TextMetrics'],
+
+    type: 'combobox',
+
+    startingWidth: null,
+
+    getTextWidth: function () {
+        var me = this,
+            owner = me.owner,
+            store = owner.store,
+            field = owner.displayField,
+            storeLn = store.data.length,
+            value = '',
+            i = 0, n = 0, ln, item, width;
+
+        for (; i < storeLn; i++) {
+            item = store.getAt(i).data[field];
+            ln = item.length;
+            // compare the current item's length with the current longest length and store the value
+            if (ln > n) {
+                n = ln;
+                value = item;
+            }
+        }
+
+        width = Math.max(me.callParent(arguments), owner.inputEl.getTextWidth(value + owner.growAppend));
+
+        // it's important to know the starting width else the inputEl could be resized smaller than the boundlist
+        // NOTE that when removing items from the store that the startingWidth needs to be recalculated
+        if (!me.startingWidth || owner.removingRecords) {
+            me.startingWidth = width;
+
+            // also, if the width is less than growMin reset the default boundlist width
+            // or it will appear wider than the component if the trigger is clicked
+            if (width < owner.growMin) {
+                owner.defaultListConfig.minWidth = owner.growMin;
+            }
+
+            owner.removingRecords = false;
+        }
+ 
+        // only resize if the new width is greater than the starting width
+        return (width < me.startingWidth) ? me.startingWidth : width;
+    }
+});

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

@@ -0,0 +1,372 @@
+/**
+ * Layout class for components with {@link Ext.form.Labelable field labeling}, handling the sizing and alignment of
+ * the form control, label, and error message treatment.
+ * @private
+ */
+Ext.define('Ext.layout.component.field.Field', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.layout.component.Auto',
+
+    alias: 'layout.field',
+
+    uses: ['Ext.tip.QuickTip', 'Ext.util.TextMetrics', 'Ext.util.CSS'],
+
+    /* End Definitions */
+
+    type: 'field',
+
+    beginLayout: function(ownerContext) {
+        var me = this,
+            owner = me.owner,
+            widthModel = ownerContext.widthModel,
+            width;
+
+        me.callParent(arguments);
+
+        ownerContext.labelStrategy = me.getLabelStrategy();
+        ownerContext.errorStrategy = me.getErrorStrategy();
+
+        ownerContext.labelContext = ownerContext.getEl('labelEl');
+        ownerContext.bodyCellContext = ownerContext.getEl('bodyEl');
+        ownerContext.inputContext = ownerContext.getEl('inputEl');
+        ownerContext.errorContext = ownerContext.getEl('errorEl');
+        ownerContext.inputRow = ownerContext.getEl('inputRow');
+
+        // width:100% on an element inside a table in IE6/7 "strict" sizes the content box.
+        // store the input element's border and padding info so that subclasses can take it into consideration if needed
+        if ((Ext.isIE6 || Ext.isIE7) && Ext.isStrict && ownerContext.inputContext) {
+            me.ieInputWidthAdjustment = ownerContext.inputContext.getPaddingInfo().width + ownerContext.inputContext.getBorderInfo().width;
+        }
+
+        // perform preparation on the label and error (setting css classes, qtips, etc.)
+        ownerContext.labelStrategy.prepare(ownerContext, owner);
+        ownerContext.errorStrategy.prepare(ownerContext, owner);
+
+        // Body cell must stretch to use up available width unless the field is auto width
+        if (widthModel.shrinkWrap) {
+            // When the width needs to be auto, table-layout cannot be fixed
+            me.beginLayoutShrinkWrap(ownerContext);
+        } else if (widthModel.natural) {
+
+            // When a size specified, natural becomes fixed width
+            if (typeof owner.size == 'number') {
+                me.beginLayoutFixed(ownerContext, (width = owner.size * 6.5 + 20), 'px');
+            }
+
+            // Otherwise it is the same as shrinkWrap
+            else {
+                me.beginLayoutShrinkWrap(ownerContext);
+            }
+            ownerContext.setWidth(width, false);
+        } else {
+            me.beginLayoutFixed(ownerContext, '100', '%');
+        }
+    },
+
+    beginLayoutFixed: function (ownerContext, width, suffix) {
+        var owner = ownerContext.target;
+
+        owner.el.setStyle('table-layout', 'fixed');
+        owner.bodyEl.setStyle('width', width + suffix);
+    },
+
+    beginLayoutShrinkWrap: function (ownerContext) {
+        var owner = ownerContext.target;
+
+        if (owner.inputEl && owner.inputEl.dom) {
+            owner.inputEl.dom.removeAttribute('size');
+        }
+        owner.el.setStyle('table-layout', 'auto');
+        owner.bodyEl.setStyle('width', '');
+    },
+
+    finishedLayout: function(ownerContext){
+        var owner = this.owner;
+        
+        this.callParent(arguments);
+        ownerContext.labelStrategy.finishedLayout(ownerContext, owner);
+        ownerContext.errorStrategy.finishedLayout(ownerContext, owner);
+    },
+
+    calculateOwnerHeightFromContentHeight: function(ownerContext, contentHeight) {
+        return contentHeight;
+    },
+
+    measureContentHeight: function (ownerContext) {
+        return ownerContext.el.getHeight();
+    },
+    
+    measureContentWidth: function (ownerContext) {
+        return ownerContext.el.getWidth();
+    },
+
+    measureLabelErrorHeight: function (ownerContext) {
+        return ownerContext.labelStrategy.getHeight(ownerContext) +
+               ownerContext.errorStrategy.getHeight(ownerContext);
+    },
+
+    onFocus: function() {
+        this.getErrorStrategy().onFocus(this.owner);    
+    },
+
+    /**
+     * Return the set of strategy functions from the {@link #labelStrategies labelStrategies collection}
+     * that is appropriate for the field's {@link Ext.form.Labelable#labelAlign labelAlign} config.
+     */
+    getLabelStrategy: function() {
+        var me = this,
+            strategies = me.labelStrategies,
+            labelAlign = me.owner.labelAlign;
+        return strategies[labelAlign] || strategies.base;
+    },
+
+    /**
+     * Return the set of strategy functions from the {@link #errorStrategies errorStrategies collection}
+     * that is appropriate for the field's {@link Ext.form.Labelable#msgTarget msgTarget} config.
+     */
+    getErrorStrategy: function() {
+        var me = this,
+            owner = me.owner,
+            strategies = me.errorStrategies,
+            msgTarget = owner.msgTarget;
+        return !owner.preventMark && Ext.isString(msgTarget) ?
+                (strategies[msgTarget] || strategies.elementId) :
+                strategies.none;
+    },
+
+    /**
+     * Collection of named strategies for laying out and adjusting labels to accommodate error messages.
+     * An appropriate one will be chosen based on the owner field's {@link Ext.form.Labelable#labelAlign} config.
+     */
+    labelStrategies: (function() {
+        var base = {
+                prepare: function(ownerContext, owner) {
+                    var cls = owner.labelCls + '-' + owner.labelAlign,
+                        labelEl = owner.labelEl;
+
+                    if (labelEl) {
+                        labelEl.addCls(cls);
+                    }
+                },
+
+                getHeight: function () {
+                    return 0;
+                },
+                
+                finishedLayout: Ext.emptyFn
+            };
+
+        return {
+            base: base,
+
+            /**
+             * Label displayed above the bodyEl
+             */
+            top: Ext.applyIf({
+                prepare: function(ownerContext, owner){
+                    base.prepare(ownerContext, owner);
+                    var labelEl = owner.labelEl;
+                    ownerContext.hasHiddenLabel = labelEl && !owner.hideEmptyLabel && !owner.getFieldLabel(); 
+                    
+                    if (ownerContext.hasHiddenLabel) {
+                        labelEl.dom.innerHTML = ' ';
+                    }    
+                },
+                
+                getHeight: function (ownerContext) {
+                    var labelContext = ownerContext.labelContext,
+                        height = labelContext.getProp('height'),
+                        hasEmptyLabel = ownerContext.hasHiddenLabel;
+
+                    if (height === undefined || hasEmptyLabel) {
+                        height = labelContext.el.getHeight() + labelContext.getMarginInfo().height;
+                        if (hasEmptyLabel) {
+                            // only force the height if we'll be clearing it later
+                            labelContext.setHeight(height);
+                        }
+                    }
+
+                    return height;
+                },
+                
+                finishedLayout: function(ownerContext, owner) {
+                     if (ownerContext.hasHiddenLabel) {
+                        owner.labelEl.dom.innerHTML = '';
+                    }    
+                }
+            }, base),
+
+            /**
+             * Label displayed to the left of the bodyEl
+             */
+            left: base,
+
+            /**
+             * Same as left, only difference is text-align in CSS
+             */
+            right: base
+        };
+    }()),
+
+    /**
+     * Collection of named strategies for laying out and adjusting insets to accommodate error messages.
+     * An appropriate one will be chosen based on the owner field's {@link Ext.form.Labelable#msgTarget} config.
+     */
+    errorStrategies: (function() {
+        function showTip(owner) {
+            var tip = Ext.layout.component.field.Field.tip,
+                target;
+                
+            if (tip && tip.isVisible()) {
+                target = tip.activeTarget;
+                if (target && target.el === owner.getActionEl().dom) {
+                    tip.toFront(true);
+                }
+            }
+        }
+
+        var applyIf = Ext.applyIf,
+            emptyFn = Ext.emptyFn,
+            iconCls = Ext.baseCSSPrefix + 'form-invalid-icon',
+            iconWidth,
+            base = {
+                prepare: function(ownerContext, owner) {
+                    var el = owner.errorEl;
+                    if (el) {
+                        el.setDisplayed(false);
+                    }
+                },
+                getHeight: function () {
+                    return 0;
+                },
+                onFocus: emptyFn,
+                finishedLayout: emptyFn
+            };
+
+        return {
+            none: base,
+
+            /**
+             * Error displayed as icon (with QuickTip on hover) to right of the bodyEl
+             */
+            side: applyIf({
+                prepare: function(ownerContext, owner) {
+                    var errorEl = owner.errorEl,
+                        tempEl;
+
+                    // Capture error icon width once
+                    if (!iconWidth) {
+                        iconWidth = (tempEl = Ext.getBody().createChild({style: 'position:absolute', cls: iconCls})).getWidth();
+                        tempEl.remove();
+                    }
+
+                    errorEl.addCls(iconCls);
+                    errorEl.set({'data-errorqtip': owner.getActiveError() || ''});
+                    errorEl.setDisplayed(owner.hasActiveError());
+                    owner.bodyEl.dom.colSpan = owner.getBodyColspan();
+
+                    // TODO: defer the tip call until after the layout to avoid immediate DOM reads now
+                    Ext.layout.component.field.Field.initTip();
+                },
+                onFocus: showTip
+            }, base),
+
+            /**
+             * Error message displayed underneath the bodyEl
+             */
+            under: applyIf({
+                prepare: function(ownerContext, owner) {
+                    var errorEl = owner.errorEl,
+                        cls = Ext.baseCSSPrefix + 'form-invalid-under';
+
+                    errorEl.addCls(cls);
+                    errorEl.setDisplayed(owner.hasActiveError());
+                    if (owner.labelAlign == 'left') {
+                        // hide the under label placeholder td
+                        errorEl.prev().setDisplayed(owner.hasVisibleLabel() ? 'block' : 'none');
+                    }
+                },
+                getHeight: function (ownerContext) {
+                    var height = 0,
+                        errorContext, props;
+
+                    if (ownerContext.target.hasActiveError()) {
+                        errorContext = ownerContext.errorContext;
+                        props = errorContext.props;
+                        height = props.height;
+
+                        if (height === undefined) {
+                            props.height = height = errorContext.el.getHeight();
+                        }
+                    }
+
+                    return height;
+                }
+            }, base),
+
+            /**
+             * Error displayed as QuickTip on hover of the field container
+             */
+            qtip: applyIf({
+                prepare: function(ownerContext, owner) {
+                    Ext.layout.component.field.Field.initTip();
+                    owner.getActionEl().set({'data-errorqtip': owner.getActiveError() || ''});
+                },
+                onFocus: showTip
+            }, base),
+
+            /**
+             * Error displayed as title tip on hover of the field container
+             */
+            title: applyIf({
+                prepare: function(ownerContext, owner) {
+                    owner.el.set({'title': owner.getActiveError() || ''});
+                }
+            }, base),
+
+            /**
+             * Error message displayed as content of an element with a given id elsewhere in the app
+             */
+            elementId: applyIf({
+                prepare: function(ownerContext, owner) {
+                    var targetEl = Ext.fly(owner.msgTarget);
+                    if (targetEl) {
+                        targetEl.dom.innerHTML = owner.getActiveError() || '';
+                        targetEl.setDisplayed(owner.hasActiveError());
+                    }
+                }
+            }, base)
+        };
+    }()),
+
+    statics: {
+        /**
+         * Use a custom QuickTip instance separate from the main QuickTips singleton, so that we
+         * can give it a custom frame style. Responds to errorqtip rather than the qtip property.
+         * @static
+         */
+        initTip: function() {
+            var tip = this.tip;
+            if (!tip) {
+                tip = this.tip = Ext.create('Ext.tip.QuickTip', {
+                    baseCls: Ext.baseCSSPrefix + 'form-invalid-tip'
+                });
+                tip.tagConfig = Ext.apply({}, {attribute: 'errorqtip'}, tip.tagConfig);
+            }
+        },
+
+        /**
+         * Destroy the error tip instance.
+         * @static
+         */
+        destroyTip: function() {
+            var tip = this.tip;
+            if (tip) {
+                tip.destroy();
+                delete this.tip;
+            }
+        }
+    }
+});