<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-grid-plugin-RowEditing'>/**
|
</span> * 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'
|
],
|
|
<span id='Ext-grid-plugin-RowEditing-property-lockableScope'> lockableScope: 'top',
|
</span>
|
<span id='Ext-grid-plugin-RowEditing-property-editStyle'> editStyle: 'row',
|
</span>
|
<span id='Ext-grid-plugin-RowEditing-cfg-autoCancel'> /**
|
</span> * @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,
|
|
<span id='Ext-grid-plugin-RowEditing-cfg-clicksToMoveEditor'> /**
|
</span> * @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}.
|
*/
|
|
<span id='Ext-grid-plugin-RowEditing-cfg-errorSummary'> /**
|
</span> * @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,
|
|
<span id='Ext-grid-plugin-RowEditing-method-constructor'> constructor: function() {
|
</span> var me = this;
|
|
me.callParent(arguments);
|
|
if (!me.clicksToMoveEditor) {
|
me.clicksToMoveEditor = me.clicksToEdit;
|
}
|
|
me.autoCancel = !!me.autoCancel;
|
},
|
|
<span id='Ext-grid-plugin-RowEditing-method-destroy'> /**
|
</span> * @private
|
* AbstractComponent calls destroy on all its plugins at destroy time.
|
*/
|
destroy: function() {
|
Ext.destroy(this.editor);
|
this.callParent(arguments);
|
},
|
|
<span id='Ext-grid-plugin-RowEditing-method-startEdit'> /**
|
</span> * 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;
|
},
|
|
<span id='Ext-grid-plugin-RowEditing-method-cancelEdit'> // @private
|
</span> 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;
|
},
|
|
<span id='Ext-grid-plugin-RowEditing-method-completeEdit'> // @private
|
</span> completeEdit: function() {
|
var me = this;
|
|
if (me.editing && me.validateEdit()) {
|
me.editing = false;
|
me.fireEvent('edit', me, me.context);
|
}
|
},
|
|
<span id='Ext-grid-plugin-RowEditing-method-validateEdit'> // @private
|
</span> 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();
|
},
|
|
<span id='Ext-grid-plugin-RowEditing-method-getEditor'> // @private
|
</span> getEditor: function() {
|
var me = this;
|
|
if (!me.editor) {
|
me.editor = me.initEditor();
|
}
|
return me.editor;
|
},
|
|
<span id='Ext-grid-plugin-RowEditing-method-initEditor'> // @private
|
</span> initEditor: function() {
|
return new Ext.grid.RowEditor(this.initEditorConfig());
|
},
|
|
<span id='Ext-grid-plugin-RowEditing-method-initEditorConfig'> initEditorConfig: function(){
|
</span> 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;
|
},
|
|
<span id='Ext-grid-plugin-RowEditing-method-initEditTriggers'> // @private
|
</span> 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
|
});
|
},
|
|
<span id='Ext-grid-plugin-RowEditing-method-startEditByClick'> startEditByClick: function() {
|
</span> var me = this;
|
if (!me.editing || me.clicksToMoveEditor === me.clicksToEdit) {
|
me.callParent(arguments);
|
}
|
},
|
|
<span id='Ext-grid-plugin-RowEditing-method-moveEditorByClick'> moveEditorByClick: function() {
|
</span> var me = this;
|
if (me.editing) {
|
me.superclass.onCellClick.apply(me, arguments);
|
}
|
},
|
|
<span id='Ext-grid-plugin-RowEditing-method-onColumnAdd'> // @private
|
</span> 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);
|
}
|
}
|
},
|
|
<span id='Ext-grid-plugin-RowEditing-method-onColumnRemove'> // @private
|
</span> onColumnRemove: function(ct, column) {
|
if (column.isHeader) {
|
var me = this,
|
editor = me.getEditor();
|
|
if (editor && editor.onColumnRemove) {
|
editor.onColumnRemove(ct, column);
|
}
|
me.removeFieldAccessors(column);
|
}
|
},
|
|
<span id='Ext-grid-plugin-RowEditing-method-onColumnResize'> // @private
|
</span> onColumnResize: function(ct, column, width) {
|
if (column.isHeader) {
|
var me = this,
|
editor = me.getEditor();
|
|
if (editor && editor.onColumnResize) {
|
editor.onColumnResize(column, width);
|
}
|
}
|
},
|
|
<span id='Ext-grid-plugin-RowEditing-method-onColumnHide'> // @private
|
</span> 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);
|
}
|
},
|
|
<span id='Ext-grid-plugin-RowEditing-method-onColumnShow'> // @private
|
</span> 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);
|
}
|
},
|
|
<span id='Ext-grid-plugin-RowEditing-method-onColumnMove'> // @private
|
</span> 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);
|
}
|
},
|
|
<span id='Ext-grid-plugin-RowEditing-method-setColumnField'> // @private
|
</span> setColumnField: function(column, field) {
|
var me = this,
|
editor = me.getEditor();
|
|
editor.removeField(column);
|
me.callParent(arguments);
|
me.getEditor().setField(column);
|
}
|
});
|
</pre>
|
</body>
|
</html>
|
