/*
|
This file is part of Ext JS 4.2
|
|
Copyright (c) 2011-2013 Sencha Inc
|
|
Contact: http://www.sencha.com/contact
|
|
GNU General Public License Usage
|
This file may be used under the terms of the GNU General Public License version 3.0 as
|
published by the Free Software Foundation and appearing in the file LICENSE included in the
|
packaging of this file.
|
|
Please review the following information to ensure the GNU General Public License version 3.0
|
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
|
|
If you are unsure which license is appropriate for your use, please contact the sales department
|
at http://www.sencha.com/contact.
|
|
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
|
*/
|
/**
|
* 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'
|
],
|
|
lockableScope: 'top',
|
|
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.
|
*/
|
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.
|
*/
|
errorSummary: true,
|
|
constructor: function() {
|
var me = this;
|
|
me.callParent(arguments);
|
|
if (!me.clicksToMoveEditor) {
|
me.clicksToMoveEditor = me.clicksToEdit;
|
}
|
|
me.autoCancel = !!me.autoCancel;
|
},
|
|
/**
|
* @private
|
* AbstractComponent calls destroy on all its plugins at destroy time.
|
*/
|
destroy: function() {
|
Ext.destroy(this.editor);
|
this.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 {Boolean} `true` if editing was started, `false` otherwise.
|
*/
|
startEdit: function(record, columnHeader) {
|
var me = this,
|
editor = me.getEditor(),
|
context;
|
|
if (editor.beforeEdit() !== false) {
|
context = me.callParent(arguments);
|
if (context) {
|
me.context = context;
|
|
// If editing one side of a lockable grid, cancel any edit on the other side.
|
if (me.lockingPartner) {
|
me.lockingPartner.cancelEdit();
|
}
|
editor.startEdit(context.record, context.column, context);
|
return true;
|
}
|
}
|
return false;
|
},
|
|
// @private
|
cancelEdit: function() {
|
var me = this;
|
|
if (me.editing) {
|
me.getEditor().cancelEdit();
|
me.callParent(arguments);
|
return;
|
}
|
// If we aren't editing, return true to allow the event to bubble
|
return true;
|
},
|
|
// @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.query('>[isFormField]'),
|
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() {
|
return new Ext.grid.RowEditor(this.initEditorConfig());
|
},
|
|
initEditorConfig: 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,
|
view: view,
|
// keep a reference..
|
editingPlugin: me
|
},
|
item;
|
|
for (b = 0; b < bLen; b++) {
|
item = btns[b];
|
|
if (Ext.isDefined(me[item])) {
|
cfg[item] = me[item];
|
}
|
}
|
return cfg;
|
},
|
|
// @private
|
initEditTriggers: function() {
|
var me = this,
|
view = me.view,
|
moveEditorEvent = me.clicksToMoveEditor === 1 ? 'click' : 'dblclick';
|
|
me.callParent(arguments);
|
|
if (me.clicksToMoveEditor !== me.clicksToEdit) {
|
me.mon(view, 'cell' + moveEditorEvent, me.moveEditorByClick, me);
|
}
|
|
view.on({
|
render: function() {
|
me.mon(me.grid.headerCt, {
|
scope: me,
|
columnresize: me.onColumnResize,
|
columnhide: me.onColumnHide,
|
columnshow: me.onColumnShow
|
});
|
},
|
single: true
|
});
|
},
|
|
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(ct, 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();
|
|
// Inject field accessors on move because if the move FROM the main headerCt and INTO a grouped header,
|
// the accessors will have been deleted but not added. They are added conditionally.
|
me.initFieldAccessors(column);
|
|
if (editor && editor.onColumnMove) {
|
// Must adjust the toIdx to account for removal if moving rightwards
|
// because RowEditor.onColumnMove just calls Container.move which does not do this.
|
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);
|
}
|
});
|
