extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/grid/RowNumberer.js

@@ -0,0 +1,76 @@
+/**
+ * This is a utility class that can be passed into a {@link Ext.grid.column.Column} as a column config that provides
+ * an automatic row numbering column.
+ * 
+ * Usage:
+ *
+ *     columns: [
+ *         {xtype: 'rownumberer'},
+ *         {text: "Company", flex: 1, sortable: true, dataIndex: 'company'},
+ *         {text: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
+ *         {text: "Change", width: 120, sortable: true, dataIndex: 'change'},
+ *         {text: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
+ *         {text: "Last Updated", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
+ *     ]
+ *
+ */
+Ext.define('Ext.grid.RowNumberer', {
+    extend: 'Ext.grid.column.Column',
+    alias: 'widget.rownumberer',
+
+    /**
+     * @cfg {String} text
+     * Any valid text or HTML fragment to display in the header cell for the row number column.
+     */
+    text: "&#160",
+
+    /**
+     * @cfg {Number} width
+     * The default width in pixels of the row number column.
+     */
+    width: 23,
+
+    /**
+     * @cfg {Boolean} sortable
+     * @hide
+     */
+    sortable: false,
+    
+    /**
+     * @cfg {Boolean} [draggable=false]
+     * False to disable drag-drop reordering of this column.
+     */
+    draggable: false,
+
+    align: 'right',
+
+    constructor : function(config){
+
+        // Copy the prototype's default width setting into an instance property to provide
+        // a default width which will not be overridden by AbstractContainer.applyDefaults use of Ext.applyIf
+        this.width = this.width;
+
+        this.callParent(arguments);
+        if (this.rowspan) {
+            this.renderer = Ext.Function.bind(this.renderer, this);
+        }
+    },
+
+    // private
+    resizable: false,
+    hideable: false,
+    menuDisabled: true,
+    dataIndex: '',
+    cls: Ext.baseCSSPrefix + 'row-numberer',
+    rowspan: undefined,
+
+    // private
+    renderer: function(value, metaData, record, rowIdx, colIdx, store) {
+        if (this.rowspan){
+            metaData.cellAttr = 'rowspan="'+this.rowspan+'"';
+        }
+
+        metaData.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
+        return store.indexOfTotal(record) + 1;
+    }
+});

data/app/assets/javascripts/extjs-rails/src/grid/Scroller.js

@@ -0,0 +1,5 @@
+//<debug>
+Ext.define('Ext.grid.Scroller', {
+    constructor: Ext.deprecated()
+});
+//</debug>

data/app/assets/javascripts/extjs-rails/src/grid/View.js

@@ -0,0 +1,44 @@
+/**
+ * The grid View class provides extra {@link Ext.grid.Panel} specific functionality to the
+ * {@link Ext.view.Table}. In general, this class is not instanced directly, instead a viewConfig
+ * option is passed to the grid:
+ *
+ *     Ext.create('Ext.grid.Panel', {
+ *         // other options
+ *         viewConfig: {
+ *             stripeRows: false
+ *         }
+ *     });
+ *
+ * ## Drag Drop
+ *
+ * Drag and drop functionality can be achieved in the grid by attaching a {@link Ext.grid.plugin.DragDrop} plugin
+ * when creating the view.
+ *
+ *     Ext.create('Ext.grid.Panel', {
+ *         // other options
+ *         viewConfig: {
+ *             plugins: {
+ *                 ddGroup: 'people-group',
+ *                 ptype: 'gridviewdragdrop',
+ *                 enableDrop: false
+ *             }
+ *         }
+ *     });
+ */
+Ext.define('Ext.grid.View', {
+    extend: 'Ext.view.Table',
+    alias: 'widget.gridview',
+
+    /**
+     * @cfg
+     * True to stripe the rows.
+     *
+     * This causes the CSS class **`x-grid-row-alt`** to be added to alternate rows of the grid. A default CSS rule is
+     * provided which sets a background color, but you can override this with a rule which either overrides the
+     * **background-color** style using the `!important` modifier, or which uses a CSS selector of higher specificity.
+     */
+    stripeRows: true,
+
+    autoScroll: true
+});

data/app/assets/javascripts/extjs-rails/src/grid/ViewDropZone.js

@@ -0,0 +1,41 @@
+/**
+ * @private
+ */
+Ext.define('Ext.grid.ViewDropZone', {
+    extend: 'Ext.view.DropZone',
+
+    indicatorHtml: '<div class="' + Ext.baseCSSPrefix + 'grid-drop-indicator-left"></div><div class="' + Ext.baseCSSPrefix + 'grid-drop-indicator-right"></div>',
+    indicatorCls: Ext.baseCSSPrefix + 'grid-drop-indicator',
+
+    handleNodeDrop : function(data, record, position) {
+        var view = this.view,
+            store = view.getStore(),
+            index, records, i, len;
+
+        // If the copy flag is set, create a copy of the Models with the same IDs
+        if (data.copy) {
+            records = data.records;
+            data.records = [];
+            for (i = 0, len = records.length; i < len; i++) {
+                data.records.push(records[i].copy(records[i].getId()));
+            }
+        } else {
+            /*
+             * Remove from the source store. We do this regardless of whether the store
+             * is the same bacsue the store currently doesn't handle moving records
+             * within the store. In the future it should be possible to do this.
+             * Here was pass the isMove parameter if we're moving to the same view.
+             */
+            data.view.store.remove(data.records, data.view === view);
+        }
+
+        index = store.indexOf(record);
+
+        // 'after', or undefined (meaning a drop at index -1 on an empty View)...
+        if (position !== 'before') {
+            index++;
+        }
+        store.insert(index, data.records);
+        view.getSelectionModel().select(data.records);
+    }
+});

data/app/assets/javascripts/extjs-rails/src/grid/column/Action.js

@@ -0,0 +1,318 @@
+/**
+ * A Grid header type which renders an icon, or a series of icons in a grid cell, and offers a scoped click
+ * handler for each icon.
+ *
+ *     @example
+ *     Ext.create('Ext.data.Store', {
+ *         storeId:'employeeStore',
+ *         fields:['firstname', 'lastname', 'seniority', 'dep', 'hired'],
+ *         data:[
+ *             {firstname:"Michael", lastname:"Scott"},
+ *             {firstname:"Dwight", lastname:"Schrute"},
+ *             {firstname:"Jim", lastname:"Halpert"},
+ *             {firstname:"Kevin", lastname:"Malone"},
+ *             {firstname:"Angela", lastname:"Martin"}
+ *         ]
+ *     });
+ *
+ *     Ext.create('Ext.grid.Panel', {
+ *         title: 'Action Column Demo',
+ *         store: Ext.data.StoreManager.lookup('employeeStore'),
+ *         columns: [
+ *             {text: 'First Name',  dataIndex:'firstname'},
+ *             {text: 'Last Name',  dataIndex:'lastname'},
+ *             {
+ *                 xtype:'actioncolumn',
+ *                 width:50,
+ *                 items: [{
+ *                     icon: 'extjs/examples/shared/icons/fam/cog_edit.png',  // Use a URL in the icon config
+ *                     tooltip: 'Edit',
+ *                     handler: function(grid, rowIndex, colIndex) {
+ *                         var rec = grid.getStore().getAt(rowIndex);
+ *                         alert("Edit " + rec.get('firstname'));
+ *                     }
+ *                 },{
+ *                     icon: 'extjs/examples/restful/images/delete.png',
+ *                     tooltip: 'Delete',
+ *                     handler: function(grid, rowIndex, colIndex) {
+ *                         var rec = grid.getStore().getAt(rowIndex);
+ *                         alert("Terminate " + rec.get('firstname'));
+ *                     }
+ *                 }]
+ *             }
+ *         ],
+ *         width: 250,
+ *         renderTo: Ext.getBody()
+ *     });
+ *
+ * The action column can be at any index in the columns array, and a grid can have any number of
+ * action columns.
+ */
+Ext.define('Ext.grid.column.Action', {
+    extend: 'Ext.grid.column.Column',
+    alias: ['widget.actioncolumn'],
+    alternateClassName: 'Ext.grid.ActionColumn',
+
+    /**
+     * @cfg {String} icon
+     * The URL of an image to display as the clickable element in the column.
+     *
+     * Defaults to `{@link Ext#BLANK_IMAGE_URL}`.
+     */
+    /**
+     * @cfg {String} iconCls
+     * A CSS class to apply to the icon image. To determine the class dynamically, configure the Column with
+     * a `{@link #getClass}` function.
+     */
+    /**
+     * @cfg {Function} handler
+     * A function called when the icon is clicked.
+     * @cfg {Ext.view.Table} handler.view The owning TableView.
+     * @cfg {Number} handler.rowIndex The row index clicked on.
+     * @cfg {Number} handler.colIndex The column index clicked on.
+     * @cfg {Object} handler.item The clicked item (or this Column if multiple {@link #cfg-items} were not configured).
+     * @cfg {Event} handler.e The click event.
+     */
+    /**
+     * @cfg {Object} scope
+     * The scope (**this** reference) in which the `{@link #handler}` and `{@link #getClass}` fuctions are executed.
+     * Defaults to this Column.
+     */
+    /**
+     * @cfg {String} tooltip
+     * A tooltip message to be displayed on hover. {@link Ext.tip.QuickTipManager#init Ext.tip.QuickTipManager} must
+     * have been initialized.
+     */
+    /**
+     * @cfg {Boolean} disabled
+     * If true, the action will not respond to click events, and will be displayed semi-opaque.
+     */
+    /**
+     * @cfg {Boolean} [stopSelection=true]
+     * Prevent grid selection upon mousedown.
+     */
+    /**
+     * @cfg {Function} getClass
+     * A function which returns the CSS class to apply to the icon image.
+     *
+     * @cfg {Object} getClass.v The value of the column's configured field (if any).
+     *
+     * @cfg {Object} getClass.metadata An object in which you may set the following attributes:
+     * @cfg {String} getClass.metadata.css A CSS class name to add to the cell's TD element.
+     * @cfg {String} getClass.metadata.attr An HTML attribute definition string to apply to the data container
+     * element *within* the table cell (e.g. 'style="color:red;"').
+     *
+     * @cfg {Ext.data.Model} getClass.r The Record providing the data.
+     *
+     * @cfg {Number} getClass.rowIndex The row index..
+     *
+     * @cfg {Number} getClass.colIndex The column index.
+     *
+     * @cfg {Ext.data.Store} getClass.store The Store which is providing the data Model.
+     */
+    /**
+     * @cfg {Object[]} items
+     * An Array which may contain multiple icon definitions, each element of which may contain:
+     *
+     * @cfg {String} items.icon The url of an image to display as the clickable element in the column.
+     *
+     * @cfg {String} items.iconCls A CSS class to apply to the icon image. To determine the class dynamically,
+     * configure the item with a `getClass` function.
+     *
+     * @cfg {Function} items.getClass A function which returns the CSS class to apply to the icon image.
+     * @cfg {Object} items.getClass.v The value of the column's configured field (if any).
+     * @cfg {Object} items.getClass.metadata An object in which you may set the following attributes:
+     * @cfg {String} items.getClass.metadata.css A CSS class name to add to the cell's TD element.
+     * @cfg {String} items.getClass.metadata.attr An HTML attribute definition string to apply to the data
+     * container element _within_ the table cell (e.g. 'style="color:red;"').
+     * @cfg {Ext.data.Model} items.getClass.r The Record providing the data.
+     * @cfg {Number} items.getClass.rowIndex The row index..
+     * @cfg {Number} items.getClass.colIndex The column index.
+     * @cfg {Ext.data.Store} items.getClass.store The Store which is providing the data Model.
+     *
+     * @cfg {Function} items.handler A function called when the icon is clicked.
+     *
+     * @cfg {Object} items.scope The scope (`this` reference) in which the `handler` and `getClass` functions
+     * are executed. Fallback defaults are this Column's configured scope, then this Column.
+     *
+     * @cfg {String} items.tooltip A tooltip message to be displayed on hover.
+     * @cfg {Boolean} items.disabled If true, the action will not respond to click events, and will be displayed semi-opaque.
+     * {@link Ext.tip.QuickTipManager#init Ext.tip.QuickTipManager} must have been initialized.
+     */
+    /**
+     * @property {Array} items
+     * An array of action items copied from the configured {@link #cfg-items items} configuration. Each will have
+     * an `enable` and `disable` method added which will enable and disable the associated action, and
+     * update the displayed icon accordingly.
+     */
+
+    actionIdRe: new RegExp(Ext.baseCSSPrefix + 'action-col-(\\d+)'),
+
+    /**
+     * @cfg {String} altText
+     * The alt text to use for the image element.
+     */
+    altText: '',
+
+    /**
+     * @cfg {String} menuText=[<i>Actions</i>]
+     * Text to display in this column's menu item if no {@link #text} was specified as a header.
+     */
+    menuText: '<i>Actions</i>',
+
+    sortable: false,
+
+    constructor: function(config) {
+        var me = this,
+            cfg = Ext.apply({}, config),
+            items = cfg.items || [me];
+
+
+        me.origRenderer = cfg.renderer || me.renderer;
+        me.origScope = cfg.scope || me.scope;
+        
+        delete me.renderer;
+        delete me.scope;
+        delete cfg.renderer;
+        delete cfg.scope;
+        
+        // This is a Container. Delete the items config to be reinstated after construction.
+        delete cfg.items;
+        me.callParent([cfg]);
+
+        // Items is an array property of ActionColumns
+        me.items = items;
+        
+        if (me.origRenderer) {
+            me.hasCustomRenderer = true;
+        }
+    },
+    
+    // Renderer closure iterates through items creating an <img> element for each and tagging with an identifying
+    // class name x-action-col-{n}
+    defaultRenderer: function(v, meta){
+        var me = this,
+            prefix = Ext.baseCSSPrefix,
+            scope = me.origScope || me,
+            items = me.items,
+            len = items.length,
+            i = 0,
+            item;
+            
+        // Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)
+        v = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';
+
+        meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
+        for (; i < len; i++) {
+            item = items[i];
+            
+            // Only process the item action setup once.
+            if (!item.hasActionConfiguration) {
+                
+                // Apply our documented default to all items
+                item.stopSelection = me.stopSelection;
+                item.disable = Ext.Function.bind(me.disableAction, me, [i], 0);
+                item.enable = Ext.Function.bind(me.enableAction, me, [i], 0);
+                item.hasActionConfiguration = true;
+            }
+            
+            v += '<img alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
+                '" class="' + prefix + 'action-col-icon ' + prefix + 'action-col-' + String(i) + ' ' + (item.disabled ? prefix + 'item-disabled' : ' ') +
+                ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope || scope, arguments) : (item.iconCls || me.iconCls || '')) + '"' +
+                ((item.tooltip) ? ' data-qtip="' + item.tooltip + '"' : '') + ' />';
+        }
+        return v;    
+    },
+
+    /**
+     * Enables this ActionColumn's action at the specified index.
+     * @param {Number/Ext.grid.column.Action} index
+     * @param {Boolean} [silent=false]
+     */
+    enableAction: function(index, silent) {
+        var me = this;
+
+        if (!index) {
+            index = 0;
+        } else if (!Ext.isNumber(index)) {
+            index = Ext.Array.indexOf(me.items, index);
+        }
+        me.items[index].disabled = false;
+        me.up('tablepanel').el.select('.' + Ext.baseCSSPrefix + 'action-col-' + index).removeCls(me.disabledCls);
+        if (!silent) {
+            me.fireEvent('enable', me);
+        }
+    },
+
+    /**
+     * Disables this ActionColumn's action at the specified index.
+     * @param {Number/Ext.grid.column.Action} index
+     * @param {Boolean} [silent=false]
+     */
+    disableAction: function(index, silent) {
+        var me = this;
+
+        if (!index) {
+            index = 0;
+        } else if (!Ext.isNumber(index)) {
+            index = Ext.Array.indexOf(me.items, index);
+        }
+        me.items[index].disabled = true;
+        me.up('tablepanel').el.select('.' + Ext.baseCSSPrefix + 'action-col-' + index).addCls(me.disabledCls);
+        if (!silent) {
+            me.fireEvent('disable', me);
+        }
+    },
+
+    destroy: function() {
+        delete this.items;
+        delete this.renderer;
+        return this.callParent(arguments);
+    },
+
+    /**
+     * @private
+     * Process and refire events routed from the GridView's processEvent method.
+     * Also fires any configured click handlers. By default, cancels the mousedown event to prevent selection.
+     * Returns the event handler's status to allow canceling of GridView's bubbling process.
+     */
+    processEvent : function(type, view, cell, recordIndex, cellIndex, e, record, row){
+        var me = this,
+            target = e.getTarget(),
+            match,
+            item, fn,
+            key = type == 'keydown' && e.getKey();
+
+        // If the target was not within a cell (ie it's a keydown event from the View), then
+        // rely on the selection data injected by View.processUIEvent to grab the
+        // first action icon from the selected cell.
+        if (key && !Ext.fly(target).findParent(view.cellSelector)) {
+            target = Ext.fly(cell).down('.' + Ext.baseCSSPrefix + 'action-col-icon', true);
+        }
+
+        // NOTE: The statement below tests the truthiness of an assignment.
+        if (target && (match = target.className.match(me.actionIdRe))) {
+            item = me.items[parseInt(match[1], 10)];
+            if (item) {
+                if (type == 'click' || (key == e.ENTER || key == e.SPACE)) {
+                    fn = item.handler || me.handler;
+                    if (fn && !item.disabled) {
+                        fn.call(item.scope || me.scope || me, view, recordIndex, cellIndex, item, e, record, row);
+                    }
+                } else if (type == 'mousedown' && item.stopSelection !== false) {
+                    return false;
+                }
+            }
+        }
+        return me.callParent(arguments);
+    },
+
+    cascade: function(fn, scope) {
+        fn.call(scope||this, this);
+    },
+
+    // Private override because this cannot function as a Container, and it has an items property which is an Array, NOT a MixedCollection.
+    getRefItems: function() {
+        return [];
+    }
+});