extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/button/Cycle.js

@@ -0,0 +1,215 @@
+/**
+ * A specialized SplitButton that contains a menu of {@link Ext.menu.CheckItem} elements. The button automatically
+ * cycles through each menu item on click, raising the button's {@link #change} event (or calling the button's
+ * {@link #changeHandler} function, if supplied) for the active menu item. Clicking on the arrow section of the
+ * button displays the dropdown menu just like a normal SplitButton.  Example usage:
+ *
+ *     @example
+ *     Ext.create('Ext.button.Cycle', {
+ *         showText: true,
+ *         prependText: 'View as ',
+ *         renderTo: Ext.getBody(),
+ *         menu: {
+ *             id: 'view-type-menu',
+ *             items: [{
+ *                 text: 'text only',
+ *                 iconCls: 'view-text',
+ *                 checked: true
+ *             },{
+ *                 text: 'HTML',
+ *                 iconCls: 'view-html'
+ *             }]
+ *         },
+ *         changeHandler: function(cycleBtn, activeItem) {
+ *             Ext.Msg.alert('Change View', activeItem.text);
+ *         }
+ *     });
+ */
+Ext.define('Ext.button.Cycle', {
+
+    /* Begin Definitions */
+
+    alias: 'widget.cycle',
+
+    extend: 'Ext.button.Split',
+    alternateClassName: 'Ext.CycleButton',
+
+    /* End Definitions */
+
+    /**
+     * @cfg {Object[]} items
+     * An array of {@link Ext.menu.CheckItem} **config** objects to be used when creating the button's menu items (e.g.,
+     * `{text:'Foo', iconCls:'foo-icon'}`)
+     * 
+     * @deprecated 4.0 Use the {@link #cfg-menu} config instead. All menu items will be created as
+     * {@link Ext.menu.CheckItem CheckItems}.
+     */
+    /**
+     * @cfg {Boolean} [showText=false]
+     * True to display the active item's text as the button text. The Button will show its
+     * configured {@link #text} if this config is omitted.
+     */
+    /**
+     * @cfg {String} [prependText='']
+     * A static string to prepend before the active item's text when displayed as the button's text (only applies when
+     * showText = true).
+     */
+    /**
+     * @cfg {Function} changeHandler
+     * A callback function that will be invoked each time the active menu item in the button's menu has changed. If this
+     * callback is not supplied, the SplitButton will instead fire the {@link #change} event on active item change. The
+     * changeHandler function will be called with the following argument list: (SplitButton this, Ext.menu.CheckItem
+     * item)
+     */
+    /**
+     * @cfg {String} forceIcon
+     * A css class which sets an image to be used as the static icon for this button. This icon will always be displayed
+     * regardless of which item is selected in the dropdown list. This overrides the default behavior of changing the
+     * button's icon to match the selected item's icon on change.
+     */
+    /**
+     * @property {Ext.menu.Menu} menu
+     * The {@link Ext.menu.Menu Menu} object used to display the {@link Ext.menu.CheckItem CheckItems} representing the
+     * available choices.
+     */
+
+    // private
+    getButtonText: function(item) {
+        var me = this,
+            text = '';
+
+        if (item && me.showText === true) {
+            if (me.prependText) {
+                text += me.prependText;
+            }
+            text += item.text;
+            return text;
+        }
+        return me.text;
+    },
+
+    /**
+     * Sets the button's active menu item.
+     * @param {Ext.menu.CheckItem} item The item to activate
+     * @param {Boolean} [suppressEvent=false] True to prevent the button's change event from firing.
+     */
+    setActiveItem: function(item, suppressEvent) {
+        var me = this;
+
+        if (!Ext.isObject(item)) {
+            item = me.menu.getComponent(item);
+        }
+        if (item) {
+            if (!me.rendered) {
+                me.text = me.getButtonText(item);
+                me.iconCls = item.iconCls;
+            } else {
+                me.setText(me.getButtonText(item));
+                me.setIconCls(item.iconCls);
+            }
+            me.activeItem = item;
+            if (!item.checked) {
+                item.setChecked(true, false);
+            }
+            if (me.forceIcon) {
+                me.setIconCls(me.forceIcon);
+            }
+            if (!suppressEvent) {
+                me.fireEvent('change', me, item);
+            }
+        }
+    },
+
+    /**
+     * Gets the currently active menu item.
+     * @return {Ext.menu.CheckItem} The active item
+     */
+    getActiveItem: function() {
+        return this.activeItem;
+    },
+
+    // private
+    initComponent: function() {
+        var me      = this,
+            checked = 0,
+            items,
+            i, iLen, item;
+
+        me.addEvents(
+            /**
+             * @event change
+             * Fires after the button's active menu item has changed. Note that if a {@link #changeHandler} function is
+             * set on this CycleButton, it will be called instead on active item change and this change event will not
+             * be fired.
+             * @param {Ext.button.Cycle} this
+             * @param {Ext.menu.CheckItem} item The menu item that was selected
+             */
+            "change"
+        );
+
+        if (me.changeHandler) {
+            me.on('change', me.changeHandler, me.scope || me);
+            delete me.changeHandler;
+        }
+
+        // Allow them to specify a menu config which is a standard Button config.
+        // Remove direct use of "items" in 5.0.
+        items = (me.menu.items || []).concat(me.items || []);
+        me.menu = Ext.applyIf({
+            cls: Ext.baseCSSPrefix + 'cycle-menu',
+            items: []
+        }, me.menu);
+
+        iLen = items.length;
+
+        // Convert all items to CheckItems
+        for (i = 0; i < iLen; i++) {
+            item = items[i];
+
+            item = Ext.applyIf({
+                group        : me.id,
+                itemIndex    : i,
+                checkHandler : me.checkHandler,
+                scope        : me,
+                checked      : item.checked || false
+            }, item);
+
+            me.menu.items.push(item);
+
+            if (item.checked) {
+                checked = i;
+            }
+        }
+
+        me.itemCount = me.menu.items.length;
+        me.callParent(arguments);
+        me.on('click', me.toggleSelected, me);
+        me.setActiveItem(checked, me);
+
+        // If configured with a fixed width, the cycling will center a different child item's text each click. Prevent this.
+        if (me.width && me.showText) {
+            me.addCls(Ext.baseCSSPrefix + 'cycle-fixed-width');
+        }
+    },
+
+    // private
+    checkHandler: function(item, pressed) {
+        if (pressed) {
+            this.setActiveItem(item);
+        }
+    },
+
+    /**
+     * This is normally called internally on button click, but can be called externally to advance the button's active
+     * item programmatically to the next one in the menu. If the current item is the last one in the menu the active
+     * item will be set to the first item in the menu.
+     */
+    toggleSelected: function() {
+        var me = this,
+            m = me.menu,
+            checkItem;
+
+        checkItem = me.activeItem.next(':not([disabled])') || m.items.getAt(0);
+        checkItem.setChecked(true);
+    }
+});

data/app/assets/javascripts/extjs-rails/src/button/Split.js

@@ -0,0 +1,99 @@
+/**
+ * A split button that provides a built-in dropdown arrow that can fire an event separately from the default click event
+ * of the button. Typically this would be used to display a dropdown menu that provides additional options to the
+ * primary button action, but any custom handler can provide the arrowclick implementation.  Example usage:
+ *
+ *     @example
+ *     // display a dropdown menu:
+ *     Ext.create('Ext.button.Split', {
+ *         renderTo: Ext.getBody(),
+ *         text: 'Options',
+ *         // handle a click on the button itself
+ *         handler: function() {
+ *             alert("The button was clicked");
+ *         },
+ *         menu: new Ext.menu.Menu({
+ *             items: [
+ *                 // these will render as dropdown menu items when the arrow is clicked:
+ *                 {text: 'Item 1', handler: function(){ alert("Item 1 clicked"); }},
+ *                 {text: 'Item 2', handler: function(){ alert("Item 2 clicked"); }}
+ *             ]
+ *         })
+ *     });
+ *
+ * Instead of showing a menu, you can provide any type of custom functionality you want when the dropdown
+ * arrow is clicked:
+ *
+ *     Ext.create('Ext.button.Split', {
+ *         renderTo: 'button-ct',
+ *         text: 'Options',
+ *         handler: optionsHandler,
+ *         arrowHandler: myCustomHandler
+ *     });
+ *
+ */
+Ext.define('Ext.button.Split', {
+
+    /* Begin Definitions */
+    alias: 'widget.splitbutton',
+
+    extend: 'Ext.button.Button',
+    alternateClassName: 'Ext.SplitButton',
+    /* End Definitions */
+    
+    /**
+     * @cfg {Function} arrowHandler
+     * A function called when the arrow button is clicked (can be used instead of click event)
+     * @cfg {Ext.button.Split} arrowHandler.this
+     * @cfg {Event} arrowHandler.e The click event
+     */
+    /**
+     * @cfg {String} arrowTooltip
+     * The title attribute of the arrow
+     */
+
+    // private
+    arrowCls      : 'split',
+    split         : true,
+
+    // private
+    initComponent : function(){
+        this.callParent();
+        /**
+         * @event arrowclick
+         * Fires when this button's arrow is clicked.
+         * @param {Ext.button.Split} this
+         * @param {Event} e The click event
+         */
+        this.addEvents("arrowclick");
+    },
+
+    /**
+     * Sets this button's arrow click handler.
+     * @param {Function} handler The function to call when the arrow is clicked
+     * @param {Object} scope (optional) Scope for the function passed above
+     */
+    setArrowHandler : function(handler, scope){
+        this.arrowHandler = handler;
+        this.scope = scope;
+    },
+
+    // private
+    onClick : function(e, t) {
+        var me = this;
+        
+        e.preventDefault();
+        if (!me.disabled) {
+            if (me.overMenuTrigger) {
+                me.maybeShowMenu();
+                me.fireEvent("arrowclick", me, e);
+                if (me.arrowHandler) {
+                    me.arrowHandler.call(me.scope || me, me, e);
+                }
+            } else {
+                me.doToggle();
+                me.fireHandler(e);
+            }
+        }
+    }
+});

data/app/assets/javascripts/extjs-rails/src/chart/Callout.js

@@ -0,0 +1,140 @@
+/**
+ * @class Ext.chart.Callout
+ * A mixin providing callout functionality for Ext.chart.series.Series.
+ */
+Ext.define('Ext.chart.Callout', {
+
+    /* Begin Definitions */
+
+    /* End Definitions */
+
+    constructor: function(config) {
+        if (config.callouts) {
+            config.callouts.styles = Ext.applyIf(config.callouts.styles || {}, {
+                color: "#000",
+                font: "11px Helvetica, sans-serif"
+            });
+            this.callouts = Ext.apply(this.callouts || {}, config.callouts);
+            this.calloutsArray = [];
+        }
+    },
+
+    renderCallouts: function() {
+        if (!this.callouts) {
+            return;
+        }
+
+        var me = this,
+            items = me.items,
+            animate = me.chart.animate,
+            config = me.callouts,
+            styles = config.styles,
+            group = me.calloutsArray,
+            store = me.chart.store,
+            len = store.getCount(),
+            ratio = items.length / len,
+            previouslyPlacedCallouts = [],
+            i,
+            count,
+            j,
+            p,
+            item,
+            label,
+            storeItem,
+            display;
+            
+        for (i = 0, count = 0; i < len; i++) {
+            for (j = 0; j < ratio; j++) {
+                item = items[count];
+                label = group[count];
+                storeItem = store.getAt(i);
+                
+                display = config.filter(storeItem);
+                
+                if (!display && !label) {
+                    count++;
+                    continue;               
+                }
+                
+                if (!label) {
+                    group[count] = label = me.onCreateCallout(storeItem, item, i, display, j, count);
+                }
+                for (p in label) {
+                    if (label[p] && label[p].setAttributes) {
+                        label[p].setAttributes(styles, true);
+                    }
+                }
+                if (!display) {
+                    for (p in label) {
+                        if (label[p]) {
+                            if (label[p].setAttributes) {
+                                label[p].setAttributes({
+                                    hidden: true
+                                }, true);
+                            } else if(label[p].setVisible) {
+                                label[p].setVisible(false);
+                            }
+                        }
+                    }
+                }
+                config.renderer(label, storeItem);
+                me.onPlaceCallout(label, storeItem, item, i, display, animate,
+                                  j, count, previouslyPlacedCallouts);
+                previouslyPlacedCallouts.push(label);
+                count++;
+            }
+        }
+        this.hideCallouts(count);
+    },
+
+    onCreateCallout: function(storeItem, item, i, display) {
+        var me = this,
+            group = me.calloutsGroup,
+            config = me.callouts,
+            styles = config.styles,
+            width = styles.width,
+            height = styles.height,
+            chart = me.chart,
+            surface = chart.surface,
+            calloutObj = {
+                //label: false,
+                //box: false,
+                lines: false
+            };
+
+        calloutObj.lines = surface.add(Ext.apply({},
+        {
+            type: 'path',
+            path: 'M0,0',
+            stroke: me.getLegendColor() || '#555'
+        },
+        styles));
+
+        if (config.items) {
+            calloutObj.panel = new Ext.Panel({
+                style: "position: absolute;",    
+                width: width,
+                height: height,
+                items: config.items,
+                renderTo: chart.el
+            });
+        }
+
+        return calloutObj;
+    },
+
+    hideCallouts: function(index) {
+        var calloutsArray = this.calloutsArray,
+            len = calloutsArray.length,
+            co,
+            p;
+        while (len-->index) {
+            co = calloutsArray[len];
+            for (p in co) {
+                if (co[p]) {
+                    co[p].hide(true);
+                }
+            }
+        }
+    }
+});