extjs-rails 4.1.0.alpha1

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

@@ -0,0 +1,361 @@
+/**
+ * This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be
+ * visible at any given time.  This layout style is most commonly used for wizards, tab implementations, etc.
+ * This class is intended to be extended or created via the layout:'card' {@link Ext.container.Container#layout} config,
+ * and should generally not need to be created directly via the new keyword.
+ *
+ * The CardLayout's focal method is {@link #setActiveItem}.  Since only one panel is displayed at a time,
+ * the only way to move from one Component to the next is by calling setActiveItem, passing the next panel to display
+ * (or its id or index).  The layout itself does not provide a user interface for handling this navigation,
+ * so that functionality must be provided by the developer.
+ *
+ * To change the active card of a container, call the setActiveItem method of its layout:
+ *
+ *     Ext.create('Ext.panel.Panel', {
+ *         layout: 'card',
+ *         items: [
+ *             { html: 'Card 1' },
+ *             { html: 'Card 2' }
+ *         ],
+ *         renderTo: Ext.getBody()
+ *     });
+ *
+ *     p.getLayout().setActiveItem(1);
+ *
+ * In the following example, a simplistic wizard setup is demonstrated.  A button bar is added
+ * to the footer of the containing panel to provide navigation buttons.  The buttons will be handled by a
+ * common navigation routine.  Note that other uses of a CardLayout (like a tab control) would require a
+ * completely different implementation.  For serious implementations, a better approach would be to extend
+ * CardLayout to provide the custom functionality needed.
+ *
+ *     @example
+ *     var navigate = function(panel, direction){
+ *         // This routine could contain business logic required to manage the navigation steps.
+ *         // It would call setActiveItem as needed, manage navigation button state, handle any
+ *         // branching logic that might be required, handle alternate actions like cancellation
+ *         // or finalization, etc.  A complete wizard implementation could get pretty
+ *         // sophisticated depending on the complexity required, and should probably be
+ *         // done as a subclass of CardLayout in a real-world implementation.
+ *         var layout = panel.getLayout();
+ *         layout[direction]();
+ *         Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
+ *         Ext.getCmp('move-next').setDisabled(!layout.getNext());
+ *     };
+ *
+ *     Ext.create('Ext.panel.Panel', {
+ *         title: 'Example Wizard',
+ *         width: 300,
+ *         height: 200,
+ *         layout: 'card',
+ *         bodyStyle: 'padding:15px',
+ *         defaults: {
+ *             // applied to each contained panel
+ *             border: false
+ *         },
+ *         // just an example of one possible navigation scheme, using buttons
+ *         bbar: [
+ *             {
+ *                 id: 'move-prev',
+ *                 text: 'Back',
+ *                 handler: function(btn) {
+ *                     navigate(btn.up("panel"), "prev");
+ *                 },
+ *                 disabled: true
+ *             },
+ *             '->', // greedy spacer so that the buttons are aligned to each side
+ *             {
+ *                 id: 'move-next',
+ *                 text: 'Next',
+ *                 handler: function(btn) {
+ *                     navigate(btn.up("panel"), "next");
+ *                 }
+ *             }
+ *         ],
+ *         // the panels (or "cards") within the layout
+ *         items: [{
+ *             id: 'card-0',
+ *             html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
+ *         },{
+ *             id: 'card-1',
+ *             html: '<p>Step 2 of 3</p>'
+ *         },{
+ *             id: 'card-2',
+ *             html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
+ *         }],
+ *         renderTo: Ext.getBody()
+ *     });
+ */
+Ext.define('Ext.layout.container.Card', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.layout.container.Fit',
+
+    alternateClassName: 'Ext.layout.CardLayout',
+
+    alias: 'layout.card',
+
+    /* End Definitions */
+
+    type: 'card',
+
+    hideInactive: true,
+
+    /**
+     * @cfg {Boolean} deferredRender
+     * True to render each contained item at the time it becomes active, false to render all contained items
+     * as soon as the layout is rendered (defaults to false).  If there is a significant amount of content or
+     * a lot of heavy controls being rendered into panels that are not displayed by default, setting this to
+     * true might improve performance.
+     */
+    deferredRender : false,
+    
+    getRenderTree: function () {
+        var me = this,
+            activeItem = me.getActiveItem();
+
+        if (activeItem) {
+
+            // If they veto the activate, we have no active item
+            if (activeItem.hasListeners.beforeactivate && activeItem.fireEvent('beforeactivate', activeItem) === false) {
+ 
+                // We must null our activeItem reference, AND the one in our owning Container.
+                // Because upon layout invalidation, renderChildren will use this.getActiveItem which
+                // uses this.activeItem || this.owner.activeItem
+                activeItem = me.activeItem = me.owner.activeItem = null;
+            }
+            
+            // Item is to be the active one. Fire event after it is first layed out
+            else if (activeItem.hasListeners.activate) {
+                activeItem.on({
+                    boxready: function() {
+                        activeItem.fireEvent('activate', activeItem);
+                    },
+                    single: true
+                });
+            }
+
+            if (me.deferredRender) {
+                if (activeItem) {
+                    return me.getItemsRenderTree([activeItem]);
+                }
+            } else {
+                return me.callParent(arguments);
+            }
+        }
+    },
+
+    renderChildren: function () {
+        var me = this,
+            active = me.getActiveItem();
+            
+        if (!me.deferredRender) {
+            me.callParent();
+        } else if (active) {
+            // ensure the active item is configured for the layout
+            me.renderItems([active], me.getRenderTarget());
+        }
+    },
+
+    isValidParent : function(item, target, position) {
+        // Note: Card layout does not care about order within the target because only one is ever visible.
+        // We only care whether the item is a direct child of the target.
+        var itemEl = item.el ? item.el.dom : Ext.getDom(item);
+        return (itemEl && itemEl.parentNode === (target.dom || target)) || false;
+    },
+
+    /**
+     * Return the active (visible) component in the layout.
+     * @returns {Ext.Component}
+     */
+    getActiveItem: function() {
+        var me = this,
+            // Ensure the calculated result references a Component
+            result = me.parseActiveItem(me.activeItem || (me.owner && me.owner.activeItem));
+
+        // Sanitize the result in case the active item is no longer there.
+        if (result && me.owner.items.indexOf(result) != -1) {
+            me.activeItem = result;
+        } else {
+            me.activeItem = null;
+        }
+
+        return me.activeItem;
+    },
+
+    // @private
+    parseActiveItem: function(item) {
+        if (item && item.isComponent) {
+            return item;
+        } else if (typeof item == 'number' || item === undefined) {
+            return this.getLayoutItems()[item || 0];
+        } else {
+            return this.owner.getComponent(item);
+        }
+    },
+
+    // @private. Called before both dynamic render, and bulk render.
+    // Ensure that the active item starts visible, and inactive ones start invisible
+    configureItem: function(item) {
+        if (item === this.getActiveItem()) {
+            item.hidden = false;
+        } else {
+            item.hidden = true;
+        }
+        this.callParent(arguments);
+    },
+
+    onRemove: function(component) {
+        var me = this;
+        
+        if (component === me.activeItem) {
+            me.activeItem = null;
+        }
+    },
+
+    // @private
+    getAnimation: function(newCard, owner) {
+        var newAnim = (newCard || {}).cardSwitchAnimation;
+        if (newAnim === false) {
+            return false;
+        }
+        return newAnim || owner.cardSwitchAnimation;
+    },
+
+    /**
+     * Return the active (visible) component in the layout to the next card
+     * @returns {Ext.Component} The next component or false.
+     */
+    getNext: function() {
+        //NOTE: Removed the JSDoc for this function's arguments because it is not actually supported in 4.0. This 
+        //should come back in 4.1
+        var wrap = arguments[0],
+            items = this.getLayoutItems(),
+            index = Ext.Array.indexOf(items, this.activeItem);
+            
+        return items[index + 1] || (wrap ? items[0] : false);
+    },
+
+    /**
+     * Sets the active (visible) component in the layout to the next card
+     * @return {Ext.Component} the activated component or false when nothing activated.
+     */
+    next: function() {
+        //NOTE: Removed the JSDoc for this function's arguments because it is not actually supported in 4.0. This 
+        //should come back in 4.1
+        var anim = arguments[0], 
+            wrap = arguments[1];
+        return this.setActiveItem(this.getNext(wrap), anim);
+    },
+
+    /**
+     * Return the active (visible) component in the layout to the previous card
+     * @returns {Ext.Component} The previous component or false.
+     */
+    getPrev: function() {
+        //NOTE: Removed the JSDoc for this function's arguments because it is not actually supported in 4.0. This 
+        //should come back in 4.1
+        var wrap = arguments[0],
+            items = this.getLayoutItems(),
+            index = Ext.Array.indexOf(items, this.activeItem);
+            
+        return items[index - 1] || (wrap ? items[items.length - 1] : false);
+    },
+
+    /**
+     * Sets the active (visible) component in the layout to the previous card
+     * @return {Ext.Component} the activated component or false when nothing activated.
+     */
+    prev: function() {
+        //NOTE: Removed the JSDoc for this function's arguments because it is not actually supported in 4.0. This 
+        //should come back in 4.1
+        var anim = arguments[0], 
+            wrap = arguments[1];
+        return this.setActiveItem(this.getPrev(wrap), anim);
+    },
+
+    /**
+     * Makes the given card active.
+     *
+     *     var card1 = Ext.create('Ext.panel.Panel', {itemId: 'card-1'});
+     *     var card2 = Ext.create('Ext.panel.Panel', {itemId: 'card-2'});
+     *     var panel = Ext.create('Ext.panel.Panel', {
+     *         layout: 'card',
+     *         activeItem: 0,
+     *         items: [card1, card2]
+     *     });
+     *     // These are all equivalent
+     *     panel.getLayout().setActiveItem(card2);
+     *     panel.getLayout().setActiveItem('card-2');
+     *     panel.getLayout().setActiveItem(1);
+     *
+     * @param {Ext.Component/Number/String} newCard  The component, component {@link Ext.Component#id id},
+     * {@link Ext.Component#itemId itemId}, or index of component.
+     * @return {Ext.Component} the activated component or false when nothing activated.
+     * False is returned also when trying to activate an already active card.
+     */
+    setActiveItem: function(newCard) {
+        var me = this,
+            owner = me.owner,
+            oldCard = me.activeItem,
+            rendered = owner.rendered,
+            newIndex;
+
+        newCard = me.parseActiveItem(newCard);
+        newIndex = owner.items.indexOf(newCard);
+
+        // If the card is not a child of the owner, then add it.
+        // Without doing a layout!
+        if (newIndex == -1) {
+            newIndex = owner.items.items.length;
+            Ext.suspendLayouts();
+            newCard = owner.add(newCard);
+            Ext.resumeLayouts();
+        }
+
+        // Is this a valid, different card?
+        if (newCard && oldCard != newCard) {
+            // Fire the beforeactivate and beforedeactivate events on the cards
+            if (newCard.fireEvent('beforeactivate', newCard, oldCard) === false) {
+                return false;
+            }
+            if (oldCard && oldCard.fireEvent('beforedeactivate', oldCard, newCard) === false) {
+                return false;
+            }
+
+            if (rendered) {
+                Ext.suspendLayouts();
+
+                // If the card has not been rendered yet, now is the time to do so.
+                if (!newCard.rendered) {
+                    me.renderItem(newCard, me.getRenderTarget(), owner.items.length);
+                }
+
+                if (oldCard) {
+                    if (me.hideInactive) {
+                        oldCard.hide();
+                        oldCard.hiddenByLayout = true;
+                    }
+                    oldCard.fireEvent('deactivate', oldCard, newCard);
+                }
+                // Make sure the new card is shown
+                if (newCard.hidden) {
+                    newCard.show();
+                }
+
+                // Layout needs activeItem to be correct, so set it if the show has not been vetoed
+                if (!newCard.hidden) {
+                    me.activeItem = newCard;
+                }
+                Ext.resumeLayouts(true);
+            } else {
+                me.activeItem = newCard;
+            }
+
+            newCard.fireEvent('activate', newCard, oldCard);
+
+            return me.activeItem;
+        }
+        return false;
+    }
+});

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

@@ -0,0 +1,376 @@
+/**
+ * This layout implements the column arrangement for {@link Ext.form.CheckboxGroup} and {@link Ext.form.RadioGroup}.
+ * It groups the component's sub-items into columns based on the component's
+ * {@link Ext.form.CheckboxGroup#columns columns} and {@link Ext.form.CheckboxGroup#vertical} config properties.
+ */
+Ext.define('Ext.layout.container.CheckboxGroup', {
+    extend: 'Ext.layout.container.Container',
+    alias: ['layout.checkboxgroup'],
+
+    /**
+     * @cfg {Boolean} [autoFlex=true]
+     * By default,  CheckboxGroup allocates all available space to the configured columns meaning that
+     * column are evenly spaced across the container.
+     *
+     * To have each column only be wide enough to fit the container Checkboxes (or Radios), set `autoFlex` to `false`
+     */
+    autoFlex: true,
+
+    type: 'checkboxgroup',
+
+    childEls: [
+        'innerCt'
+    ],
+
+    renderTpl: [
+        '<table id="{ownerId}-innerCt" role="presentation" style="{tableStyle}"><tbody><tr>',
+            '<tpl for="columns">',
+                '<td class="{parent.colCls}" valign="top" style="{style}">',
+                    '{% this.renderColumn(out,parent,xindex-1) %}',
+                '</td>',
+            '</tpl>',
+        '</tr></tbody></table>'
+    ],
+
+    beginLayout: function(ownerContext) {
+        var me = this,
+            columns,
+            numCols, numChildren,
+            childItems,
+            i, width, cwidth,
+            totalFlex = 0, flexedCols = 0,
+            autoFlex = me.autoFlex,
+            currGen = me.owner.items.generation,
+            innerCtStyle = me.innerCt.dom.style;
+
+        me.callParent(arguments);
+        childItems = ownerContext.childItems;
+
+        // If the child items have changed since the last layout then we need to fixup
+        // the association of items to columns:
+        if (me.lastChildGeneration != currGen) {
+            me.lastChildGeneration = currGen;
+            me.fixColumns();
+        }
+
+        // fixColumns may have updated the element cache, no need to get the columnEls
+        // now...
+        columns = me.columnEls;
+
+        ownerContext.innerCtContext = ownerContext.getEl('innerCt', me);
+
+        // The columns config may be an array of widths. Any value < 1 is taken to be a fraction:
+        if (!ownerContext.widthModel.shrinkWrap) {
+            numCols = columns.length;
+
+            // If columns is an array of numeric widths
+            if (me.columnsArray) {
+
+                // first calculate total flex
+                for (i = 0; i < numCols; i++) {
+                    width = me.owner.columns[i];
+                    if (width < 1) {
+                        totalFlex += width;
+                        flexedCols++;
+                    }
+                }
+
+                // now apply widths
+                for (i = 0; i < numCols; i++) {
+                    width = me.owner.columns[i];
+                    if (width < 1) {
+                        cwidth = ((width / totalFlex) * 100) + '%';
+                    } else {
+                        cwidth = width + 'px';
+                    }
+                    columns[i].style.width = cwidth;
+                }
+            }
+
+            // Otherwise it's the *number* of columns, so distributed the widths evenly
+            else {
+                for (i = 0; i < numCols; i++) {
+                    // autoFlex: true will automatically calculate % widths
+                    // autoFlex: false allows the table to decide (shrinkWrap, in effect)
+                    // on a per-column basis
+                    cwidth = autoFlex
+                        ? (1 / numCols * 100) + '%'
+                        : '';
+                    columns[i].style.width = cwidth;
+                    flexedCols++;
+                }
+            }
+
+            // no flexed cols -- all widths are fixed
+            if (!flexedCols) {
+                innerCtStyle.tableLayout = 'fixed';
+                innerCtStyle.width = '';
+            // some flexed cols -- need to fix some
+            } else if (flexedCols < numCols) {
+                innerCtStyle.tableLayout = 'fixed';
+                innerCtStyle.width = '100%';
+            // let the table decide
+            } else {
+                innerCtStyle.tableLayout = 'auto';
+                // if autoFlex, fill available space, else compact down
+                if (autoFlex) {
+                    innerCtStyle.width = '100%';
+                } else {
+                    innerCtStyle.width = '';
+                }
+            }
+
+        } else {
+            innerCtStyle.tableLayout = 'auto';
+            innerCtStyle.width = '';
+        }
+    },
+
+    cacheElements: function () {
+        var me = this;
+
+        // Grab defined childEls
+        me.callParent();
+
+        // Grab columns TDs
+        me.columnEls = me.innerCt.query('td.' + me.owner.groupCls);
+
+        // we just rendered so the items are in the correct columns:
+        me.lastChildGeneration = me.owner.items.generation;
+    },
+
+    /*
+     * Just wait for the child items to all lay themselves out in the width we are configured
+     * to make available to them. Then we can measure our height.
+     */
+    calculate: function(ownerContext) {
+        var me = this,
+            targetContext, widthShrinkWrap, heightShrinkWrap, shrinkWrap, table, targetPadding;
+
+        // The columnEls are widthed using their own width attributes, we just need to wait
+        // for all children to have arranged themselves in that width, and then collect our height.
+        if (!ownerContext.getDomProp('containerChildrenDone')) {
+            me.done = false;
+        } else {
+            targetContext = ownerContext.innerCtContext;
+            widthShrinkWrap = ownerContext.widthModel.shrinkWrap;
+            heightShrinkWrap = ownerContext.heightModel.shrinkWrap;
+            shrinkWrap = heightShrinkWrap || widthShrinkWrap;
+            table = targetContext.el.dom;
+            targetPadding = shrinkWrap && targetContext.getPaddingInfo();
+
+            if (widthShrinkWrap) {
+                ownerContext.setContentWidth(table.offsetWidth + targetPadding.width, true);
+            }
+
+            if (heightShrinkWrap) {
+                ownerContext.setContentHeight(table.offsetHeight + targetPadding.height, true);
+            }
+        }
+    },
+
+    doRenderColumn: function (out, renderData, columnIndex) {
+        // Careful! This method is bolted on to the renderTpl so all we get for context is
+        // the renderData! The "this" pointer is the renderTpl instance!
+
+        var me = renderData.$layout,
+            owner = me.owner,
+            columnCount = renderData.columnCount,
+            items = owner.items.items,
+            itemCount = items.length,
+            item, itemIndex, rowCount, increment, tree;
+
+        // Example:
+        //      columnCount = 3
+        //      items.length = 10
+
+        if (owner.vertical) {
+            //        0   1   2
+            //      +---+---+---+
+            //    0 | 0 | 4 | 8 |
+            //      +---+---+---+
+            //    1 | 1 | 5 | 9 |
+            //      +---+---+---+
+            //    2 | 2 | 6 |   |
+            //      +---+---+---+
+            //    3 | 3 | 7 |   |
+            //      +---+---+---+
+
+            rowCount = Math.ceil(itemCount / columnCount); // = 4
+            itemIndex = columnIndex * rowCount;
+            itemCount = Math.min(itemCount, itemIndex + rowCount);
+            increment = 1;
+        } else {
+            //        0   1   2
+            //      +---+---+---+
+            //    0 | 0 | 1 | 2 |
+            //      +---+---+---+
+            //    1 | 3 | 4 | 5 |
+            //      +---+---+---+
+            //    2 | 6 | 7 | 8 |
+            //      +---+---+---+
+            //    3 | 9 |   |   |
+            //      +---+---+---+
+
+            itemIndex = columnIndex;
+            increment = columnCount;
+        }
+
+        for ( ; itemIndex < itemCount; itemIndex += increment) {
+            item = items[itemIndex];
+            me.configureItem(item);
+            tree = item.getRenderTree();
+            Ext.DomHelper.generateMarkup(tree, out);
+        }
+    },
+
+    // Distribute child items between column elements according to row first or
+    // column first order
+    fixColumns: function () {
+        var me = this,
+            owner = me.owner,
+            cfgCols = owner.columns,
+            columns = me.columnEls,
+            items = owner.items.items,
+            columnCount = columns.length,
+            itemCount = items.length,
+            columnIndex, i, rowCount, tr, td, newCount;
+
+        // if running in 'auto' columns mode, and the number of items has increased (add call)
+        // then we need to add a new td to the table
+        if ((!cfgCols || cfgCols == 'auto') && (itemCount > columnCount)) {
+
+            // add column td's for each new item added
+            newCount = itemCount - columnCount;
+            for (i = 0; i < newCount; i++) {
+                tr = me.innerCt.down('tr');
+                tr.createChild({
+                    cls: owner.groupCls,
+                    tag: 'td',
+                    vAlign: 'top'
+                });
+            }
+            me.cacheElements();
+            columns = me.columnEls;
+            columnCount = columns.length;
+        }
+
+        if (owner.vertical) {
+            columnIndex = -1; // first loop will increment this to 0
+            rowCount = Math.ceil(itemCount / columnCount);
+
+            for (i = 0; i < itemCount; ++i) {
+                if (i % rowCount === 0) {
+                    ++columnIndex;
+                }
+                columns[columnIndex].appendChild(items[i].el.dom);
+            }
+        } else {
+            for (i = 0; i < itemCount; ++i) {
+                columnIndex = i % columnCount;
+                columns[columnIndex].appendChild(items[i].el.dom);
+            }
+        }
+    },
+
+    /**
+     * Returns the number of columns in the checkbox group.
+     * @private
+     */
+    getColumnCount: function() {
+        var me = this,
+            owner = me.owner,
+            ownerColumns = owner.columns;
+
+        // Our columns config is an array of numeric widths.
+        // Calculate our total width
+        if (me.columnsArray) {
+            return ownerColumns.length;
+        }
+
+        if (Ext.isNumber(ownerColumns)) {
+            return ownerColumns;
+        }
+        return owner.items.length;
+    },
+
+    getItemSizePolicy: function (item) {
+        return this.autoSizePolicy;
+    },
+
+    getRenderData: function () {
+        var me = this,
+            data = me.callParent(),
+            owner = me.owner,
+            i, columns = me.getColumnCount(),
+            width, column, cwidth,
+            autoFlex = me.autoFlex,
+            totalFlex = 0, flexedCols = 0;
+
+        // calculate total flex
+        if (me.columnsArray) {
+            for (i=0; i < columns; i++) {
+                width = me.owner.columns[i];
+                if (width < 1) {
+                    totalFlex += width;
+                    flexedCols++;
+                }
+            }
+        }
+
+        data.colCls = owner.groupCls;
+        data.columnCount = columns;
+
+        data.columns = [];
+        for (i = 0; i < columns; i++) {
+            column = (data.columns[i] = {});
+
+            if (me.columnsArray) {
+                width = me.owner.columns[i];
+                if (width < 1) {
+                    cwidth = ((width / totalFlex) * 100) + '%';
+                } else {
+                    cwidth = width + 'px';
+                }
+                column.style = 'width:' + cwidth;
+            } else {
+                column.style = 'width:' + (1 / columns * 100) + '%';
+                flexedCols++;
+            }
+        }
+
+        // If the columns config was an array of column widths, allow table to auto width
+        data.tableStyle =
+            !flexedCols ? 'table-layout:fixed;' :
+            (flexedCols < columns) ? 'table-layout:fixed;width:100%' :
+            (autoFlex) ? 'table-layout:auto;width:100%' : 'table-layout:auto;';
+
+        return data;
+    },
+
+    // Overridden method from AbstractContainer.
+    getRenderTarget: function() {
+        return this.innerCt;
+    },
+
+    initLayout: function () {
+        var me = this,
+            owner = me.owner;
+
+        me.columnsArray = Ext.isArray(owner.columns);
+        me.evenColumns = Ext.isNumber(owner.columns);
+
+        me.callParent();
+    },
+
+    // Always valid. beginLayout ensures the encapsulating elements of all children are in the correct place
+    isValidParent: function() {
+        return true;
+    },
+
+    setupRenderTpl: function (renderTpl) {
+        this.callParent(arguments);
+
+        renderTpl.renderColumn = this.doRenderColumn;
+    }
+});