156 lines
No EOL
7.2 KiB
HTML
156 lines
No EOL
7.2 KiB
HTML
<html><head><title>EditorGrid.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>EditorGrid.js</h1><pre class="highlighted"><code><i>/**
|
|
* @class Ext.grid.EditorGrid
|
|
* @extends Ext.grid.Grid
|
|
* Class <b>for</b> creating and editable grid.
|
|
* @param {String/HTMLElement/Ext.Element} container The element into which <b>this</b> grid will be rendered -
|
|
* The container MUST have some type of size defined <b>for</b> the grid to fill. The container will be
|
|
* automatically set to position relative <b>if</b> it isn't already.
|
|
* @param {Object} dataSource The data model to bind to
|
|
* @param {Object} colModel The column model <b>with</b> info about <b>this</b> grid's columns
|
|
*/</i>
|
|
Ext.grid.EditorGrid = <b>function</b>(container, config){
|
|
Ext.grid.EditorGrid.superclass.constructor.call(<b>this</b>, container, config);
|
|
<b>this</b>.container.addClass("xedit-grid");
|
|
|
|
<b>if</b>(!<b>this</b>.selModel){
|
|
<b>this</b>.selModel = <b>new</b> Ext.grid.CellSelectionModel();
|
|
}
|
|
|
|
<b>this</b>.activeEditor = null;
|
|
|
|
<b>this</b>.addEvents({
|
|
<i>/**
|
|
* @event beforeedit
|
|
* Fires before cell editing is triggered. The edit event object has the following properties <br />
|
|
* <ul style="padding:5px;padding-left:16px;">
|
|
* <li>grid - This grid</li>
|
|
* <li>record - The record being edited</li>
|
|
* <li>field - The field name being edited</li>
|
|
* <li>value - The value <b>for</b> the field being edited.</li>
|
|
* <li>row - The grid row index</li>
|
|
* <li>column - The grid column index</li>
|
|
* <li>cancel - Set <b>this</b> to true to cancel the edit or <b>return</b> false from your handler.</li>
|
|
* </ul>
|
|
* @param {Object} e An edit event (see above <b>for</b> description)
|
|
*/</i>
|
|
"beforeedit" : true,
|
|
<i>/**
|
|
* @event afteredit
|
|
* Fires after a cell is edited. <br />
|
|
* <ul style="padding:5px;padding-left:16px;">
|
|
* <li>grid - This grid</li>
|
|
* <li>record - The record being edited</li>
|
|
* <li>field - The field name being edited</li>
|
|
* <li>value - The value being set</li>
|
|
* <li>originalValue - The original value <b>for</b> the field, before the edit.</li>
|
|
* <li>row - The grid row index</li>
|
|
* <li>column - The grid column index</li>
|
|
* </ul>
|
|
* @param {Object} e An edit event (see above <b>for</b> description)
|
|
*/</i>
|
|
"afteredit" : true,
|
|
<i>/**
|
|
* @event validateedit
|
|
* Fires after a cell is edited, but before the value is set <b>in</b> the record. Return false
|
|
* to cancel the change. The edit event object has the following properties <br />
|
|
* <ul style="padding:5px;padding-left:16px;">
|
|
* <li>grid - This grid</li>
|
|
* <li>record - The record being edited</li>
|
|
* <li>field - The field name being edited</li>
|
|
* <li>value - The value being set</li>
|
|
* <li>originalValue - The original value <b>for</b> the field, before the edit.</li>
|
|
* <li>row - The grid row index</li>
|
|
* <li>column - The grid column index</li>
|
|
* <li>cancel - Set <b>this</b> to true to cancel the edit or <b>return</b> false from your handler.</li>
|
|
* </ul>
|
|
* @param {Object} e An edit event (see above <b>for</b> description)
|
|
*/</i>
|
|
"validateedit" : true
|
|
});
|
|
<b>this</b>.on("bodyscroll", <b>this</b>.stopEditing, <b>this</b>);
|
|
<b>this</b>.on(<b>this</b>.clicksToEdit == 1 ? "cellclick" : "celldblclick", <b>this</b>.onCellDblClick, <b>this</b>);
|
|
};
|
|
|
|
Ext.extend(Ext.grid.EditorGrid, Ext.grid.Grid, {
|
|
isEditor : true,
|
|
clicksToEdit: 2,
|
|
trackMouseOver: false, <i>// causes very odd FF errors</i>
|
|
|
|
onCellDblClick : <b>function</b>(g, row, col){
|
|
<b>this</b>.startEditing(row, col);
|
|
},
|
|
|
|
onEditComplete : <b>function</b>(ed, value, startValue){
|
|
<b>this</b>.editing = false;
|
|
<b>this</b>.activeEditor = null;
|
|
ed.un("specialkey", <b>this</b>.selModel.onEditorKey, <b>this</b>.selModel);
|
|
<b>if</b>(String(value) != String(startValue)){
|
|
<b>var</b> r = ed.record;
|
|
<b>var</b> field = <b>this</b>.colModel.getDataIndex(ed.col);
|
|
<b>var</b> e = {
|
|
grid: <b>this</b>,
|
|
record: r,
|
|
field: field,
|
|
originalValue: startValue,
|
|
value: value,
|
|
row: ed.row,
|
|
column: ed.col,
|
|
cancel:false
|
|
};
|
|
<b>if</b>(this.fireEvent("validateedit", e) !== false && !e.cancel){
|
|
r.set(field, e.value);
|
|
<b>delete</b> e.cancel;
|
|
<b>this</b>.fireEvent("afteredit", e);
|
|
}
|
|
}
|
|
<b>this</b>.view.focusCell(ed.row, ed.col);
|
|
},
|
|
|
|
<i>/**
|
|
* Starts editing the specified <b>for</b> the specified row/column
|
|
* @param {Number} rowIndex
|
|
* @param {Number} colIndex
|
|
*/</i>
|
|
startEditing : <b>function</b>(row, col){
|
|
<b>this</b>.stopEditing();
|
|
<b>if</b>(this.colModel.isCellEditable(col, row)){
|
|
<b>this</b>.view.focusCell(row, col);
|
|
<b>var</b> r = <b>this</b>.dataSource.getAt(row);
|
|
<b>var</b> field = <b>this</b>.colModel.getDataIndex(col);
|
|
<b>var</b> e = {
|
|
grid: <b>this</b>,
|
|
record: r,
|
|
field: field,
|
|
value: r.data[field],
|
|
row: row,
|
|
column: col,
|
|
cancel:false
|
|
};
|
|
<b>if</b>(this.fireEvent("beforeedit", e) !== false && !e.cancel){
|
|
<b>this</b>.editing = true; <i>// flag <b>for</b> buffering of orphan key strokes</i>
|
|
(<b>function</b>(){ <i>// complex but required <b>for</b> focus issues <b>in</b> safari, ie and opera</i>
|
|
<b>var</b> ed = <b>this</b>.colModel.getCellEditor(col, row);
|
|
ed.row = row;
|
|
ed.col = col;
|
|
ed.record = r;
|
|
ed.on("complete", <b>this</b>.onEditComplete, <b>this</b>, {single: true});
|
|
ed.on("specialkey", <b>this</b>.selModel.onEditorKey, <b>this</b>.selModel);
|
|
<b>this</b>.activeEditor = ed;
|
|
<b>var</b> v = r.data[field];
|
|
ed.startEdit(<b>this</b>.view.getCell(row, col), v);
|
|
}).defer(50, <b>this</b>);
|
|
}
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Stops any active editing
|
|
*/</i>
|
|
stopEditing : <b>function</b>(){
|
|
<b>if</b>(this.activeEditor){
|
|
<b>this</b>.activeEditor.completeEdit();
|
|
}
|
|
<b>this</b>.activeEditor = null;
|
|
}
|
|
});</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright © 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
|
|
</body></html> |