extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/menu/Separator.js

@@ -0,0 +1,126 @@
+/**
+ * Adds a separator bar to a menu, used to divide logical groups of menu items. Generally you will
+ * add one of these by using "-" in your call to add() or in your items config rather than creating one directly.
+ *
+ *     @example
+ *     Ext.create('Ext.menu.Menu', {
+ *         width: 100,
+ *         height: 100,
+ *         floating: false,  // usually you want this set to True (default)
+ *         renderTo: Ext.getBody(),  // usually rendered by it's containing component
+ *         items: [{
+ *             text: 'icon item',
+ *             iconCls: 'add16'
+ *         },{
+ *             xtype: 'menuseparator'
+ *         },{
+ *            text: 'separator above'
+ *         },{
+ *            text: 'regular item'
+ *         }]
+ *     });
+ */
+Ext.define('Ext.menu.Separator', {
+    extend: 'Ext.menu.Item',
+    alias: 'widget.menuseparator',
+
+    /**
+     * @cfg {String} activeCls
+     * @private
+     */
+
+    /**
+     * @cfg {Boolean} canActivate
+     * @private
+     */
+    canActivate: false,
+
+    /**
+     * @cfg {Boolean} clickHideDelay
+     * @private
+     */
+
+    /**
+     * @cfg {Boolean} destroyMenu
+     * @private
+     */
+
+    /**
+     * @cfg {Boolean} disabledCls
+     * @private
+     */
+
+    focusable: false,
+
+    /**
+     * @cfg {String} href
+     * @private
+     */
+
+    /**
+     * @cfg {String} hrefTarget
+     * @private
+     */
+
+    /**
+     * @cfg {Boolean} hideOnClick
+     * @private
+     */
+    hideOnClick: false,
+
+    /**
+     * @cfg {String} icon
+     * @private
+     */
+
+    /**
+     * @cfg {String} iconCls
+     * @private
+     */
+
+    /**
+     * @cfg {Object} menu
+     * @private
+     */
+
+    /**
+     * @cfg {String} menuAlign
+     * @private
+     */
+
+    /**
+     * @cfg {Number} menuExpandDelay
+     * @private
+     */
+
+    /**
+     * @cfg {Number} menuHideDelay
+     * @private
+     */
+
+    /**
+     * @cfg {Boolean} plain
+     * @private
+     */
+    plain: true,
+
+    /**
+     * @cfg {String} separatorCls
+     * The CSS class used by the separator item to show the incised line.
+     */
+    separatorCls: Ext.baseCSSPrefix + 'menu-item-separator',
+
+    /**
+     * @cfg {String} text
+     * @private
+     */
+    text: ' ',
+
+    beforeRender: function(ct, pos) {
+        var me = this;
+
+        me.callParent();
+
+        me.addCls(me.separatorCls);
+    }
+});

data/app/assets/javascripts/extjs-rails/src/panel/AbstractPanel.js

@@ -0,0 +1,323 @@
+/**
+ * @class Ext.panel.AbstractPanel
+ * @private
+ *
+ * A base class which provides methods common to Panel classes across the Sencha product range.
+ *
+ * Please refer to sub class's documentation
+ */
+Ext.define('Ext.panel.AbstractPanel', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.container.Container',
+
+    mixins: {
+        docking: 'Ext.container.DockingContainer'
+    },
+
+    requires: ['Ext.util.MixedCollection', 'Ext.Element', 'Ext.toolbar.Toolbar'],
+
+    /* End Definitions */
+
+    /**
+     * @cfg {String} [baseCls=x-panel]
+     * The base CSS class to apply to this panel's element.
+     */
+    baseCls : Ext.baseCSSPrefix + 'panel',
+
+    /**
+     * @cfg {Number/String} bodyPadding
+     * A shortcut for setting a padding style on the body element. The value can either be
+     * a number to be applied to all sides, or a normal css string describing padding.
+     * Defaults to <code>undefined</code>.
+     */
+
+    /**
+     * @cfg {Boolean} bodyBorder
+     * A shortcut to add or remove the border on the body of a panel. This only applies to a panel which has the {@link #frame} configuration set to `true`.
+     * Defaults to <code>undefined</code>.
+     */
+
+    /**
+     * @cfg {String/Object/Function} bodyStyle
+     * Custom CSS styles to be applied to the panel's body element, which can be supplied as a valid CSS style string,
+     * an object containing style property name/value pairs or a function that returns such a string or object.
+     * For example, these two formats are interpreted to be equivalent:<pre><code>
+bodyStyle: 'background:#ffc; padding:10px;'
+
+bodyStyle: {
+    background: '#ffc',
+    padding: '10px'
+}
+     * </code></pre>
+     */
+
+    /**
+     * @cfg {String/String[]} bodyCls
+     * A CSS class, space-delimited string of classes, or array of classes to be applied to the panel's body element.
+     * The following examples are all valid:<pre><code>
+bodyCls: 'foo'
+bodyCls: 'foo bar'
+bodyCls: ['foo', 'bar']
+     * </code></pre>
+     */
+
+    /**
+     * @property {Boolean} isPanel
+     * `true` in this class to identify an object as an instantiated Panel, or subclass thereof.
+     */
+    isPanel: true,
+
+    componentLayout: 'dock',
+
+    childEls: [
+        'body'
+    ],
+
+    renderTpl: [
+        // If this Panel is framed, the framing template renders the docked items round the frame
+        '{% this.renderDockedItems(out,values,0); %}',
+        // This empty div solves an IE6/7/Quirks problem where the margin-top on the bodyEl
+        // is ignored. Best we can figure, this is triggered by the previousSibling being
+        // position absolute (a docked item). The goal is to use margins to position the
+        // bodyEl rather than left/top since that allows us to avoid writing a height on the
+        // panel and the body. This in turn allows CSS height to expand or contract the
+        // panel during things like portlet dragging where we want to avoid running a ton
+        // of layouts during the drag operation.
+        (Ext.isIE6 || Ext.isIE7 || Ext.isIEQuirks) ? '<div></div>' : '',
+        '<div id="{id}-body" class="{baseCls}-body<tpl if="bodyCls"> {bodyCls}</tpl>',
+            ' {baseCls}-body-{ui}<tpl if="uiCls">',
+                '<tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl>',
+            '</tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>',
+            '{%this.renderContainer(out,values);%}',
+        '</div>',
+        '{% this.renderDockedItems(out,values,1); %}'
+    ],
+
+    bodyPosProps: {
+        x: 'x',
+        y: 'y'
+    },
+
+    // TODO: Move code examples into product-specific files. The code snippet below is Touch only.
+    /**
+     * @cfg {Object/Object[]} dockedItems
+     * A component or series of components to be added as docked items to this panel.
+     * The docked items can be docked to either the top, right, left or bottom of a panel.
+     * This is typically used for things like toolbars or tab bars:
+     * <pre><code>
+var panel = new Ext.panel.Panel({
+    fullscreen: true,
+    dockedItems: [{
+        xtype: 'toolbar',
+        dock: 'top',
+        items: [{
+            text: 'Docked to the top'
+        }]
+    }]
+});</code></pre>
+     */
+
+    border: true,
+
+    initComponent : function() {
+        var me = this;
+
+        me.addEvents(
+            /**
+             * @event bodyresize
+             * Fires after the Panel has been resized.
+             * @param {Ext.panel.Panel} p the Panel which has been resized.
+             * @param {Number} width The Panel body's new width.
+             * @param {Number} height The Panel body's new height.
+             */
+            'bodyresize'
+            // // inherited
+            // 'activate',
+            // // inherited
+            // 'deactivate'
+        );
+
+        //!frame
+        //!border
+
+        if (me.frame && me.border && me.bodyBorder === undefined) {
+            me.bodyBorder = false;
+        }
+        if (me.frame && me.border && (me.bodyBorder === false || me.bodyBorder === 0)) {
+            me.manageBodyBorders = true;
+        }
+
+        me.callParent();
+    },
+
+    beforeDestroy: function(){
+        this.destroyDockedItems();
+        this.callParent();
+    },
+
+    // @private
+    initItems : function() {
+        this.callParent();
+        this.initDockingItems();
+    },
+
+    /**
+     * Initialized the renderData to be used when rendering the renderTpl.
+     * @return {Object} Object with keys and values that are going to be applied to the renderTpl
+     * @private
+     */
+    initRenderData: function() {
+        var me = this,
+            data = me.callParent();
+
+        me.initBodyStyles();
+        me.protoBody.writeTo(data);
+        delete me.protoBody;
+
+        return data;
+    },
+
+    /**
+     * Attempts a default component lookup (see {@link Ext.container.Container#getComponent}). If the component is not found in the normal
+     * items, the dockedItems are searched and the matched component (if any) returned (see {@link #getDockedComponent}). Note that docked
+     * items will only be matched by component id or itemId -- if you pass a numeric index only non-docked child components will be searched.
+     * @param {String/Number} comp The component id, itemId or position to find
+     * @return {Ext.Component} The component (if found)
+     */
+    getComponent: function(comp) {
+        var component = this.callParent(arguments);
+        if (component === undefined && !Ext.isNumber(comp)) {
+            // If the arg is a numeric index skip docked items
+            component = this.getDockedComponent(comp);
+        }
+        return component;
+    },
+
+    getProtoBody: function () {
+        var me = this,
+            body = me.protoBody;
+
+        if (!body) {
+            me.protoBody = body = new Ext.util.ProtoElement({
+                cls: me.bodyCls,
+                style: me.bodyStyle,
+                clsProp: 'bodyCls',
+                styleProp: 'bodyStyle',
+                styleIsText: true
+            });
+        }
+
+        return body;
+    },
+
+    /**
+     * Parses the {@link #bodyStyle} config if available to create a style string that will be applied to the body element.
+     * This also includes {@link #bodyPadding} and {@link #bodyBorder} if available.
+     * @return {String} A CSS style string with body styles, padding and border.
+     * @private
+     */
+    initBodyStyles: function() {
+        var me = this,
+            body = me.getProtoBody(),
+            Element = Ext.Element;
+
+        if (me.bodyPadding !== undefined) {
+            body.setStyle('padding', Element.unitizeBox((me.bodyPadding === true) ? 5 : me.bodyPadding));
+        }
+        if (me.frame && me.bodyBorder) {
+            if (!Ext.isNumber(me.bodyBorder)) {
+                me.bodyBorder = 1;
+            }
+            body.setStyle('border-width', Element.unitizeBox(me.bodyBorder));
+        }
+    },
+
+    getCollapsedDockedItems: function () {
+        return [ this.getReExpander() ];
+    },
+
+    /**
+     * Sets the body style according to the passed parameters.
+     * @param {Mixed} style A full style specification string, or object, or the name of a style property to set.
+     * @param {String} value If the first param was a style property name, the style property value.
+     */
+    setBodyStyle: function(style, value) {
+        var me = this,
+            body = me.rendered ? me.body : me.getProtoBody();
+
+        if (Ext.isFunction(style)) {
+            style = style();
+        }
+        if (arguments.length == 1 && Ext.isString(style)) {
+            style = Ext.Element.parseStyles(style);
+        }
+
+        body.setStyle.apply(me.body, arguments);
+    },
+
+    addBodyCls: function(cls) {
+        var me = this,
+            body = me.rendered ? me.body : me.getProtoBody();
+
+        body.addCls(cls);
+    },
+
+    removeBodyCls: function(cls) {
+        var me = this,
+            body = me.rendered ? me.body : me.getProtoBody();
+
+        body.removeCls(cls);
+    },
+
+    // inherit docs
+    addUIClsToElement: function(cls) {
+        var me = this,
+            result = me.callParent(arguments);
+
+        me.addBodyCls([Ext.baseCSSPrefix + cls, me.baseCls + '-body-' + cls, me.baseCls + '-body-' + me.ui + '-' + cls]);
+        return result;
+    },
+
+    // inherit docs
+    removeUIClsFromElement: function(cls) {
+        var me = this,
+            result = me.callParent(arguments);
+
+        me.removeBodyCls([Ext.baseCSSPrefix + cls, me.baseCls + '-body-' + cls, me.baseCls + '-body-' + me.ui + '-' + cls]);
+        return result;
+    },
+
+    // inherit docs
+    addUIToElement: function() {
+        var me = this;
+
+        me.callParent(arguments);
+        me.addBodyCls(me.baseCls + '-body-' + me.ui);
+    },
+
+    // inherit docs
+    removeUIFromElement: function() {
+        var me = this;
+
+        me.callParent(arguments);
+        me.removeBodyCls(me.baseCls + '-body-' + me.ui);
+    },
+
+    // @private
+    getTargetEl : function() {
+        return this.body;
+    },
+
+    getRefItems: function(deep) {
+        var items = this.callParent(arguments);
+
+        return this.getDockingRefItems(deep, items);
+    },
+
+    setupRenderTpl: function (renderTpl) {
+        this.callParent(arguments);
+        this.setupDockingRenderTpl(renderTpl);
+    }
+});

data/app/assets/javascripts/extjs-rails/src/panel/DD.js

@@ -0,0 +1,99 @@
+/**
+ * DD implementation for Panels.
+ * @private
+ */
+Ext.define('Ext.panel.DD', {
+    extend: 'Ext.dd.DragSource',
+    requires: ['Ext.panel.Proxy'],
+
+    constructor : function(panel, cfg){
+        var me = this;
+        
+        me.panel = panel;
+        me.dragData = {panel: panel};
+        me.panelProxy = new Ext.panel.Proxy(panel, cfg);
+        me.proxy = me.panelProxy.proxy;
+
+        me.callParent([panel.el, cfg]);
+        me.setupEl(panel);
+    },
+    
+    setupEl: function(panel){
+        var me = this,
+            header = panel.header,
+            el = panel.body;
+            
+        if (header) {
+            me.setHandleElId(header.id);
+            el = header.el;
+        }
+        if (el) {
+            el.setStyle('cursor', 'move');
+            me.scroll = false;
+        } else {
+            // boxready fires after first layout, so we'll definitely be rendered
+            panel.on('boxready', me.setupEl, me, {single: true});
+        }
+    },
+
+    showFrame: Ext.emptyFn,
+    startDrag: Ext.emptyFn,
+    
+    b4StartDrag: function(x, y) {
+        this.panelProxy.show();
+    },
+    
+    b4MouseDown: function(e) {
+        var x = e.getPageX(),
+            y = e.getPageY();
+            
+        this.autoOffset(x, y);
+    },
+    
+    onInitDrag : function(x, y){
+        this.onStartDrag(x, y);
+        return true;
+    },
+    
+    createFrame : Ext.emptyFn,
+    
+    getDragEl : function(e){
+        return this.panelProxy.ghost.el.dom;
+    },
+    
+    endDrag : function(e){
+        this.panelProxy.hide();
+        this.panel.saveState();
+    },
+
+    autoOffset : function(x, y) {
+        x -= this.startPageX;
+        y -= this.startPageY;
+        this.setDelta(x, y);
+    },
+    
+    // Override this, we don't want to repair on an "invalid" drop, the panel
+    // should main it's position
+    onInvalidDrop: function(target, e, id) {
+        var me = this;
+        
+        me.beforeInvalidDrop(target, e, id);
+        if (me.cachedTarget) {
+            if(me.cachedTarget.isNotifyTarget){
+                me.cachedTarget.notifyOut(me, e, me.dragData);
+            }
+            me.cacheTarget = null;
+        }
+
+        if (me.afterInvalidDrop) {
+            /**
+             * An empty function by default, but provided so that you can perform a custom action
+             * after an invalid drop has occurred by providing an implementation.
+             * @param {Event} e The event object
+             * @param {String} id The id of the dropped element
+             * @method afterInvalidDrop
+             */
+            me.afterInvalidDrop(e, id);
+        }
+    }
+});