extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/layout/container/Accordion.js

@@ -0,0 +1,308 @@
+/**
+ * This is a layout that manages multiple Panels in an expandable accordion style such that only
+ * **one Panel can be expanded at any given time**. Each Panel has built-in support for expanding and collapsing.
+ *
+ * Note: Only Ext Panels and all subclasses of Ext.panel.Panel may be used in an accordion layout Container.
+ *
+ *     @example
+ *     Ext.create('Ext.panel.Panel', {
+ *         title: 'Accordion Layout',
+ *         width: 300,
+ *         height: 300,
+ *         defaults: {
+ *             // applied to each contained panel
+ *             bodyStyle: 'padding:15px'
+ *         },
+ *         layout: {
+ *             // layout-specific configs go here
+ *             type: 'accordion',
+ *             titleCollapse: false,
+ *             animate: true,
+ *             activeOnTop: true
+ *         },
+ *         items: [{
+ *             title: 'Panel 1',
+ *             html: 'Panel content!'
+ *         },{
+ *             title: 'Panel 2',
+ *             html: 'Panel content!'
+ *         },{
+ *             title: 'Panel 3',
+ *             html: 'Panel content!'
+ *         }],
+ *         renderTo: Ext.getBody()
+ *     });
+ */
+Ext.define('Ext.layout.container.Accordion', {
+    extend: 'Ext.layout.container.VBox',
+    alias: ['layout.accordion'],
+    alternateClassName: 'Ext.layout.AccordionLayout',
+
+    itemCls: [Ext.baseCSSPrefix + 'box-item', Ext.baseCSSPrefix + 'accordion-item'],
+
+    align: 'stretch',
+
+    /**
+     * @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.
+     */
+    fill : true,
+
+    /**
+     * @cfg {Boolean} autoWidth
+     * Child Panels have their width actively managed to fit within the accordion's width.
+     * @removed This config is ignored in ExtJS 4
+     */
+
+    /**
+     * @cfg {Boolean} titleCollapse
+     * True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow
+     * expand/collapse only when the toggle tool button is clicked.  When set to false,
+     * {@link #hideCollapseTool} should be false also.
+     */
+    titleCollapse : true,
+
+    /**
+     * @cfg {Boolean} hideCollapseTool
+     * True to hide the contained Panels' collapse/expand toggle buttons, false to display them.
+     * When set to true, {@link #titleCollapse} is automatically set to true.
+     */
+    hideCollapseTool : false,
+
+    /**
+     * @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.
+     */
+    collapseFirst : false,
+
+    /**
+     * @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. Note: The layout performs animated collapsing
+     * and expanding, *not* the child Panels.
+     */
+    animate : true,
+    /**
+     * @cfg {Boolean} activeOnTop
+     * Only valid when {@link #multi} is `false` and {@link #animate} is `false`.
+     *
+     * True to swap the position of each panel as it is expanded so that it becomes the first item in the container,
+     * false to keep the panels in the rendered order.
+     */
+    activeOnTop : false,
+    /**
+     * @cfg {Boolean} multi
+     * Set to true to enable multiple accordion items to be open at once.
+     */
+    multi: false,
+    
+    defaultAnimatePolicy: {
+        y: true,
+        height: true
+    },
+
+    constructor: function() {
+        var me = this;
+
+        me.callParent(arguments);
+
+        if (me.animate) {
+            me.animatePolicy = Ext.apply({}, me.defaultAnimatePolicy);
+        } else {
+            me.animatePolicy = null;
+        }
+    },
+
+    beforeRenderItems: function (items) {
+        var me = this,
+            ln = items.length,
+            i = 0,
+            comp;
+
+        for (; i < ln; i++) {
+            comp = items[i];
+            if (!comp.rendered) {
+                // Set up initial properties for Panels in an accordion.
+                if (me.collapseFirst) {
+                    comp.collapseFirst = me.collapseFirst;
+                }
+                if (me.hideCollapseTool) {
+                    comp.hideCollapseTool = me.hideCollapseTool;
+                    comp.titleCollapse = true;
+                }
+                else if (me.titleCollapse) {
+                    comp.titleCollapse = me.titleCollapse;
+                }
+
+                delete comp.hideHeader;
+                delete comp.width;
+                comp.collapsible = true;
+                comp.title = comp.title || '&#160;';
+                comp.addBodyCls(Ext.baseCSSPrefix + 'accordion-body');
+
+                // If only one child Panel is allowed to be expanded
+                // then collapse all except the first one found with collapsed:false
+                if (!me.multi) {
+                    // If there is an expanded item, all others must be rendered collapsed.
+                    if (me.expandedItem !== undefined) {
+                        comp.collapsed = true;
+                    }
+                    // Otherwise expand the first item with collapsed explicitly configured as false
+                    else if (comp.hasOwnProperty('collapsed') && comp.collapsed === false) {
+                        me.expandedItem = i;
+                    } else {
+                        comp.collapsed = true;
+                    }
+
+                    // If only one child Panel may be expanded, then intercept expand/show requests.
+                    me.owner.mon(comp, {
+                        show: me.onComponentShow,
+                        beforeexpand: me.onComponentExpand,
+                        scope: me
+                    });
+                }
+
+                // If we must fill available space, a collapse must be listened for and a sibling must
+                // be expanded.
+                if (me.fill) {
+                    me.owner.mon(comp, {
+                        beforecollapse: me.onComponentCollapse,
+                        scope: me
+                    });
+                }
+            }
+        }
+
+        // If no collapsed:false Panels found, make the first one expanded.
+        if (ln && me.expandedItem === undefined) {
+            me.expandedItem = 0;
+            items[0].collapsed = false;
+        }
+    },
+
+    getItemsRenderTree: function(items) {
+        this.beforeRenderItems(items);
+
+        return this.callParent(arguments);
+    },
+
+    renderItems : function(items, target) {
+        this.beforeRenderItems(items);
+
+        this.callParent(arguments);
+    },
+
+    configureItem: function(item) {
+        this.callParent(arguments);
+
+        // We handle animations for the expand/collapse of items.
+        // Items do not have individual borders
+        item.animCollapse = item.border = false;
+
+        // If filling available space, all Panels flex.
+        if (this.fill) {
+            item.flex = 1;
+        }
+    },
+
+    onChildPanelRender: function(panel) {
+        panel.header.addCls(Ext.baseCSSPrefix + 'accordion-hd');
+    },
+
+    beginLayout: function (ownerContext) {
+        this.callParent(arguments);
+        this.updatePanelClasses(ownerContext);
+    },
+
+    updatePanelClasses: function(ownerContext) {
+        var children = ownerContext.visibleItems,
+            ln = children.length,
+            siblingCollapsed = true,
+            i, child, header;
+
+        for (i = 0; i < ln; i++) {
+            child = children[i];
+            header = child.header;
+            header.addCls(Ext.baseCSSPrefix + 'accordion-hd');
+
+            if (siblingCollapsed) {
+                header.removeCls(Ext.baseCSSPrefix + 'accordion-hd-sibling-expanded');
+            } else {
+                header.addCls(Ext.baseCSSPrefix + 'accordion-hd-sibling-expanded');
+            }
+
+            if (i + 1 == ln && child.collapsed) {
+                header.addCls(Ext.baseCSSPrefix + 'accordion-hd-last-collapsed');
+            } else {
+                header.removeCls(Ext.baseCSSPrefix + 'accordion-hd-last-collapsed');
+            }
+
+            siblingCollapsed = child.collapsed;
+        }
+    },
+
+    // When a Component expands, adjust the heights of the other Components to be just enough to accommodate
+    // their headers.
+    // The expanded Component receives the only flex value, and so gets all remaining space.
+    onComponentExpand: function(toExpand) {
+        var me = this,
+            owner = me.owner,
+            expanded,
+            expandedCount, i,
+            previousValue;
+
+        if (!me.processing) {
+            me.processing = true;
+            previousValue = owner.deferLayouts;
+            owner.deferLayouts = true;
+            expanded = me.multi ? [] : owner.query('>panel:not([collapsed])');
+            expandedCount = expanded.length;
+            
+            // Collapse all other expanded child items (Won't loop if multi is true)
+            for (i = 0; i < expandedCount; i++) {
+                expanded[i].collapse();
+            }
+            owner.deferLayouts = previousValue;
+            me.processing = false;
+        }
+    },
+
+    onComponentCollapse: function(comp) {
+        var me = this,
+            owner = me.owner,
+            toExpand,
+            expanded,
+            previousValue;
+
+        if (!me.processing) {
+            me.processing = true;
+            previousValue = owner.deferLayouts;
+            owner.deferLayouts = true;
+            toExpand = comp.next() || comp.prev();
+
+            // If we are allowing multi, and the "toCollapse" component is NOT the only expanded Component,
+            // then ask the box layout to collapse it to its header.
+            if (me.multi) {
+                expanded = me.owner.query('>panel:not([collapsed])');
+
+                // If the collapsing Panel is the only expanded one, expand the following Component.
+                // All this is handling fill: true, so there must be at least one expanded,
+                if (expanded.length === 1) {
+                    toExpand.expand();
+                }
+
+            } else if (toExpand) {
+                toExpand.expand();
+            }
+            owner.deferLayouts = previousValue;
+            me.processing = false;
+        }
+    },
+
+    onComponentShow: function(comp) {
+        // Showing a Component means that you want to see it, so expand it.
+        this.onComponentExpand(comp);
+    }
+});

data/app/assets/javascripts/extjs-rails/src/layout/container/Anchor.js

@@ -0,0 +1,403 @@
+/**
+ * This is a layout that enables anchoring of contained elements relative to the container's dimensions.
+ * If the container is resized, all anchored items are automatically rerendered according to their
+ * `{@link #anchor}` rules.
+ *
+ * This class is intended to be extended or created via the {@link Ext.container.AbstractContainer#layout layout}: 'anchor' 
+ * config, and should generally not need to be created directly via the new keyword.
+ * 
+ * AnchorLayout does not have any direct config options (other than inherited ones). By default,
+ * AnchorLayout will calculate anchor measurements based on the size of the container itself. However, the
+ * container using the AnchorLayout can supply an anchoring-specific config property of `anchorSize`.
+ *
+ * If anchorSize is specifed, the layout will use it as a virtual container for the purposes of calculating
+ * anchor measurements based on it instead, allowing the container to be sized independently of the anchoring
+ * logic if necessary.
+ *
+ *     @example
+ *     Ext.create('Ext.Panel', {
+ *         width: 500,
+ *         height: 400,
+ *         title: "AnchorLayout Panel",
+ *         layout: 'anchor',
+ *         renderTo: Ext.getBody(),
+ *         items: [
+ *             {
+ *                 xtype: 'panel',
+ *                 title: '75% Width and 20% Height',
+ *                 anchor: '75% 20%'
+ *             },
+ *             {
+ *                 xtype: 'panel',
+ *                 title: 'Offset -300 Width & -200 Height',
+ *                 anchor: '-300 -200'		
+ *             },
+ *             {
+ *                 xtype: 'panel',
+ *                 title: 'Mixed Offset and Percent',
+ *                 anchor: '-250 20%'
+ *             }
+ *         ]
+ *     });
+ */
+Ext.define('Ext.layout.container.Anchor', {
+
+    /* Begin Definitions */
+
+    alias: 'layout.anchor',
+    extend: 'Ext.layout.container.Container',
+    alternateClassName: 'Ext.layout.AnchorLayout',
+
+    /* End Definitions */
+
+    type: 'anchor',
+
+    manageOverflow: 2,
+
+    renderTpl: [
+        '{%this.renderBody(out,values);this.renderPadder(out,values)%}'
+    ],
+
+    /**
+     * @cfg {String} anchor
+     *
+     * This configuation option is to be applied to **child `items`** of a container managed by
+     * this layout (ie. configured with `layout:'anchor'`).
+     *
+     * This value is what tells the layout how an item should be anchored to the container. `items`
+     * added to an AnchorLayout accept an anchoring-specific config property of **anchor** which is a string
+     * containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%').
+     * The following types of anchor values are supported:
+     *
+     * - **Percentage** : Any value between 1 and 100, expressed as a percentage.
+     *
+     *   The first anchor is the percentage width that the item should take up within the container, and the
+     *   second is the percentage height.  For example:
+     *
+     *       // two values specified
+     *       anchor: '100% 50%' // render item complete width of the container and
+     *                          // 1/2 height of the container
+     *       // one value specified
+     *       anchor: '100%'     // the width value; the height will default to auto
+     *
+     * - **Offsets** : Any positive or negative integer value.
+     *
+     *   This is a raw adjustment where the first anchor is the offset from the right edge of the container,
+     *   and the second is the offset from the bottom edge. For example:
+     *
+     *       // two values specified
+     *       anchor: '-50 -100' // render item the complete width of the container
+     *                          // minus 50 pixels and
+     *                          // the complete height minus 100 pixels.
+     *       // one value specified
+     *       anchor: '-50'      // anchor value is assumed to be the right offset value
+     *                          // bottom offset will default to 0
+     *
+     * - **Sides** : Valid values are `right` (or `r`) and `bottom` (or `b`).
+     *
+     *   Either the container must have a fixed size or an anchorSize config value defined at render time in
+     *   order for these to have any effect.
+     *   
+     * - **Mixed** :
+     *
+     *   Anchor values can also be mixed as needed.  For example, to render the width offset from the container
+     *   right edge by 50 pixels and 75% of the container's height use:
+     *   
+     *       anchor:   '-50 75%'
+     */
+
+    /**
+     * @cfg {String} defaultAnchor
+     * Default anchor for all child **container** items applied if no anchor or specific width is set on the child item.
+     */
+    defaultAnchor: '100%',
+
+    parseAnchorRE: /^(r|right|b|bottom)$/i,
+
+    beginLayout: function (ownerContext) {
+        var me = this,
+            dimensions = 0,
+            anchorSpec, childContext, childItems, i, length, target;
+
+        me.callParent(arguments);
+
+        childItems = ownerContext.childItems; // populated by callParent
+        length = childItems.length;
+
+        for (i = 0; i < length; ++i) {
+            childContext = childItems[i];
+            anchorSpec = childContext.target.anchorSpec;
+
+            if (anchorSpec) {
+                if (childContext.widthModel.calculated && anchorSpec.right) {
+                    dimensions |= 1;
+                }
+                if (childContext.heightModel.calculated && anchorSpec.bottom) {
+                    dimensions |= 2;
+                }
+
+                if (dimensions == 3) { // if (both dimensions in play)
+                    break;
+                }
+            }
+        }
+
+        ownerContext.anchorDimensions = dimensions;
+
+        // Work around WebKit RightMargin bug. We're going to inline-block all the children
+        // only ONCE and remove it when we're done
+        if (!Ext.supports.RightMargin && !me.rightMarginCleanerFn) {
+            target = ownerContext.targetContext.el; // targetContext is added by superclass
+
+            me.rightMarginCleanerFn = Ext.Element.getRightMarginFixCleaner(target);
+            target.addCls(Ext.baseCSSPrefix + 'inline-children');
+        }
+
+        //<debug>
+        me.sanityCheck(ownerContext);
+        //</debug>
+    },
+
+    calculate: function (ownerContext) {
+        var me = this,
+            containerSize = me.getContainerSize(ownerContext);
+
+        if (ownerContext.anchorDimensions !== ownerContext.state.calculatedAnchors) {
+            me.calculateAnchors(ownerContext, containerSize);
+        }
+
+        if (ownerContext.hasDomProp('containerChildrenDone')) {
+            // Once the child layouts are done we can determine the content sizes...
+
+            if (!containerSize.gotAll) {
+                me.done = false;
+            }
+
+            me.calculateContentSize(ownerContext, ownerContext.anchorDimensions);
+
+            if (me.done) {
+                me.calculateOverflow(ownerContext, containerSize, ownerContext.anchorDimensions);
+                return;
+            }
+        }
+
+        me.done = false;
+    },
+
+    calculateAnchors: function (ownerContext, containerSize) {
+        var me = this,
+            childItems = ownerContext.childItems,
+            length = childItems.length,
+            gotHeight = containerSize.gotHeight,
+            gotWidth = containerSize.gotWidth,
+            ownerHeight = containerSize.height,
+            ownerWidth = containerSize.width,
+            state = ownerContext.state,
+            calculatedAnchors = (gotWidth ? 1 : 0) | (gotHeight ? 2 : 0),
+            anchorSpec, childContext, childMargins, height, i, width;
+
+        state.calculatedAnchors = (state.calculatedAnchors || 0) | calculatedAnchors;
+
+        for (i = 0; i < length; i++) {
+            childContext = childItems[i];
+            childMargins = childContext.getMarginInfo();
+            anchorSpec = childContext.target.anchorSpec;
+
+            // Check widthModel in case "defaults" has applied an anchor to a component
+            // that also has width (which must win). If we did not make this check in this
+            // way, we would attempt to calculate a width where it had been configured.
+            //
+            if (gotWidth && childContext.widthModel.calculated) {
+                width = anchorSpec.right(ownerWidth) - childMargins.width;
+                width = me.adjustWidthAnchor(width, childContext);
+
+                childContext.setWidth(width);
+            }
+
+            // Repeat for height
+            if (gotHeight && childContext.heightModel.calculated) {
+                height = anchorSpec.bottom(ownerHeight) - childMargins.height;
+                height = me.adjustHeightAnchor(height, childContext);
+
+                childContext.setHeight(height);
+            }
+        }
+    },
+
+    finishedLayout: function (ownerContext) {
+        var cleanerFn = this.rightMarginCleanerFn;
+
+        if (cleanerFn) {
+            delete this.rightMarginCleanerFn;
+            ownerContext.targetContext.el.removeCls(Ext.baseCSSPrefix + 'inline-children');
+            cleanerFn();
+        }
+    },
+
+    //<debug>
+    sanityCheck: function (ownerContext) {
+        var shrinkWrapWidth = ownerContext.widthModel.shrinkWrap,
+            shrinkWrapHeight = ownerContext.heightModel.shrinkWrap,
+            children = ownerContext.childItems,
+            anchorSpec, comp, childContext,
+            i, length;
+
+        for (i = 0, length = children.length; i < length; ++i) {
+            childContext = children[i];
+            comp = childContext.target;
+            anchorSpec = comp.anchorSpec;
+
+            if (anchorSpec) {
+                if (childContext.widthModel.calculated && anchorSpec.right) {
+                    if (shrinkWrapWidth) {
+                        Ext.log({
+                            level: 'warn',
+                            msg: 'Right anchor on '+comp.id+' in shrinkWrap width container'
+                        });
+                    }
+                }
+
+                if (childContext.heightModel.calculated && anchorSpec.bottom) {
+                    if (shrinkWrapHeight) {
+                        Ext.log({
+                            level: 'warn',
+                            msg: 'Bottom anchor on '+comp.id+' in shrinkWrap height container'
+                        });
+                    }
+                }
+            }
+        }
+    },
+    //</debug>
+
+    // private
+    anchorFactory: {
+        offset: function (delta) {
+            return function(v) {
+                return v + delta;
+            };
+        },
+        ratio: function (ratio) {
+            return function(v) {
+                return Math.floor(v * ratio);
+            };
+        },
+        standard: function (diff) {
+            return function(v) {
+                return v - diff;
+            };
+        }
+    },
+
+    parseAnchor: function(a, start, cstart) {
+        if (a && a != 'none') {
+            var factory = this.anchorFactory,
+                delta;
+
+            if (this.parseAnchorRE.test(a)) {
+                return factory.standard(cstart - start);
+            }    
+            if (a.indexOf('%') != -1) {
+                return factory.ratio(parseFloat(a.replace('%', '')) * 0.01);
+            }    
+            delta = parseInt(a, 10);
+            if (!isNaN(delta)) {
+                return factory.offset(delta);
+            }
+        }
+        return null;
+    },
+
+    // private
+    adjustWidthAnchor: function(value, childContext) {
+        return value;
+    },
+
+    // private
+    adjustHeightAnchor: function(value, childContext) {
+        return value;
+    },
+
+    configureItem: function(item) {
+        var me = this,
+            owner = me.owner,
+            anchor= item.anchor,
+            anchorsArray,
+            anchorWidth,
+            anchorHeight;
+
+        me.callParent(arguments);
+
+        if (!item.anchor && item.items && !Ext.isNumber(item.width) && !(Ext.isIE6 && Ext.isStrict)) {
+            item.anchor = anchor = me.defaultAnchor;
+        }
+
+        /**
+         * @cfg {Number/Object} anchorSize
+         * Defines the anchoring size of container.
+         * Either a number to define the width of the container or an object with `width` and `height` fields.
+         * @member Ext.container.Container
+         */ 
+        if (owner.anchorSize) {
+            if (typeof owner.anchorSize == 'number') {
+                anchorWidth = owner.anchorSize;
+            } else {
+                anchorWidth = owner.anchorSize.width;
+                anchorHeight = owner.anchorSize.height;
+            }
+        } else {
+            anchorWidth = owner.initialConfig.width;
+            anchorHeight = owner.initialConfig.height;
+        }
+
+        if (anchor) {
+            // cache all anchor values
+            anchorsArray = anchor.split(' ');
+            item.anchorSpec = {
+                right: me.parseAnchor(anchorsArray[0], item.initialConfig.width, anchorWidth),
+                bottom: me.parseAnchor(anchorsArray[1], item.initialConfig.height, anchorHeight)
+            };
+        }
+    },
+
+    sizePolicy: {
+        '': {
+            setsWidth: 0,
+            setsHeight: 0
+        },
+        b: {
+            setsWidth: 0,
+            setsHeight: 1
+        },
+        r: {
+            '': {
+                setsWidth: 1,
+                setsHeight: 0
+            },
+            b: {
+                setsWidth: 1,
+                setsHeight: 1
+
+            }
+        }
+    },
+
+    getItemSizePolicy: function (item) {
+        var anchorSpec = item.anchorSpec,
+            key = '',
+            policy = this.sizePolicy,
+            sizeModel;
+
+        if (anchorSpec) {
+            sizeModel = this.owner.getSizeModel();
+            if (anchorSpec.right && !sizeModel.width.shrinkWrap) {
+                policy = policy.r;
+            }
+            if (anchorSpec.bottom && !sizeModel.height.shrinkWrap) {
+                key = 'b';
+            }
+        }
+
+        return policy[key];
+    }
+});