extjs-rails 4.1.0.alpha1

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

@@ -0,0 +1,143 @@
+/**
+ * Provides a container for arranging a group of related Buttons in a tabular manner.
+ *
+ *     @example
+ *     Ext.create('Ext.panel.Panel', {
+ *         title: 'Panel with ButtonGroup',
+ *         width: 300,
+ *         height:200,
+ *         renderTo: document.body,
+ *         bodyPadding: 10,
+ *         html: 'HTML Panel Content',
+ *         tbar: [{
+ *             xtype: 'buttongroup',
+ *             columns: 3,
+ *             title: 'Clipboard',
+ *             items: [{
+ *                 text: 'Paste',
+ *                 scale: 'large',
+ *                 rowspan: 3,
+ *                 iconCls: 'add',
+ *                 iconAlign: 'top',
+ *                 cls: 'btn-as-arrow'
+ *             },{
+ *                 xtype:'splitbutton',
+ *                 text: 'Menu Button',
+ *                 scale: 'large',
+ *                 rowspan: 3,
+ *                 iconCls: 'add',
+ *                 iconAlign: 'top',
+ *                 arrowAlign:'bottom',
+ *                 menu: [{ text: 'Menu Item 1' }]
+ *             },{
+ *                 xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
+ *             },{
+ *                 text: 'Copy', iconCls: 'add16'
+ *             },{
+ *                 text: 'Format', iconCls: 'add16'
+ *             }]
+ *         }]
+ *     });
+ *
+ */
+Ext.define('Ext.container.ButtonGroup', {
+    extend: 'Ext.panel.Panel',
+    alias: 'widget.buttongroup',
+    alternateClassName: 'Ext.ButtonGroup',
+
+    requires: ['Ext.layout.container.Table'],
+
+    /**
+     * @cfg {Number} columns
+     * The `columns` configuration property passed to the {@link #layout configured layout manager}.
+     * See {@link Ext.layout.container.Table#columns}.
+     */
+
+    /**
+     * @cfg {String} baseCls
+     * @inheritdoc
+     */
+    baseCls: Ext.baseCSSPrefix + 'btn-group',
+
+    /**
+     * @cfg {Object} layout
+     * @inheritdoc
+     */
+    layout: {
+        type: 'table'
+    },
+
+    defaultType: 'button',
+
+    /**
+     * @cfg {Boolean} frame
+     * @inheritdoc
+     */
+    frame: true,
+
+    frameHeader: false,
+
+    internalDefaults: {removeMode: 'container', hideParent: true},
+
+    titleAlign: 'center',
+
+    initComponent : function() {
+        // Copy the component's columns config to the layout if specified
+        var me = this,
+            cols = me.columns;
+
+        me.noTitleCls = me.baseCls + '-notitle';
+        if (cols) {
+            me.layout = Ext.apply({}, {columns: cols}, me.layout);
+        }
+
+        if (!me.title) {
+            me.addCls(me.noTitleCls);
+        }
+        me.callParent(arguments);
+    },
+
+    // private
+    onBeforeAdd: function(component) {
+        if (component.isButton) {
+            component.ui = component.ui + '-toolbar';
+        }
+        this.callParent(arguments);
+    },
+
+    //private
+    applyDefaults: function(c) {
+        if (!Ext.isString(c)) {
+            c = this.callParent(arguments);
+            var d = this.internalDefaults;
+            if (c.events) {
+                Ext.applyIf(c.initialConfig, d);
+                Ext.apply(c, d);
+            } else {
+                Ext.applyIf(c, d);
+            }
+        }
+        return c;
+    }
+
+    /**
+     * @cfg {Array} tools
+     * @private
+     */
+    /**
+     * @cfg {Boolean} collapsible
+     * @private
+     */
+    /**
+     * @cfg {Boolean} collapseMode
+     * @private
+     */
+    /**
+     * @cfg {Boolean} animCollapse
+     * @private
+     */
+    /**
+     * @cfg {Boolean} closable
+     * @private
+     */
+});

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

@@ -0,0 +1,212 @@
+/**
+ * Base class for any Ext.Component that may contain other Components. Containers handle the basic behavior of
+ * containing items, namely adding, inserting and removing items.
+ *
+ * The most commonly used Container classes are Ext.panel.Panel, Ext.window.Window and
+ * Ext.tab.Panel. If you do not need the capabilities offered by the aforementioned classes you can create a
+ * lightweight Container to be encapsulated by an HTML element to your specifications by using the
+ * {@link Ext.Component#autoEl autoEl} config option.
+ *
+ * The code below illustrates how to explicitly create a Container:
+ *
+ *     @example
+ *     // Explicitly create a Container
+ *     Ext.create('Ext.container.Container', {
+ *         layout: {
+ *             type: 'hbox'
+ *         },
+ *         width: 400,
+ *         renderTo: Ext.getBody(),
+ *         border: 1,
+ *         style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
+ *         defaults: {
+ *             labelWidth: 80,
+ *             // implicitly create Container by specifying xtype
+ *             xtype: 'datefield',
+ *             flex: 1,
+ *             style: {
+ *                 padding: '10px'
+ *             }
+ *         },
+ *         items: [{
+ *             xtype: 'datefield',
+ *             name: 'startDate',
+ *             fieldLabel: 'Start date'
+ *         },{
+ *             xtype: 'datefield',
+ *             name: 'endDate',
+ *             fieldLabel: 'End date'
+ *         }]
+ *     });
+ *
+ * ## Layout
+ *
+ * Container classes delegate the rendering of child Components to a layout manager class which must be configured into
+ * the Container using the `{@link #layout}` configuration property.
+ *
+ * When either specifying child `{@link #cfg-items}` of a Container, or dynamically {@link #method-add adding} Components to a
+ * Container, remember to consider how you wish the Container to arrange those child elements, and whether those child
+ * elements need to be sized using one of Ext's built-in `{@link #layout}` schemes. By default, Containers use the
+ * {@link Ext.layout.container.Auto Auto} scheme which only renders child components, appending them one after the other
+ * inside the Container, and **does not apply any sizing** at all.
+ *
+ * A common mistake is when a developer neglects to specify a `{@link #layout}` (e.g. widgets like GridPanels or
+ * TreePanels are added to Containers for which no `{@link #layout}` has been specified). If a Container is left to
+ * use the default {@link Ext.layout.container.Auto Auto} scheme, none of its child components will be resized, or changed in
+ * any way when the Container is resized.
+ *
+ * Certain layout managers allow dynamic addition of child components. Those that do include
+ * Ext.layout.container.Card, Ext.layout.container.Anchor, Ext.layout.container.VBox,
+ * Ext.layout.container.HBox, and Ext.layout.container.Table. For example:
+ *
+ *     //  Create the GridPanel.
+ *     var myNewGrid = Ext.create('Ext.grid.Panel', {
+ *         store: myStore,
+ *         headers: myHeaders,
+ *         title: 'Results', // the title becomes the title of the tab
+ *     });
+ *
+ *     myTabPanel.add(myNewGrid); // {@link Ext.tab.Panel} implicitly uses {@link Ext.layout.container.Card Card}
+ *     myTabPanel.{@link Ext.tab.Panel#setActiveTab setActiveTab}(myNewGrid);
+ *
+ * The example above adds a newly created GridPanel to a TabPanel. Note that a TabPanel uses {@link
+ * Ext.layout.container.Card} as its layout manager which means all its child items are sized to {@link
+ * Ext.layout.container.Fit fit} exactly into its client area.
+ *
+ * **_Overnesting is a common problem_**. An example of overnesting occurs when a GridPanel is added to a TabPanel by
+ * wrapping the GridPanel _inside_ a wrapping Panel (that has no `{@link #layout}` specified) and then add that
+ * wrapping Panel to the TabPanel. The point to realize is that a GridPanel **is** a Component which can be added
+ * directly to a Container. If the wrapping Panel has no `{@link #layout}` configuration, then the overnested
+ * GridPanel will not be sized as expected.
+ *
+ * ## Adding via remote configuration
+ *
+ * A server side script can be used to add Components which are generated dynamically on the server. An example of
+ * adding a GridPanel to a TabPanel where the GridPanel is generated by the server based on certain parameters:
+ *
+ *     // execute an Ajax request to invoke server side script:
+ *     Ext.Ajax.request({
+ *         url: 'gen-invoice-grid.php',
+ *         // send additional parameters to instruct server script
+ *         params: {
+ *             startDate: Ext.getCmp('start-date').getValue(),
+ *             endDate: Ext.getCmp('end-date').getValue()
+ *         },
+ *         // process the response object to add it to the TabPanel:
+ *         success: function(xhr) {
+ *             var newComponent = eval(xhr.responseText); // see discussion below
+ *             myTabPanel.add(newComponent); // add the component to the TabPanel
+ *             myTabPanel.setActiveTab(newComponent);
+ *         },
+ *         failure: function() {
+ *             Ext.Msg.alert("Grid create failed", "Server communication failure");
+ *         }
+ *     });
+ *
+ * The server script needs to return a JSON representation of a configuration object, which, when decoded will return a
+ * config object with an {@link Ext.Component#xtype xtype}. The server might return the following JSON:
+ *
+ *     {
+ *         "xtype": 'grid',
+ *         "title": 'Invoice Report',
+ *         "store": {
+ *             "model": 'Invoice',
+ *             "proxy": {
+ *                 "type": 'ajax',
+ *                 "url": 'get-invoice-data.php',
+ *                 "reader": {
+ *                     "type": 'json'
+ *                     "record": 'transaction',
+ *                     "idProperty": 'id',
+ *                     "totalRecords": 'total'
+ *                 })
+ *             },
+ *             "autoLoad": {
+ *                 "params": {
+ *                     "startDate": '01/01/2008',
+ *                     "endDate": '01/31/2008'
+ *                 }
+ *             }
+ *         },
+ *         "headers": [
+ *             {"header": "Customer", "width": 250, "dataIndex": 'customer', "sortable": true},
+ *             {"header": "Invoice Number", "width": 120, "dataIndex": 'invNo', "sortable": true},
+ *             {"header": "Invoice Date", "width": 100, "dataIndex": 'date', "renderer": Ext.util.Format.dateRenderer('M d, y'), "sortable": true},
+ *             {"header": "Value", "width": 120, "dataIndex": 'value', "renderer": 'usMoney', "sortable": true}
+ *         ]
+ *     }
+ *
+ * When the above code fragment is passed through the `eval` function in the success handler of the Ajax request, the
+ * result will be a config object which, when added to a Container, will cause instantiation of a GridPanel. **Be sure
+ * that the Container is configured with a layout which sizes and positions the child items to your requirements.**
+ *
+ * **Note:** since the code above is _generated_ by a server script, the `autoLoad` params for the Store, the user's
+ * preferred date format, the metadata to allow generation of the Model layout, and the ColumnModel can all be generated
+ * into the code since these are all known on the server.
+ */
+Ext.define('Ext.container.Container', {
+    extend: 'Ext.container.AbstractContainer',
+    alias: 'widget.container',
+    alternateClassName: 'Ext.Container',
+    
+    /*
+     * For more information on the following methods, see the note for the
+     * hierarchyEventSource observer defined in the class' callback
+     */
+    fireHierarchyEvent: function (ename) {
+        this.hierarchyEventSource.fireEvent(ename, this);
+    },
+
+    // note that the collapse and expand events are fired explicitly from Panel.js
+    afterHide: function() {
+        this.callParent(arguments);
+        this.fireHierarchyEvent('hide');
+    },
+    
+    afterShow: function(){
+        this.callParent(arguments);
+        this.fireHierarchyEvent('show');
+    },
+
+    /**
+     * Return the immediate child Component in which the passed element is located.
+     * @param {Ext.Element/HTMLElement/String} el The element to test (or ID of element).
+     * @param {Boolean} deep If `true`, returns the deepest descendant Component which contains the passed element.
+     * @return {Ext.Component} The child item which contains the passed element.
+     */
+    getChildByElement: function(el, deep) {
+        var item,
+            itemEl,
+            i = 0,
+            it = this.getRefItems(),
+            ln = it.length;
+
+        el = Ext.getDom(el);
+        for (; i < ln; i++) {
+            item = it[i];
+            itemEl = item.getEl();
+            if (itemEl && ((itemEl.dom === el) || itemEl.contains(el))) {
+                return (deep && item.getChildByElement) ? item.getChildByElement(el, deep) : item;
+            }
+        }
+        return null;
+    }
+}, function () {
+    /*
+     * The observer below is used to be able to detect showing/hiding at various levels
+     * in the hierarchy. While it's not particularly expensive to bubble an event up,
+     * cascading an event down can be quite costly.
+     * 
+     * The main usage for this is to do with floating components. For example, the load mask
+     * is a floating component. The component it is masking may be inside several containers.
+     * As such, we need to know when component is hidden, either directly, or via a parent
+     * container being hidden. We can subscribe to these events and filter out the appropriate
+     * container.
+     */
+    this.hierarchyEventSource = this.prototype.hierarchyEventSource = new Ext.util.Observable({ events: {
+        hide: true,
+        show: true,
+        collapse: true,
+        expand: true
+    }});
+});

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

@@ -0,0 +1,265 @@
+/**
+ *
+ */
+Ext.define('Ext.container.DockingContainer', {
+
+    /* Begin Definitions */
+
+    requires: ['Ext.util.MixedCollection', 'Ext.Element' ],
+
+    /* End Definitions */
+
+    isDockingContainer: true,
+
+    /**
+     * @cfg {Object} defaultDockWeights
+     * This object holds the default weights applied to dockedItems that have no weight. These start with a
+     * weight of 1, to allow negative weights to insert before top items and are odd numbers
+     * so that even weights can be used to get between different dock orders.
+     *
+     * To make default docking order match border layout, do this:
+     *
+     *      Ext.panel.AbstractPanel.prototype.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };
+     *
+     * Changing these defaults as above or individually on this object will effect all Panels.
+     * To change the defaults on a single panel, you should replace the entire object:
+     *
+     *      initComponent: function () {
+     *          // NOTE: Don't change members of defaultDockWeights since the object is shared.
+     *          this.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };
+     *
+     *          this.callParent();
+     *      }
+     *
+     * To change only one of the default values, you do this:
+     *
+     *      initComponent: function () {
+     *          // NOTE: Don't change members of defaultDockWeights since the object is shared.
+     *          this.defaultDockWeights = Ext.applyIf({ top: 10 }, this.defaultDockWeights);
+     * 
+     *          this.callParent();
+     *      }
+     */
+    defaultDockWeights: {
+        top:    { render: 1, visual: 1 },
+        left:   { render: 3, visual: 5 },
+        right:  { render: 5, visual: 7 },
+        bottom: { render: 7, visual: 3 }
+    },
+
+    // @private
+    // Values to decide which side of the body element docked items must go
+    // This overides any weight. A left/top will *always* sort before a right/bottom
+    // regardless of any weight value. Weights sort at either side of the "body" dividing point.
+    dockOrder: {
+        top: -1,
+        left: -1,
+        right: 1,
+        bottom: 1
+    },
+
+/**
+     * Adds docked item(s) to the container.
+     * @param {Object/Object[]} component The Component or array of components to add. The components
+     * must include a 'dock' parameter on each component to indicate where it should be docked ('top', 'right',
+     * 'bottom', 'left').
+     * @param {Number} pos (optional) The index at which the Component will be added
+     */
+    addDocked : function(items, pos) {
+        var me = this,
+            i = 0,
+            item, length;
+
+        items = me.prepareItems(items);
+        length = items.length;
+
+        for (; i < length; i++) {
+            item = items[i];
+            item.dock = item.dock || 'top';
+
+            if (pos !== undefined) {
+                me.dockedItems.insert(pos + i, item);
+            } else {
+                me.dockedItems.add(item);
+            }
+            if (item.onAdded !== Ext.emptyFn) {
+                item.onAdded(me, i);
+            }
+            if (me.onDockedAdd !== Ext.emptyFn) {
+                me.onDockedAdd(item);
+            }
+        }
+
+        if (me.rendered && !me.suspendLayout) {
+            me.updateLayout();
+        }
+        return items;
+    },
+
+    destroyDockedItems: function(){
+        var dockedItems = this.dockedItems,
+            c;
+
+        if (dockedItems) {
+            while ((c = dockedItems.first())) {
+                this.removeDocked(c, true);
+            }
+        }
+    },
+
+    doRenderDockedItems: function (out, renderData, after) {
+        // Careful! This method is bolted on to the frameTpl and renderTpl so all we get for
+        // context is the renderData! The "this" pointer is either the frameTpl or the
+        // renderTpl instance!
+
+        // Due to framing, we will be called in two different ways: in the frameTpl or in
+        // the renderTpl. The frameTpl version enters via doRenderFramingDockedItems which
+        // sets "$skipDockedItems" on the renderTpl's renderData.
+        //
+        var me = renderData.$comp,
+            layout = me.componentLayout,
+            items,
+            tree;
+
+        if (layout.getDockedItems && !renderData.$skipDockedItems) {
+            items = layout.getDockedItems('render', !after);
+            tree = items && layout.getItemsRenderTree(items);
+
+            if (tree) {
+                Ext.DomHelper.generateMarkup(tree, out);
+            }
+        }
+    },
+
+    /**
+     * Finds a docked component by id, itemId or position. Also see {@link #getDockedItems}
+     * @param {String/Number} comp The id, itemId or position of the docked component (see {@link #getComponent} for details)
+     * @return {Ext.Component} The docked component (if found)
+     */
+    getDockedComponent: function(comp) {
+        if (Ext.isObject(comp)) {
+            comp = comp.getItemId();
+        }
+        return this.dockedItems.get(comp);
+    },
+
+    /**
+     * Retrieves an array of all currently docked Components.
+     *
+     * For example to find a toolbar that has been docked at top:
+     *
+     *     panel.getDockedItems('toolbar[dock="top"]');
+     *
+     * @param {String} selector A {@link Ext.ComponentQuery ComponentQuery} selector string to filter the returned items.
+     * @param {Boolean} beforeBody An optional flag to limit the set of items to only those
+     *  before the body (true) or after the body (false). All components are returned by
+     *  default.
+     * @return {Ext.Component[]} The array of docked components meeting the specified criteria.
+     */
+    getDockedItems : function(selector, beforeBody) {
+        var dockedItems = this.getComponentLayout().getDockedItems('render', beforeBody);
+
+        if (selector && dockedItems.length) {
+            dockedItems = Ext.ComponentQuery.query(selector, dockedItems);
+        }
+
+        return dockedItems;
+    },
+
+    getDockingRefItems: function(deep, containerItems) {
+        // deep fetches the docked items and their descendants using '*' and then '* *'
+        var selector = deep && '*,* *',
+            // start with only the top/left docked items (and maybe their children)
+            dockedItems = this.getDockedItems(selector, true),
+            items;
+
+        // push container items (and maybe their children) after top/left docked items:
+        dockedItems.push.apply(dockedItems, containerItems);
+
+        // push right/bottom docked items (and maybe their children) after container items:
+        items = this.getDockedItems(selector, false);
+        dockedItems.push.apply(dockedItems, items);
+
+        return dockedItems;
+    },
+
+    initDockingItems: function() {
+        var me = this,
+            items = me.dockedItems;
+
+        me.dockedItems = new Ext.util.AbstractMixedCollection(false, me.getComponentId);
+        if (items) {
+            me.addDocked(items);
+        }
+    },
+
+    /**
+     * Inserts docked item(s) to the panel at the indicated position.
+     * @param {Number} pos The index at which the Component will be inserted
+     * @param {Object/Object[]} component. The Component or array of components to add. The components
+     * must include a 'dock' paramater on each component to indicate where it should be docked ('top', 'right',
+     * 'bottom', 'left').
+     */
+    insertDocked : function(pos, items) {
+        this.addDocked(items, pos);
+    },
+
+    // Placeholder empty functions
+    /**
+     * Invoked after a docked item is added to the Panel.
+     * @param {Ext.Component} component
+     * @template
+     * @protected
+     */
+    onDockedAdd : Ext.emptyFn,
+    /**
+     * Invoked after a docked item is removed from the Panel.
+     * @param {Ext.Component} component
+     * @template
+     * @protected
+     */
+    onDockedRemove : Ext.emptyFn,
+
+    /**
+     * Removes the docked item from the panel.
+     * @param {Ext.Component} item. The Component to remove.
+     * @param {Boolean} autoDestroy (optional) Destroy the component after removal.
+     */
+    removeDocked : function(item, autoDestroy) {
+        var me = this,
+            layout,
+            hasLayout;
+
+        if (!me.dockedItems.contains(item)) {
+            return item;
+        }
+
+        layout = me.componentLayout;
+        hasLayout = layout && me.rendered;
+
+        if (hasLayout) {
+            layout.onRemove(item);
+        }
+
+        me.dockedItems.remove(item);
+        item.onRemoved();
+        me.onDockedRemove(item);
+
+        if (autoDestroy === true || (autoDestroy !== false && me.autoDestroy)) {
+            item.destroy();
+        } else if (hasLayout) {
+            // not destroying, make any layout related removals
+            layout.afterRemove(item);
+        }
+
+        if (!me.destroying && !me.suspendLayout) {
+            me.updateLayout();
+        }
+
+        return item;
+    },
+
+    setupDockingRenderTpl: function (renderTpl) {
+        renderTpl.renderDockedItems = this.doRenderDockedItems;
+    }
+});