extjs-rails 4.1.0.alpha1

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

@@ -0,0 +1,393 @@
+/**
+ * @author Aaron Conran
+ * @docauthor Ed Spencer
+ *
+ * Grids are an excellent way of showing large amounts of tabular data on the client side. Essentially a supercharged
+ * `<table>`, GridPanel makes it easy to fetch, sort and filter large amounts of data.
+ *
+ * Grids are composed of two main pieces - a {@link Ext.data.Store Store} full of data and a set of columns to render.
+ *
+ * ## Basic GridPanel
+ *
+ *     @example
+ *     Ext.create('Ext.data.Store', {
+ *         storeId:'simpsonsStore',
+ *         fields:['name', 'email', 'phone'],
+ *         data:{'items':[
+ *             { '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"  }
+ *         ]},
+ *         proxy: {
+ *             type: 'memory',
+ *             reader: {
+ *                 type: 'json',
+ *                 root: 'items'
+ *             }
+ *         }
+ *     });
+ *
+ *     Ext.create('Ext.grid.Panel', {
+ *         title: 'Simpsons',
+ *         store: Ext.data.StoreManager.lookup('simpsonsStore'),
+ *         columns: [
+ *             { header: 'Name',  dataIndex: 'name' },
+ *             { header: 'Email', dataIndex: 'email', flex: 1 },
+ *             { header: 'Phone', dataIndex: 'phone' }
+ *         ],
+ *         height: 200,
+ *         width: 400,
+ *         renderTo: Ext.getBody()
+ *     });
+ *
+ * The code above produces a simple grid with three columns. We specified a Store which will load JSON data inline.
+ * In most apps we would be placing the grid inside another container and wouldn't need to use the
+ * {@link #height}, {@link #width} and {@link #renderTo} configurations but they are included here to make it easy to get
+ * up and running.
+ *
+ * The grid we created above will contain a header bar with a title ('Simpsons'), a row of column headers directly underneath
+ * and finally the grid rows under the headers.
+ *
+ * ## Configuring columns
+ *
+ * By default, each column is sortable and will toggle between ASC and DESC sorting when you click on its header. Each
+ * column header is also reorderable by default, and each gains a drop-down menu with options to hide and show columns.
+ * It's easy to configure each column - here we use the same example as above and just modify the columns config:
+ *
+ *     columns: [
+ *         {
+ *             header: 'Name',
+ *             dataIndex: 'name',
+ *             sortable: false,
+ *             hideable: false,
+ *             flex: 1
+ *         },
+ *         {
+ *             header: 'Email',
+ *             dataIndex: 'email',
+ *             hidden: true
+ *         },
+ *         {
+ *             header: 'Phone',
+ *             dataIndex: 'phone',
+ *             width: 100
+ *         }
+ *     ]
+ *
+ * We turned off sorting and hiding on the 'Name' column so clicking its header now has no effect. We also made the Email
+ * column hidden by default (it can be shown again by using the menu on any other column). We also set the Phone column to
+ * a fixed with of 100px and flexed the Name column, which means it takes up all remaining width after the other columns
+ * have been accounted for. See the {@link Ext.grid.column.Column column docs} for more details.
+ *
+ * ## Renderers
+ *
+ * As well as customizing columns, it's easy to alter the rendering of individual cells using renderers. A renderer is
+ * tied to a particular column and is passed the value that would be rendered into each cell in that column. For example,
+ * we could define a renderer function for the email column to turn each email address into a mailto link:
+ *
+ *     columns: [
+ *         {
+ *             header: 'Email',
+ *             dataIndex: 'email',
+ *             renderer: function(value) {
+ *                 return Ext.String.format('<a href="mailto:{0}">{1}</a>', value, value);
+ *             }
+ *         }
+ *     ]
+ *
+ * See the {@link Ext.grid.column.Column column docs} for more information on renderers.
+ *
+ * ## Selection Models
+ *
+ * Sometimes all you want is to render data onto the screen for viewing, but usually it's necessary to interact with or
+ * update that data. Grids use a concept called a Selection Model, which is simply a mechanism for selecting some part of
+ * the data in the grid. The two main types of Selection Model are RowSelectionModel, where entire rows are selected, and
+ * CellSelectionModel, where individual cells are selected.
+ *
+ * Grids use a Row Selection Model by default, but this is easy to customise like so:
+ *
+ *     Ext.create('Ext.grid.Panel', {
+ *         selType: 'cellmodel',
+ *         store: ...
+ *     });
+ *
+ * Specifying the `cellmodel` changes a couple of things. Firstly, clicking on a cell now
+ * selects just that cell (using a {@link Ext.selection.RowModel rowmodel} will select the entire row), and secondly the
+ * keyboard navigation will walk from cell to cell instead of row to row. Cell-based selection models are usually used in
+ * conjunction with editing.
+ *
+ * ## Editing
+ *
+ * Grid has built-in support for in-line editing. There are two chief editing modes - cell editing and row editing. Cell
+ * editing is easy to add to your existing column setup - here we'll just modify the example above to include an editor
+ * on both the name and the email columns:
+ *
+ *     Ext.create('Ext.grid.Panel', {
+ *         title: 'Simpsons',
+ *         store: Ext.data.StoreManager.lookup('simpsonsStore'),
+ *         columns: [
+ *             { header: 'Name',  dataIndex: 'name', field: 'textfield' },
+ *             { header: 'Email', dataIndex: 'email', flex: 1,
+ *                 field: {
+ *                     xtype: 'textfield',
+ *                     allowBlank: false
+ *                 }
+ *             },
+ *             { header: 'Phone', dataIndex: 'phone' }
+ *         ],
+ *         selType: 'cellmodel',
+ *         plugins: [
+ *             Ext.create('Ext.grid.plugin.CellEditing', {
+ *                 clicksToEdit: 1
+ *             })
+ *         ],
+ *         height: 200,
+ *         width: 400,
+ *         renderTo: Ext.getBody()
+ *     });
+ *
+ * This requires a little explanation. We're passing in {@link #store store} and {@link #columns columns} as normal, but
+ * this time we've also specified a {@link Ext.grid.column.Column#field field} on two of our columns. For the Name column
+ * we just want a default textfield to edit the value, so we specify 'textfield'. For the Email column we customized the
+ * editor slightly by passing allowBlank: false, which will provide inline validation.
+ *
+ * To support cell editing, we also specified that the grid should use the 'cellmodel' {@link #selType}, and created an
+ * instance of the {@link Ext.grid.plugin.CellEditing CellEditing plugin}, which we configured to activate each editor after a
+ * single click.
+ *
+ * ## Row Editing
+ *
+ * The other type of editing is row-based editing, using the RowEditor component. This enables you to edit an entire row
+ * at a time, rather than editing cell by cell. Row Editing works in exactly the same way as cell editing, all we need to
+ * do is change the plugin type to {@link Ext.grid.plugin.RowEditing}, and set the selType to 'rowmodel':
+ *
+ *     Ext.create('Ext.grid.Panel', {
+ *         title: 'Simpsons',
+ *         store: Ext.data.StoreManager.lookup('simpsonsStore'),
+ *         columns: [
+ *             { header: 'Name',  dataIndex: 'name', field: 'textfield' },
+ *             { header: 'Email', dataIndex: 'email', flex:1,
+ *                 field: {
+ *                     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()
+ *     });
+ *
+ * Again we passed some configuration to our {@link Ext.grid.plugin.RowEditing} plugin, and now when we click each row a row
+ * editor will appear and enable us to edit each of the columns we have specified an editor for.
+ *
+ * ## Sorting & Filtering
+ *
+ * Every grid is attached to a {@link Ext.data.Store Store}, which provides multi-sort and filtering capabilities. It's
+ * easy to set up a grid to be sorted from the start:
+ *
+ *     var myGrid = Ext.create('Ext.grid.Panel', {
+ *         store: {
+ *             fields: ['name', 'email', 'phone'],
+ *             sorters: ['name', 'phone']
+ *         },
+ *         columns: [
+ *             { text: 'Name',  dataIndex: 'name' },
+ *             { text: 'Email', dataIndex: 'email' }
+ *         ]
+ *     });
+ *
+ * Sorting at run time is easily accomplished by simply clicking each column header. If you need to perform sorting on
+ * more than one field at run time it's easy to do so by adding new sorters to the store:
+ *
+ *     myGrid.store.sort([
+ *         { property: 'name',  direction: 'ASC' },
+ *         { property: 'email', direction: 'DESC' }
+ *     ]);
+ *
+ * See {@link Ext.data.Store} for examples of filtering.
+ *
+ * ## Grouping
+ *
+ * Grid supports the grouping of rows by any field. For example if we had a set of employee records, we might want to
+ * group by the department that each employee works in. Here's how we might set that up:
+ *
+ *     @example
+ *     var store = Ext.create('Ext.data.Store', {
+ *         storeId:'employeeStore',
+ *         fields:['name', 'seniority', 'department'],
+ *         groupField: 'department',
+ *         data: {'employees':[
+ *             { "name": "Michael Scott",  "seniority": 7, "department": "Management" },
+ *             { "name": "Dwight Schrute", "seniority": 2, "department": "Sales" },
+ *             { "name": "Jim Halpert",    "seniority": 3, "department": "Sales" },
+ *             { "name": "Kevin Malone",   "seniority": 4, "department": "Accounting" },
+ *             { "name": "Angela Martin",  "seniority": 5, "department": "Accounting" }
+ *         ]},
+ *         proxy: {
+ *             type: 'memory',
+ *             reader: {
+ *                 type: 'json',
+ *                 root: 'employees'
+ *             }
+ *         }
+ *     });
+ *
+ *     Ext.create('Ext.grid.Panel', {
+ *         title: 'Employees',
+ *         store: Ext.data.StoreManager.lookup('employeeStore'),
+ *         columns: [
+ *             { header: 'Name',     dataIndex: 'name' },
+ *             { header: 'Seniority', dataIndex: 'seniority' }
+ *         ],
+ *         features: [{ftype:'grouping'}],
+ *         width: 200,
+ *         height: 275,
+ *         renderTo: Ext.getBody()
+ *     });
+ *
+ * ## Infinite Scrolling
+ *
+ * Grid supports infinite scrolling as an alternative to using a paging toolbar. Your users can scroll through thousands
+ * of records without the performance penalties of renderering all the records on screen at once. The grid should be bound
+ * to a *buffered* store with a pageSize specified.
+ *
+ * The number of rows rendered outside the visible area, and the buffering of pages of data from the remote server for
+ * immediate rendering upon scroll can be controlled by configuring the {@link Ext.grid.PagingScroller #verticalScroller}.
+ *
+ * You can tell it to create a larger table to provide more scrolling before a refresh is needed, and also to keep more pages
+ * of records in memory for faster refreshing when scrolling.
+ *
+ *     var myStore = Ext.create('Ext.data.Store', {
+ *         // ...
+ *         buffered: true,
+ *         pageSize: 100,
+ *         // ...
+ *     });
+ *
+ *     var grid = Ext.create('Ext.grid.Panel', {
+ *         // ...
+ *         autoLoad: true,
+ *         verticalScroller: {
+ *             trailingBufferZone: 200,  // Keep 200 records buffered in memory behind scroll
+ *             leadingBufferZone: 5000   // Keep 5000 records buffered in memory ahead of scroll
+ *         },
+ *         // ...
+ *     });
+ *
+ * ## Paging
+ *
+ * Grid supports paging through large sets of data via a PagingToolbar or PagingGridScroller (see the Infinite Scrolling section above).
+ * To leverage paging via a toolbar or scroller, you need to set a pageSize configuration on the Store.
+ *
+ *     @example
+ *     var itemsPerPage = 2;   // set the number of items you want per page
+ *
+ *     var store = Ext.create('Ext.data.Store', {
+ *         id:'simpsonsStore',
+ *         autoLoad: false,
+ *         fields:['name', 'email', 'phone'],
+ *         pageSize: itemsPerPage, // items per page
+ *         proxy: {
+ *             type: 'ajax',
+ *             url: 'pagingstore.js',  // url that will load data with respect to start and limit params
+ *             reader: {
+ *                 type: 'json',
+ *                 root: 'items',
+ *                 totalProperty: 'total'
+ *             }
+ *         }
+ *     });
+ *
+ *     // specify the page you want to load
+ *     store.loadPage(1);
+ *
+ *     Ext.create('Ext.grid.Panel', {
+ *         title: 'Simpsons',
+ *         store: store,
+ *         columns: [
+ *             {header: 'Name',  dataIndex: 'name'},
+ *             {header: 'Email', dataIndex: 'email', flex:1},
+ *             {header: 'Phone', dataIndex: 'phone'}
+ *         ],
+ *         width: 400,
+ *         height: 125,
+ *         dockedItems: [{
+ *             xtype: 'pagingtoolbar',
+ *             store: store,   // same store GridPanel is using
+ *             dock: 'bottom',
+ *             displayInfo: true
+ *         }],
+ *         renderTo: Ext.getBody()
+ *     });
+ *     
+ * ## State saving
+ * 
+ * When configured {@link #stateful}, grids save their column state (order and width) encapsulated within the default
+ * Panel state of changed width and height and collapsed/expanded state.
+ *
+ * Each {@link @columns column} of the grid may be configured with a {@link Ext.grid.column.Column#stateId stateId} which
+ * identifies that column locally within the grid.
+ */
+Ext.define('Ext.grid.Panel', {
+    extend: 'Ext.panel.Table',
+    requires: ['Ext.grid.View'],
+    alias: ['widget.gridpanel', 'widget.grid'],
+    alternateClassName: ['Ext.list.ListView', 'Ext.ListView', 'Ext.grid.GridPanel'],
+    viewType: 'gridview',
+
+    lockable: false,
+
+    // Required for the Lockable Mixin. These are the configurations which will be copied to the
+    // normal and locked sub tablepanels
+    bothCfgCopy: [
+        'invalidateScrollerOnRefresh',
+        'hideHeaders',
+        'enableColumnHide',
+        'enableColumnMove',
+        'enableColumnResize',
+        'sortableColumns'
+    ],
+    normalCfgCopy: [ 
+        'verticalScroller', 
+        'verticalScrollDock', 
+        'verticalScrollerType', 
+        'scroll'
+    ],
+    lockedCfgCopy: [],
+
+    /**
+     * @cfg {Boolean} rowLines False to remove row line styling
+     */
+    rowLines: true
+
+    // Columns config is required in Grid
+    /**
+     * @cfg {Ext.grid.column.Column[]/Object} columns (required)
+     * @inheritdoc
+     */
+
+    /**
+     * @event reconfigure
+     * Fires after a reconfigure.
+     * @param {Ext.grid.Panel} this
+     * @param {Ext.data.Store} store The store that was passed to the {@link #method-reconfigure} method
+     * @param {Object[]} columns The column configs that were passed to the {@link #method-reconfigure} method
+     */
+
+    /**
+     * @method reconfigure
+     * Reconfigures the grid with a new store/columns. Either the store or the columns can be omitted if you don't wish
+     * to change them.
+     * @param {Ext.data.Store} store (Optional) The new store.
+     * @param {Object[]} columns (Optional) An array of column configs
+     */
+});

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

@@ -0,0 +1,731 @@
+// Currently has the following issues:
+// - Does not handle postEditValue
+// - Fields without editors need to sync with their values in Store
+// - starting to edit another record while already editing and dirty should probably prevent it
+// - aggregating validation messages
+// - tabIndex is not managed bc we leave elements in dom, and simply move via positioning
+// - layout issues when changing sizes/width while hidden (layout bug)
+
+/**
+ * Internal utility class used to provide row editing functionality. For developers, they should use
+ * the RowEditing plugin to use this functionality with a grid.
+ *
+ * @private
+ */
+Ext.define('Ext.grid.RowEditor', {
+    extend: 'Ext.form.Panel',
+    requires: [
+        'Ext.tip.ToolTip',
+        'Ext.util.HashMap',
+        'Ext.util.KeyNav'
+    ],
+
+    //<locale>
+    saveBtnText  : 'Update',
+    //</locale>
+    //<locale>
+    cancelBtnText: 'Cancel',
+    //</locale>
+    //<locale>
+    errorsText: 'Errors',
+    //</locale>
+    //<locale>
+    dirtyText: 'You need to commit or cancel your changes',
+    //</locale>
+
+    lastScrollLeft: 0,
+    lastScrollTop: 0,
+
+    border: false,
+    
+    // Change the hideMode to offsets so that we get accurate measurements when
+    // the roweditor is hidden for laying out things like a TriggerField.
+    hideMode: 'offsets',
+
+    initComponent: function() {
+        var me = this,
+            form;
+
+        me.cls = Ext.baseCSSPrefix + 'grid-row-editor';
+
+        me.layout = {
+            type: 'hbox',
+            align: 'middle'
+        };
+
+        // Maintain field-to-column mapping
+        // It's easy to get a field from a column, but not vice versa
+        me.columns = new Ext.util.HashMap();
+        me.columns.getKey = function(columnHeader) {
+            var f;
+            if (columnHeader.getEditor) {
+                f = columnHeader.getEditor();
+                if (f) {
+                    return f.id;
+                }
+            }
+            return columnHeader.id;
+        };
+        me.mon(me.columns, {
+            add: me.onFieldAdd,
+            remove: me.onFieldRemove,
+            replace: me.onFieldReplace,
+            scope: me
+        });
+
+        me.callParent(arguments);
+
+        if (me.fields) {
+            me.setField(me.fields);
+            delete me.fields;
+        }
+
+        form = me.getForm();
+        form.trackResetOnLoad = true;
+    },
+
+    onFieldChange: function() {
+        var me = this,
+            form = me.getForm(),
+            valid = form.isValid();
+        if (me.errorSummary && me.isVisible()) {
+            me[valid ? 'hideToolTip' : 'showToolTip']();
+        }
+        if (me.floatingButtons) {
+            me.floatingButtons.child('#update').setDisabled(!valid);
+        }
+        me.isValid = valid;
+    },
+
+    afterRender: function() {
+        var me = this,
+            plugin = me.editingPlugin;
+
+        me.callParent(arguments);
+        me.mon(me.renderTo, 'scroll', me.onCtScroll, me, { buffer: 100 });
+
+        // Prevent from bubbling click events to the grid view
+        me.mon(me.el, {
+            click: Ext.emptyFn,
+            stopPropagation: true
+        });
+
+        me.el.swallowEvent([
+            'keypress',
+            'keydown'
+        ]);
+
+        me.keyNav = new Ext.util.KeyNav(me.el, {
+            enter: plugin.completeEdit,
+            esc: plugin.onEscKey,
+            scope: plugin
+        });
+
+        me.mon(plugin.view, {
+            beforerefresh: me.onBeforeViewRefresh,
+            refresh: me.onViewRefresh,
+            scope: me
+        });
+    },
+
+    onBeforeViewRefresh: function(view) {
+        var me = this,
+            viewDom = view.el.dom;
+
+        if (me.el.dom.parentNode === viewDom) {
+            viewDom.removeChild(me.el.dom);
+        }
+    },
+
+    onViewRefresh: function(view) {
+        var me = this,
+            viewDom = view.el.dom,
+            context = me.context,
+            idx;
+
+        viewDom.appendChild(me.el.dom);
+
+        // Recover our row node after a view refresh
+        if (context && (idx = context.store.indexOf(context.record)) >= 0) {
+            context.row = view.getNode(idx);
+            me.reposition();
+            if (me.tooltip && me.tooltip.isVisible()) {
+                me.tooltip.setTarget(context.row);
+            }
+        } else {
+            me.editingPlugin.cancelEdit();
+        }
+    },
+
+    onCtScroll: function(e, target) {
+        var me = this,
+            scrollTop  = target.scrollTop,
+            scrollLeft = target.scrollLeft;
+
+        if (scrollTop !== me.lastScrollTop) {
+            me.lastScrollTop = scrollTop;
+            if ((me.tooltip && me.tooltip.isVisible()) || me.hiddenTip) {
+                me.repositionTip();
+            }
+        }
+        if (scrollLeft !== me.lastScrollLeft) {
+            me.lastScrollLeft = scrollLeft;
+            me.reposition();
+        }
+    },
+
+    onColumnAdd: function(column) {
+        if (!column.isGroupHeader) {
+            this.setField(column);
+        }
+    },
+
+    onColumnRemove: function(column) {
+        this.columns.remove(column);
+    },
+
+    onColumnResize: function(column, width) {
+        if (!column.isGroupHeader) {
+            column.getEditor().setWidth(width - 2);
+            if (this.isVisible()) {
+                this.reposition();
+            }
+        }
+    },
+
+    onColumnHide: function(column) {
+        if (!column.isGroupHeader) {
+            column.getEditor().hide();
+            if (this.isVisible()) {
+                this.reposition();
+            }
+        }
+    },
+
+    onColumnShow: function(column) {
+        var field = column.getEditor();
+        field.setWidth(column.getWidth() - 2).show();
+        if (this.isVisible()) {
+            this.reposition();
+        }
+    },
+
+    onColumnMove: function(column, fromIdx, toIdx) {
+        if (!column.isGroupHeader) {
+            var field = column.getEditor();
+            if (this.items.indexOf(field) != toIdx) {
+                this.move(fromIdx, toIdx);
+            }
+        }
+    },
+
+    onFieldAdd: function(map, fieldId, column) {
+        var me = this,
+            colIdx,
+            field;
+
+        if (!column.isGroupHeader) {
+            colIdx = me.editingPlugin.grid.headerCt.getHeaderIndex(column);
+            field = column.getEditor({ xtype: 'displayfield' });
+            me.insert(colIdx, field);
+        }
+    },
+
+    onFieldRemove: function(map, fieldId, column) {
+        var me = this,
+            field,
+            fieldEl;
+
+        if (!column.isGroupHeader) {
+            field = column.getEditor();
+            fieldEl = field.el;
+            me.remove(field, false);
+            if (fieldEl) {
+                fieldEl.remove();
+            }
+        }
+    },
+
+    onFieldReplace: function(map, fieldId, column, oldColumn) {
+        this.onFieldRemove(map, fieldId, oldColumn);
+    },
+
+    clearFields: function() {
+        var map = this.columns,
+            key;
+
+        for (key in map) {
+            if (map.hasOwnProperty(key)) {
+                map.removeAtKey(key);
+            }
+        }
+    },
+
+    getFloatingButtons: function() {
+        var me = this,
+            cssPrefix = Ext.baseCSSPrefix,
+            btnsCss = cssPrefix + 'grid-row-editor-buttons',
+            plugin = me.editingPlugin,
+            btns;
+
+        if (!me.floatingButtons) {
+            btns = me.floatingButtons = new Ext.Container({
+                renderTpl: [
+                    '<div class="{baseCls}-ml"></div>',
+                    '<div class="{baseCls}-mr"></div>',
+                    '<div class="{baseCls}-bl"></div>',
+                    '<div class="{baseCls}-br"></div>',
+                    '<div class="{baseCls}-bc"></div>',
+                    '{%this.renderContainer(out,values)%}'
+                ],
+                width: 200,
+                renderTo: me.el,
+                baseCls: btnsCss,
+                layout: {
+                    type: 'hbox',
+                    align: 'middle'
+                },
+                defaults: {
+                    flex: 1,
+                    margins: '0 1 0 1'
+                },
+                items: [{
+                    itemId: 'update',
+                    xtype: 'button',
+                    handler: plugin.completeEdit,
+                    scope: plugin,
+                    text: me.saveBtnText,
+                    disabled: !me.isValid,
+                    minWidth: Ext.panel.Panel.prototype.minButtonWidth
+                }, {
+                    xtype: 'button',
+                    handler: plugin.cancelEdit,
+                    scope: plugin,
+                    text: me.cancelBtnText,
+                    minWidth: Ext.panel.Panel.prototype.minButtonWidth
+                }]
+            });
+
+            // Prevent from bubbling click events to the grid view
+            me.mon(btns.el, {
+                // BrowserBug: Opera 11.01
+                //   causes the view to scroll when a button is focused from mousedown
+                mousedown: Ext.emptyFn,
+                click: Ext.emptyFn,
+                stopEvent: true
+            });
+        }
+        return me.floatingButtons;
+    },
+
+    reposition: function(animateConfig) {
+        var me = this,
+            context = me.context,
+            row = context && Ext.get(context.row),
+            btns = me.getFloatingButtons(),
+            btnEl = btns.el,
+            grid = me.editingPlugin.grid,
+            viewEl = grid.view.el,
+
+            // always get data from ColumnModel as its what drives
+            // the GridView's sizing
+            mainBodyWidth = grid.headerCt.getFullWidth(),
+            scrollerWidth = grid.getWidth(),
+
+            // use the minimum as the columns may not fill up the entire grid
+            // width
+            width = Math.min(mainBodyWidth, scrollerWidth),
+            scrollLeft = grid.view.el.dom.scrollLeft,
+            btnWidth = btns.getWidth(),
+            left = (width - btnWidth) / 2 + scrollLeft,
+            y, rowH, newHeight,
+
+            invalidateScroller = function() {
+                btnEl.scrollIntoView(viewEl, false);
+                if (animateConfig && animateConfig.callback) {
+                    animateConfig.callback.call(animateConfig.scope || me);
+                }
+            },
+            
+            animObj;
+
+        // need to set both top/left
+        if (row && Ext.isElement(row.dom)) {
+            // Bring our row into view if necessary, so a row editor that's already
+            // visible and animated to the row will appear smooth
+            row.scrollIntoView(viewEl, false);
+
+            // Get the y position of the row relative to its top-most static parent.
+            // offsetTop will be relative to the table, and is incorrect
+            // when mixed with certain grid features (e.g., grouping).
+            y = row.getXY()[1] - 5;
+            rowH = row.getHeight();
+            newHeight = rowH + (me.editingPlugin.grid.rowLines ? 9 : 10);
+
+            // Set editor height to match the row height
+            if (me.getHeight() != newHeight) {
+                me.setHeight(newHeight);
+                me.el.setLeft(0);
+            }
+
+            if (animateConfig) {
+                animObj = {
+                    to: {
+                        y: y
+                    },
+                    duration: animateConfig.duration || 125,
+                    listeners: {
+                        afteranimate: function() {
+                            invalidateScroller();
+                            y = row.getXY()[1] - 5;
+                        }
+                    }
+                };
+                me.el.animate(animObj);
+            } else {
+                me.el.setY(y);
+                invalidateScroller();
+            }
+        }
+        if (me.getWidth() != mainBodyWidth) {
+            me.setWidth(mainBodyWidth);
+        }
+        btnEl.setLeft(left);
+    },
+
+    getEditor: function(fieldInfo) {
+        var me = this;
+
+        if (Ext.isNumber(fieldInfo)) {
+            // Query only form fields. This just future-proofs us in case we add
+            // other components to RowEditor later on.  Don't want to mess with
+            // indices.
+            return me.query('>[isFormField]')[fieldInfo];
+        } else if (fieldInfo.isHeader && !fieldInfo.isGroupHeader) {
+            return fieldInfo.getEditor();
+        }
+    },
+
+    removeField: function(field) {
+        var me = this;
+
+        // Incase we pass a column instead, which is fine
+        field = me.getEditor(field);
+        me.mun(field, 'validitychange', me.onValidityChange, me);
+
+        // Remove field/column from our mapping, which will fire the event to
+        // remove the field from our container
+        me.columns.removeAtKey(field.id);
+        Ext.destroy(field);
+    },
+
+    setField: function(column) {
+        var me = this,
+            i,
+            length, field;
+
+        if (Ext.isArray(column)) {
+            length = column.length;
+
+            for (i = 0; i < length; i++) {
+                me.setField(column[i]);
+            }
+
+            return;
+        }
+
+        // Get a default display field if necessary
+        field = column.getEditor(null, {
+            xtype: 'displayfield',
+            // Override Field's implementation so that the default display fields will not return values. This is done because
+            // the display field will pick up column renderers from the grid.
+            getModelData: function() {
+                return null;
+            }
+        });
+        field.margins = '0 0 0 2';
+        me.mon(field, 'change', me.onFieldChange, me);
+        
+        if (me.isVisible() && me.context) {
+            if (field.is('displayfield')) {
+                me.renderColumnData(field, me.context.record, column);
+            } else {
+                field.suspendEvents();
+                field.setValue(me.context.record.get(column.dataIndex));
+                field.resumeEvents();
+            }
+        }
+
+        // Maintain mapping of fields-to-columns
+        // This will fire events that maintain our container items
+        
+        me.columns.add(field.id, column);
+        if (column.hidden) {
+            me.onColumnHide(column);
+        } else if (column.rendered) {
+            // Setting after initial render
+            me.onColumnShow(column);
+        }
+    },
+
+    loadRecord: function(record) {
+        var me     = this,
+            form   = me.getForm(),
+            fields = form.getFields(),
+            items  = fields.items,
+            length = items.length,
+            i, displayFields;
+            
+        // temporarily suspend events on form fields before loading record to prevent the fields' change events from firing
+        for (i = 0; i < length; i++) {
+            items[i].suspendEvents();
+        }
+
+        form.loadRecord(record);
+
+        for (i = 0; i < length; i++) {
+            items[i].resumeEvents();
+        }
+
+        if (me.errorSummary) {
+            if (form.isValid()) {
+                me.hideToolTip();
+            } else {
+                me.showToolTip();
+            }
+        }
+
+        // render display fields so they honor the column renderer/template
+        displayFields = me.query('>displayfield');
+        length = displayFields.length;
+
+        for (i = 0; i < length; i++) {
+            me.renderColumnData(displayFields[i], record);
+        }
+    },
+
+    renderColumnData: function(field, record, activeColumn) {
+        var me = this,
+            grid = me.editingPlugin.grid,
+            headerCt = grid.headerCt,
+            view = grid.view,
+            store = view.store,
+            column = activeColumn || me.columns.get(field.id),
+            value = record.get(column.dataIndex),
+            renderer = column.editRenderer || column.renderer,
+            metaData,
+            rowIdx,
+            colIdx;
+
+        // honor our column's renderer (TemplateHeader sets renderer for us!)
+        if (renderer) {
+            metaData = { tdCls: '', style: '' };
+            rowIdx = store.indexOf(record);
+            colIdx = headerCt.getHeaderIndex(column);
+
+            value = renderer.call(
+                column.scope || headerCt.ownerCt,
+                value,
+                metaData,
+                record,
+                rowIdx,
+                colIdx,
+                store,
+                view
+            );
+        }
+
+        field.setRawValue(value);
+        field.resetOriginalValue();
+    },
+
+    beforeEdit: function() {
+        var me = this;
+
+        if (me.isVisible() && me.errorSummary && !me.autoCancel && me.isDirty()) {
+            me.showToolTip();
+            return false;
+        }
+    },
+
+    /**
+     * Start editing the specified grid at the specified position.
+     * @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.
+     */
+    startEdit: function(record, columnHeader) {
+        var me = this,
+            grid = me.editingPlugin.grid,
+            store = grid.store,
+            context = me.context = Ext.apply(me.editingPlugin.context, {
+                view: grid.getView(),
+                store: store
+            });
+
+        // make sure our row is selected before editing
+        context.grid.getSelectionModel().select(record);
+
+        // Reload the record data
+        me.loadRecord(record);
+
+        if (!me.isVisible()) {
+            me.show();
+            me.focusContextCell();
+        } else {
+            me.reposition({
+                callback: this.focusContextCell
+            });
+        }
+    },
+
+    // Focus the cell on start edit based upon the current context
+    focusContextCell: function() {
+        var field = this.getEditor(this.context.colIdx);
+        if (field && field.focus) {
+            field.focus();
+        }
+    },
+
+    cancelEdit: function() {
+        var me     = this,
+            form   = me.getForm(),
+            fields = form.getFields(),
+            items  = fields.items,
+            length = items.length,
+            i;
+
+        me.hide();
+        form.clearInvalid();
+
+        // temporarily suspend events on form fields before reseting the form to prevent the fields' change events from firing
+        for (i = 0; i < length; i++) {
+            items[i].suspendEvents();
+        }
+
+        form.reset();
+
+        for (i = 0; i < length; i++) {
+            items[i].resumeEvents();
+        }
+    },
+
+    completeEdit: function() {
+        var me = this,
+            form = me.getForm();
+
+        if (!form.isValid()) {
+            return;
+        }
+
+        form.updateRecord(me.context.record);
+        me.hide();
+        return true;
+    },
+
+    onShow: function() {
+        this.callParent(arguments);
+        this.reposition();
+    },
+
+    onHide: function() {
+        var me = this;
+        me.callParent(arguments);
+        if (me.tooltip) {
+            me.hideToolTip();
+        }
+        if (me.context) {
+            me.context.view.focus();
+            me.context = null;
+        }
+    },
+
+    isDirty: function() {
+        var me = this,
+            form = me.getForm();
+        return form.isDirty();
+    },
+
+    getToolTip: function() {
+        return this.tooltip || (this.tooltip = new Ext.tip.ToolTip({
+            cls: Ext.baseCSSPrefix + 'grid-row-editor-errors',
+            title: this.errorsText,
+            autoHide: false,
+            closable: true,
+            closeAction: 'disable',
+            anchor: 'left'
+        }));
+    },
+
+    hideToolTip: function() {
+        var me = this,
+            tip = me.getToolTip();
+        if (tip.rendered) {
+            tip.disable();
+        }
+        me.hiddenTip = false;
+    },
+
+    showToolTip: function() {
+        var me = this,
+            tip = me.getToolTip(),
+            context = me.context,
+            row = Ext.get(context.row),
+            viewEl = context.grid.view.el;
+
+        tip.setTarget(row);
+        tip.showAt([-10000, -10000]);
+        tip.update(me.getErrors());
+        tip.mouseOffset = [viewEl.getWidth() - row.getWidth() + me.lastScrollLeft + 15, 0];
+        me.repositionTip();
+        tip.doLayout();
+        tip.enable();
+    },
+
+    repositionTip: function() {
+        var me = this,
+            tip = me.getToolTip(),
+            context = me.context,
+            row = Ext.get(context.row),
+            viewEl = context.grid.view.el,
+            viewHeight = viewEl.getHeight(),
+            viewTop = me.lastScrollTop,
+            viewBottom = viewTop + viewHeight,
+            rowHeight = row.getHeight(),
+            rowTop = row.dom.offsetTop,
+            rowBottom = rowTop + rowHeight;
+
+        if (rowBottom > viewTop && rowTop < viewBottom) {
+            tip.show();
+            me.hiddenTip = false;
+        } else {
+            tip.hide();
+            me.hiddenTip = true;
+        }
+    },
+
+    getErrors: function() {
+        var me        = this,
+            dirtyText = !me.autoCancel && me.isDirty() ? me.dirtyText + '<br />' : '',
+            errors    = [],
+            fields    = me.query('>[isFormField]'),
+            length    = fields.length,
+            i;
+
+        function createListItem(e) {
+            return '<li>' + e + '</li>';
+        }
+
+        for (i = 0; i < length; i++) {
+            errors = errors.concat(
+                Ext.Array.map(fields[i].getErrors(), createListItem)
+            );
+        }
+
+        return dirtyText + '<ul>' + errors.join('') + '</ul>';
+    },
+    
+    beforeDestroy: function(){
+        Ext.destroy(this.floatingButtons, this.tooltip);
+        this.callParent();    
+    }
+});