extjs-rails 4.1.0.alpha1

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

@@ -0,0 +1,49 @@
+/**
+ * @private
+ */
+Ext.define('Ext.grid.plugin.HeaderReorderer', {
+    extend: 'Ext.util.Observable',
+    requires: ['Ext.grid.header.DragZone', 'Ext.grid.header.DropZone'],
+    alias: 'plugin.gridheaderreorderer',
+
+    init: function(headerCt) {
+        this.headerCt = headerCt;
+        headerCt.on({
+            render: this.onHeaderCtRender,
+            single: true,
+            scope: this
+        });
+    },
+
+    /**
+     * @private
+     * AbstractComponent calls destroy on all its plugins at destroy time.
+     */
+    destroy: function() {
+        Ext.destroy(this.dragZone, this.dropZone);
+    },
+
+    onHeaderCtRender: function() {
+        var me = this;
+        
+        me.dragZone = new Ext.grid.header.DragZone(me.headerCt);
+        me.dropZone = new Ext.grid.header.DropZone(me.headerCt);
+        if (me.disabled) {
+            me.dragZone.disable();
+        }
+    },
+    
+    enable: function() {
+        this.disabled = false;
+        if (this.dragZone) {
+            this.dragZone.enable();
+        }
+    },
+    
+    disable: function() {
+        this.disabled = true;
+        if (this.dragZone) {
+            this.dragZone.disable();
+        }
+    }
+});

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

@@ -0,0 +1,292 @@
+/**
+ * Plugin to add header resizing functionality to a HeaderContainer.
+ * Always resizing header to the left of the splitter you are resizing.
+ */
+Ext.define('Ext.grid.plugin.HeaderResizer', {
+    extend: 'Ext.util.Observable',
+    requires: ['Ext.dd.DragTracker', 'Ext.util.Region'],
+    alias: 'plugin.gridheaderresizer',
+
+    disabled: false,
+
+    config: {
+        /**
+         * @cfg {Boolean} dynamic
+         * True to resize on the fly rather than using a proxy marker.
+         * @accessor
+         */
+        dynamic: false
+    },
+
+    colHeaderCls: Ext.baseCSSPrefix + 'column-header',
+
+    minColWidth: 40,
+    maxColWidth: 1000,
+    wResizeCursor: 'col-resize',
+    eResizeCursor: 'col-resize',
+    // not using w and e resize bc we are only ever resizing one
+    // column
+    //wResizeCursor: Ext.isWebKit ? 'w-resize' : 'col-resize',
+    //eResizeCursor: Ext.isWebKit ? 'e-resize' : 'col-resize',
+
+    init: function(headerCt) {
+        this.headerCt = headerCt;
+        headerCt.on('render', this.afterHeaderRender, this, {single: true});
+    },
+
+    /**
+     * @private
+     * AbstractComponent calls destroy on all its plugins at destroy time.
+     */
+    destroy: function() {
+        if (this.tracker) {
+            this.tracker.destroy();
+        }
+    },
+
+    afterHeaderRender: function() {
+        var headerCt = this.headerCt,
+            el = headerCt.el;
+
+        headerCt.mon(el, 'mousemove', this.onHeaderCtMouseMove, this);
+
+        this.tracker = new Ext.dd.DragTracker({
+            disabled: this.disabled,
+            onBeforeStart: Ext.Function.bind(this.onBeforeStart, this),
+            onStart: Ext.Function.bind(this.onStart, this),
+            onDrag: Ext.Function.bind(this.onDrag, this),
+            onEnd: Ext.Function.bind(this.onEnd, this),
+            tolerance: 3,
+            autoStart: 300,
+            el: el
+        });
+    },
+
+    // As we mouse over individual headers, change the cursor to indicate
+    // that resizing is available, and cache the resize target header for use
+    // if/when they mousedown.
+    onHeaderCtMouseMove: function(e, t) {
+        var me = this,
+            prevSiblings,
+            headerEl, overHeader, resizeHeader, resizeHeaderOwnerGrid, ownerGrid;
+
+        if (me.headerCt.dragging) {
+            if (me.activeHd) {
+                me.activeHd.el.dom.style.cursor = '';
+                delete me.activeHd;
+            }
+        } else {
+            headerEl = e.getTarget('.' + me.colHeaderCls, 3, true);
+
+            if (headerEl){
+                overHeader = Ext.getCmp(headerEl.id);
+
+                // On left edge, go back to the previous non-hidden header.
+                if (overHeader.isOnLeftEdge(e)) {
+                    resizeHeader = overHeader.previousNode('gridcolumn:not([hidden]):not([isGroupHeader])')
+                    // There may not *be* a previous non-hidden header.
+                    if (resizeHeader) {
+
+                        ownerGrid = me.headerCt.up('tablepanel');
+                        resizeHeaderOwnerGrid = resizeHeader.up('tablepanel');
+
+                        // Need to check that previousNode didn't go outside the current grid/tree
+                        // But in the case of a Grid which contains a locked and normal grid, allow previousNode to jump
+                        // from the first column of the normalGrid to the last column of the lockedGrid
+                        if (!((resizeHeaderOwnerGrid === ownerGrid) || ((ownerGrid.ownerCt.isXType('tablepanel')) && ownerGrid.ownerCt.view.lockedGrid === resizeHeaderOwnerGrid))) {
+                            resizeHeader = null;
+                        }
+                    }
+                }
+                // Else, if on the right edge, we're resizing the column we are over
+                else if (overHeader.isOnRightEdge(e)) {
+                    resizeHeader = overHeader;
+                }
+                // Between the edges: we are not resizing
+                else {
+                    resizeHeader = null;
+                }
+
+                // We *are* resizing
+                if (resizeHeader) {
+                    // If we're attempting to resize a group header, that cannot be resized,
+                    // so find its last visible leaf header; Group headers are sized
+                    // by the size of their child headers.
+                    if (resizeHeader.isGroupHeader) {
+                        prevSiblings = resizeHeader.getGridColumns();
+                        resizeHeader = prevSiblings[prevSiblings.length - 1];
+                    }
+
+                    // Check if the header is resizable. Continue checking the old "fixed" property, bug also
+                    // check whether the resizablwe property is set to false.
+                    if (resizeHeader && !(resizeHeader.fixed || (resizeHeader.resizable === false) || me.disabled)) {
+                        me.activeHd = resizeHeader;
+                        overHeader.el.dom.style.cursor = me.eResizeCursor;
+                    }
+                // reset
+                } else {
+                    overHeader.el.dom.style.cursor = '';
+                    delete me.activeHd;
+                }
+            }
+        }
+    },
+
+    // only start when there is an activeHd
+    onBeforeStart : function(e){
+        var t = e.getTarget();
+        // cache the activeHd because it will be cleared.
+        this.dragHd = this.activeHd;
+
+        if (!!this.dragHd && !Ext.fly(t).hasCls(Ext.baseCSSPrefix + 'column-header-trigger') && !this.headerCt.dragging) {
+            //this.headerCt.dragging = true;
+            this.tracker.constrainTo = this.getConstrainRegion();
+            return true;
+        } else {
+            this.headerCt.dragging = false;
+            return false;
+        }
+    },
+
+    // get the region to constrain to, takes into account max and min col widths
+    getConstrainRegion: function() {
+        var me       = this,
+            dragHdEl = me.dragHd.el,
+            region   = Ext.util.Region.getRegion(dragHdEl),
+            nextHd;
+
+        // If forceFit, then right constraint is based upon not being able to force the next header
+        // beyond the minColWidth. If there is no next header, then the header may not be expanded.
+        if (me.headerCt.forceFit) {
+            nextHd = me.dragHd.nextNode('gridcolumn:not([hidden]):not([isGroupHeader])');
+        }
+
+         return region.adjust(
+            0,
+            me.headerCt.forceFit ? (nextHd ? nextHd.getWidth() - me.minColWidth : 0) : me.maxColWidth - dragHdEl.getWidth(),
+            0,
+            me.minColWidth
+        );
+    },
+
+    // initialize the left and right hand side markers around
+    // the header that we are resizing
+    onStart: function(e){
+        var me       = this,
+            dragHd   = me.dragHd,
+            dragHdEl = dragHd.el,
+            width    = dragHdEl.getWidth(),
+            headerCt = me.headerCt,
+            t        = e.getTarget(),
+            xy, gridSection, dragHct, firstSection, lhsMarker, rhsMarker, el, offsetLeft, offsetTop, topLeft, markerHeight, top;
+
+        if (me.dragHd && !Ext.fly(t).hasCls(Ext.baseCSSPrefix + 'column-header-trigger')) {
+            headerCt.dragging = true;
+        }
+
+        me.origWidth = width;
+
+        // setup marker proxies
+        if (!me.dynamic) {
+            xy           = dragHdEl.getXY();
+            gridSection  = headerCt.up('[scrollerOwner]');
+            dragHct      = me.dragHd.up(':not([isGroupHeader])');
+            firstSection = dragHct.up();
+            lhsMarker    = gridSection.getLhsMarker();
+            rhsMarker    = gridSection.getRhsMarker();
+            el           = rhsMarker.parent();
+            offsetLeft   = el.getLeft(true);
+            offsetTop    = el.getTop(true);
+            topLeft      = el.translatePoints(xy);
+            markerHeight = firstSection.body.getHeight() + headerCt.getHeight();
+            top = topLeft.top - offsetTop;
+
+            lhsMarker.setTop(top);
+            rhsMarker.setTop(top);
+            lhsMarker.setHeight(markerHeight);
+            rhsMarker.setHeight(markerHeight);
+            lhsMarker.setLeft(topLeft.left - offsetLeft);
+            rhsMarker.setLeft(topLeft.left + width - offsetLeft);
+        }
+    },
+
+    // synchronize the rhsMarker with the mouse movement
+    onDrag: function(e){
+        if (!this.dynamic) {
+            var xy          = this.tracker.getXY('point'),
+                gridSection = this.headerCt.up('[scrollerOwner]'),
+                rhsMarker   = gridSection.getRhsMarker(),
+                el          = rhsMarker.parent(),
+                topLeft     = el.translatePoints(xy),
+                offsetLeft  = el.getLeft(true);
+
+            rhsMarker.setLeft(topLeft.left - offsetLeft);
+        // Resize as user interacts
+        } else {
+            this.doResize();
+        }
+    },
+
+    onEnd: function(e){
+        this.headerCt.dragging = false;
+        if (this.dragHd) {
+            if (!this.dynamic) {
+                var dragHd      = this.dragHd,
+                    gridSection = this.headerCt.up('[scrollerOwner]'),
+                    lhsMarker   = gridSection.getLhsMarker(),
+                    rhsMarker   = gridSection.getRhsMarker(),
+                    offscreen   = -9999;
+
+                // hide markers
+                lhsMarker.setLeft(offscreen);
+                rhsMarker.setLeft(offscreen);
+            }
+            this.doResize();
+        }
+    },
+
+    doResize: function() {
+        if (this.dragHd) {
+            var dragHd = this.dragHd,
+                nextHd,
+                offset = this.tracker.getOffset('point');
+
+            // resize the dragHd
+            if (dragHd.flex) {
+                delete dragHd.flex;
+            }
+
+            Ext.suspendLayouts();
+
+            // Set the new column width.
+            dragHd.setWidth(this.origWidth + offset[0]);
+ 
+            // In the case of forceFit, change the following Header width.
+            // Constraining so that neither neighbour can be sized to below minWidth is handled in getConstrainRegion
+            if (this.headerCt.forceFit) {
+                nextHd = dragHd.nextNode('gridcolumn:not([hidden]):not([isGroupHeader])');
+                if (nextHd) {
+                    delete nextHd.flex;
+                    nextHd.setWidth(nextHd.getWidth() - offset[0]);
+                }
+            }
+
+            // Apply the two width changes by laying out the owning HeaderContainer
+            Ext.resumeLayouts(true);
+        }
+    },
+
+    disable: function() {
+        this.disabled = true;
+        if (this.tracker) {
+            this.tracker.disable();
+        }
+    },
+
+    enable: function() {
+        this.disabled = false;
+        if (this.tracker) {
+            this.tracker.enable();
+        }
+    }
+});

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

@@ -0,0 +1,339 @@
+/**
+ * The Ext.grid.plugin.RowEditing plugin injects editing at a row level for a Grid. When editing begins,
+ * a small floating dialog will be shown for the appropriate row. Each editable column will show a field
+ * for editing. There is a button to save or cancel all changes for the edit.
+ *
+ * The field that will be used for the editor is defined at the
+ * {@link Ext.grid.column.Column#editor editor}. The editor can be a field instance or a field configuration.
+ * If an editor is not specified for a particular column then that column won't be editable and the value of
+ * the column will be displayed. To provide a custom renderer for non-editable values, use the 
+ * {@link Ext.grid.column.Column#editRenderer editRenderer} configuration on the column.
+ *
+ * The editor may be shared for each column in the grid, or a different one may be specified for each column.
+ * An appropriate field type should be chosen to match the data structure that it will be editing. For example,
+ * to edit a date, it would be useful to specify {@link Ext.form.field.Date} as the editor.
+ *
+ *     @example
+ *     Ext.create('Ext.data.Store', {
+ *         storeId:'simpsonsStore',
+ *         fields:['name', 'email', 'phone'],
+ *         data: [
+ *             {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
+ *             {"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234"},
+ *             {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
+ *             {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
+ *         ]
+ *     });
+ *
+ *     Ext.create('Ext.grid.Panel', {
+ *         title: 'Simpsons',
+ *         store: Ext.data.StoreManager.lookup('simpsonsStore'),
+ *         columns: [
+ *             {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
+ *             {header: 'Email', dataIndex: 'email', flex:1,
+ *                 editor: {
+ *                     xtype: 'textfield',
+ *                     allowBlank: false
+ *                 }
+ *             },
+ *             {header: 'Phone', dataIndex: 'phone'}
+ *         ],
+ *         selType: 'rowmodel',
+ *         plugins: [
+ *             Ext.create('Ext.grid.plugin.RowEditing', {
+ *                 clicksToEdit: 1
+ *             })
+ *         ],
+ *         height: 200,
+ *         width: 400,
+ *         renderTo: Ext.getBody()
+ *     });
+ */
+Ext.define('Ext.grid.plugin.RowEditing', {
+    extend: 'Ext.grid.plugin.Editing',
+    alias: 'plugin.rowediting',
+
+    requires: [
+        'Ext.grid.RowEditor'
+    ],
+
+    editStyle: 'row',
+
+    /**
+     * @cfg {Boolean} autoCancel
+     * True to automatically cancel any pending changes when the row editor begins editing a new row.
+     * False to force the user to explicitly cancel the pending changes. Defaults to true.
+     */
+    autoCancel: true,
+
+    /**
+     * @cfg {Number} clicksToMoveEditor
+     * The number of clicks to move the row editor to a new row while it is visible and actively editing another row.
+     * This will default to the same value as {@link Ext.grid.plugin.Editing#clicksToEdit clicksToEdit}.
+     */
+
+    /**
+     * @cfg {Boolean} errorSummary
+     * True to show a {@link Ext.tip.ToolTip tooltip} that summarizes all validation errors present
+     * in the row editor. Set to false to prevent the tooltip from showing. Defaults to true.
+     */
+    errorSummary: true,
+
+    constructor: function() {
+        var me = this;
+
+        me.callParent(arguments);
+
+        if (!me.clicksToMoveEditor) {
+            me.clicksToMoveEditor = me.clicksToEdit;
+        }
+
+        me.autoCancel = !!me.autoCancel;
+    },
+
+    init: function(grid) {
+        this.callParent([grid]);
+    },
+
+    /**
+     * @private
+     * AbstractComponent calls destroy on all its plugins at destroy time.
+     */
+    destroy: function() {
+        var me = this;
+        Ext.destroy(me.editor);
+        me.callParent(arguments);
+    },
+
+    /**
+     * Starts editing the specified record, using the specified Column definition to define which field is being edited.
+     * @param {Ext.data.Model} record The Store data record which backs the row to be edited.
+     * @param {Ext.data.Model} columnHeader The Column object defining the column to be edited.
+     * @return `true` if editing was started, `false` otherwise.
+     */
+    startEdit: function(record, columnHeader) {
+        var me = this,
+            editor = me.getEditor();
+
+        if ((me.callParent(arguments) !== false) && (editor.beforeEdit() !== false)) {
+            editor.startEdit(me.context.record, me.context.column);
+            return true;
+        }
+        return false;
+    },
+
+    // private
+    cancelEdit: function() {
+        var me = this;
+
+        if (me.editing) {
+            me.getEditor().cancelEdit();
+            me.callParent(arguments);
+        }
+    },
+
+    // private
+    completeEdit: function() {
+        var me = this;
+
+        if (me.editing && me.validateEdit()) {
+            me.editing = false;
+            me.fireEvent('edit', me, me.context);
+        }
+    },
+
+    // private
+    validateEdit: function() {
+        var me             = this,
+            editor         = me.editor,
+            context        = me.context,
+            record         = context.record,
+            newValues      = {},
+            originalValues = {},
+            editors        = editor.items.items,
+            e,
+            eLen           = editors.length,
+            name, item;
+
+        for (e = 0; e < eLen; e++) {
+            item = editors[e];
+            name = item.name;
+
+            newValues[name]      = item.getValue();
+            originalValues[name] = record.get(name);
+        }
+
+        Ext.apply(context, {
+            newValues      : newValues,
+            originalValues : originalValues
+        });
+
+        return me.callParent(arguments) && me.getEditor().completeEdit();
+    },
+
+    // private
+    getEditor: function() {
+        var me = this;
+
+        if (!me.editor) {
+            me.editor = me.initEditor();
+        }
+        return me.editor;
+    },
+
+    // private
+    initEditor: function() {
+        var me       = this,
+            grid     = me.grid,
+            view     = me.view,
+            headerCt = grid.headerCt,
+            btns     = ['saveBtnText', 'cancelBtnText', 'errorsText', 'dirtyText'],
+            b,
+            bLen     = btns.length,
+            cfg      = {
+                autoCancel: me.autoCancel,
+                errorSummary: me.errorSummary,
+                fields: headerCt.getGridColumns(),
+                hidden: true,
+            
+                // keep a reference..
+                editingPlugin: me,
+                renderTo: view.el
+            },
+            item;
+
+        for (b = 0; b < bLen; b++) {
+            item = btns[b];
+
+            if (Ext.isDefined(me[item])) {
+                cfg[item] = me[item];
+            }
+        }
+
+        return Ext.create('Ext.grid.RowEditor', cfg);
+    },
+
+    // private
+    initEditTriggers: function() {
+        var me = this,
+            moveEditorEvent = me.clicksToMoveEditor === 1 ? 'click' : 'dblclick';
+
+        me.callParent(arguments);
+
+        if (me.clicksToMoveEditor !== me.clicksToEdit) {
+            me.mon(me.view, 'cell' + moveEditorEvent, me.moveEditorByClick, me);
+        }
+    },
+    
+    addHeaderEvents: function(){
+        var me = this;
+        me.callParent();
+        
+        me.mon(me.grid.headerCt, {
+            scope: me,
+            columnresize: me.onColumnResize,
+            columnhide: me.onColumnHide,
+            columnshow: me.onColumnShow,
+            columnmove: me.onColumnMove
+        });
+    },
+
+    startEditByClick: function() {
+        var me = this;
+        if (!me.editing || me.clicksToMoveEditor === me.clicksToEdit) {
+            me.callParent(arguments);
+        }
+    },
+
+    moveEditorByClick: function() {
+        var me = this;
+        if (me.editing) {
+            me.superclass.onCellClick.apply(me, arguments);
+        }
+    },
+    
+    // private
+    onColumnAdd: function(ct, column) {
+        if (column.isHeader) {
+            var me = this,
+                editor;
+
+            me.initFieldAccessors(column);
+
+            // Only inform the editor about a new column if the editor has already been instantiated,
+            // so do not use getEditor which instantiates the editor if not present.
+            editor = me.editor;
+            if (editor && editor.onColumnAdd) {
+                editor.onColumnAdd(column);
+            }
+        }
+    },
+
+    // private
+    onColumnRemove: function(ct, column) {
+        if (column.isHeader) {
+            var me = this,
+                editor = me.getEditor();
+
+            if (editor && editor.onColumnRemove) {
+                editor.onColumnRemove(column);
+            }
+            me.removeFieldAccessors(column);
+        }
+    },
+
+    // private
+    onColumnResize: function(ct, column, width) {
+        if (column.isHeader) {
+            var me = this,
+                editor = me.getEditor();
+
+            if (editor && editor.onColumnResize) {
+                editor.onColumnResize(column, width);
+            }
+        }
+    },
+
+    // private
+    onColumnHide: function(ct, column) {
+        // no isHeader check here since its already a columnhide event.
+        var me = this,
+            editor = me.getEditor();
+
+        if (editor && editor.onColumnHide) {
+            editor.onColumnHide(column);
+        }
+    },
+
+    // private
+    onColumnShow: function(ct, column) {
+        // no isHeader check here since its already a columnshow event.
+        var me = this,
+            editor = me.getEditor();
+
+        if (editor && editor.onColumnShow) {
+            editor.onColumnShow(column);
+        }
+    },
+
+    // private
+    onColumnMove: function(ct, column, fromIdx, toIdx) {
+        // no isHeader check here since its already a columnmove event.
+        var me = this,
+            editor = me.getEditor();
+
+        if (editor && editor.onColumnMove) {
+            editor.onColumnMove(column, fromIdx, toIdx);
+        }
+    },
+
+    // private
+    setColumnField: function(column, field) {
+        var me = this,
+            editor = me.getEditor();
+            
+        editor.removeField(column);
+        me.callParent(arguments);
+        me.getEditor().setField(column);
+    }
+});