javascript ExtJS 4 需要的建议和帮助：网格：单元格编辑：自动编辑功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7026744/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Advice, help needed with ExtJS 4: grid: cell editing: auto edit feature
提问by vins
I searched ExtJS related questions and didn't found any reference, but if I missed it sorry in advance to making duplicate question.
我搜索了 ExtJS 相关问题并没有找到任何参考，但如果我错过了，请提前提出重复问题。
I would like to ask some assistance on how to make ExtJS 4 grid: cell editing: auto edit feature – what I mean is, I want to enter in cell editing mode when I press a key (for example, by pressing “123” in highlighted cell, text is replaced (if there is any) with “123”). At the moment entering cell editing mode can be done by pressing ENTER or clicking with mouse.
我想问一些关于如何制作 ExtJS 4 网格的帮助：单元格编辑：自动编辑功能——我的意思是，当我按下一个键时，我想进入单元格编辑模式（例如，在突出显示的单元格，文本将替换（如果有）为“123”）。此时可以通过按 ENTER 或用鼠标单击来进入单元格编辑模式。
As base I am using Sencha provided example: http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid/cell-editing.html
作为基础，我使用 Sencha 提供的示例：http: //dev.sencha.com/deploy/ext-4.0.2a/examples/grid/cell-editing.html
Any tips, pointers would be appreciative.
任何提示，指针将不胜感激。
Thanks in advance! :)
提前致谢！:)
Actually I did solve my problem partially. Found a way to make cell editable on key press, put selectOnFocus config param for text selecting in cell, now I need insert first char (that initiated editing mode) in cell.
实际上我确实部分解决了我的问题。找到了一种在按键时使单元格可编辑的方法，将 selectOnFocus 配置参数用于单元格中的文本选择，现在我需要在单元格中插入第一个字符（即启动的编辑模式）。
It can be not the most beautiful solution, but it work for me :) Here is full code up till now.
它可能不是最漂亮的解决方案，但它对我有用:) 这是到目前为止的完整代码。
var tStore = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{"name":"Lisa", "email":"[email protected]", "phone":"555-111-1224"},
{"name":"Bart", "email":"[email protected]", "phone":"555--222-1234"},
{"name":"Homer", "email":"[email protected]", "phone":"555-222-1244"},
{"name":"Marge", "email":"[email protected]", "phone":"555-222-1254"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
var tCellEdit = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
var tGrid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: tStore,
columns: [
{header: 'Name', dataIndex: 'name', field: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype:'textfield',
allowBlank:false,
selectOnFocus: true
}
},
{header: 'Phone', dataIndex: 'phone'}
],
selType: 'cellmodel',
plugins: [tCellEdit],
listeners: {
keypress: {
element: 'el',
fn: function(iEvent, iElement) {
iCode = iEvent.getKey();
if (iCode != undefined && iCode != iEvent.LEFT && iCode != iEvent.RIGHT && iCode != iEvent.UP && iCode != iEvent.DOWN && iCode != iEvent.ENTER && iCode != iEvent.ESC) {
var iView = tGrid.getView();
var position = iView.selModel.position;
tCellEdit.startEditByPosition(position);
}
}
}
},
height: 200,
width: 400,
renderTo: Ext.getBody()
});
采纳答案by vins
Sorry for long delay, but lets just say I was on vacation, sitting at the sea and sipping Mojitos… thinking about life, potatoes and what I really need for upcoming project grid wise. I came to conclusion about these points:
抱歉耽误了这么久，但我只能说我正在度假，坐在海边喝着莫吉托……思考生活、土豆以及我对即将到来的项目网格真正需要的东西。我得出以下几点结论：
- Because in my grid people will be writing numbers. I need to focus on entering edit mode by pressing numbers in current cell.
- I need pressed numeric key not only activate edit mode, but insert it as new value (so by pressing 1 on keyboard, cell is entering edit mode and putting 1 as new value)
- I need to let ESC and ENTER magic work as usual.
- 因为在我的网格中人们会写数字。我需要通过按当前单元格中的数字来专注于进入编辑模式。
- 我需要按下数字键，不仅激活编辑模式，而且将其作为新值插入（因此通过在键盘上按 1，单元格进入编辑模式并将 1 作为新值）
- 我需要让 ESC 和 ENTER 魔法照常工作。
Overall I made some overrides to Ext.core.Element (to fix strange bug that appears using IE9 and Firefox 6.0.2 on Windows 7. For more details, please see comments in code.), Ext.grid.plugin.Editing (to enter edit mode by pressing numeric keys) and Ext.Editor (to set new value).
总体而言，我对 Ext.core.Element 进行了一些覆盖（以修复在 Windows 7 上使用 IE9 和 Firefox 6.0.2 出现的奇怪错误。有关更多详细信息，请参阅代码中的注释。），Ext.grid.plugin.Editing（以按数字键进入编辑模式）和 Ext.Editor（设置新值）。
TODO: when in edit mode, pressing ENTER not only complete editing, but move one cell down if there is one (similar to Excel)
待办事项：在编辑模式下，按 ENTER 不仅可以完成编辑，而且如果有单元格则向下移动一个单元格（类似于 Excel）
PS. Sorry for my English… not really my native language, but hopefully it's more or less understandable. Also, thanks for input and comments! ;)
附注。对不起，我的英语……不是我的母语，但希望它或多或少可以理解。另外，感谢您的输入和评论！;)
/**
* Fix for bug with cursor position in editor grid textfield
*
* Bug description: after loading an editor grid which contains a textfield, the cursor / caret is positioned at the
* beginning of text field the first time the editor is activated. Subsequent activations position the caret at the end
* of the text field.
* In my case this behavior is not observed in Opera 11.51 (Windows 7) and IE8, Firefox 6.0.2 (Windows XP), but observed in IE9 and Firefox 6.0.2 (Windows 7)
*
* Current fix helps with IE9 problem, but Firefox 6.0.2 (Windows 7) still putting the cursor / caret at the beginning of text field.
*
* Forum post for ExtJS v3 about same problem and where the fix was found: http://www.sencha.com/forum/showthread.php?88046-OPEN-3.1-Caret-Cursor-Position-in-Editor-Grid-Textfield
*/
Ext.core.Element.prototype.focus = function(defer, /* private */dom) {
var me = this,
dom = dom || me.dom;
try {
if (Number(defer)) {
Ext.defer(me.focus, defer, null, [null, dom]);
} else {
dom.focus();
// start override
dom.value = dom.value;
dom.focus();
if (dom.sof) {
dom.select();
}
// end override
}
} catch (e) { }
return me;
};
/**
* END OF ALL FIXES
*/
var tStore = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{"name":"Lisa", "email":"[email protected]", "phone":"555-111-1224"},
{"name":"Bart", "email":"[email protected]", "phone":"555--222-1234"},
{"name":"Homer", "email":"[email protected]", "phone":"555-222-1244"},
{"name":"Marge", "email":"[email protected]", "phone":"555-222-1254"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.onReady(function() {
var newValue = '';
/**
* Rewriting class Ext.grid.pluging.Editing to make cell go into edit mode by pressing numeric keys.
*
* changed: requirements: Ext.util.KeyNav -> Ext.util.KeyMap
* changed: accordingly made changes to use Ext.util.KeyMap in initEditTriggers function
* added: new function onNumberKey for replacing original value with new one and entering cell in edit mode
*
* tested only for Cell selection model, too lazy for Row selection model testing :P
*/
Ext.override(Ext.grid.plugin.Editing, {
requires: [
'Ext.grid.column.Column',
'Ext.util.KeyMap'
],
initEditTriggers: function() {
var me = this,
view = me.view,
clickEvent = me.clicksToEdit === 1 ? 'click' : 'dblclick';
// Start editing
me.mon(view, 'cell' + clickEvent, me.startEditByClick, me);
view.on('render', function() {
me.keyNav = Ext.create('Ext.util.KeyMap', view.el, [
{
key: [48, 49, 50, 51, 52, 53, 54, 55, 56, 57], // 0123456789
fn: me.onNumberKey,
scope: me
}, {
key: 13, // ENTER
fn: me.onEnterKey,
scope: me
}, {
key: 27, // ESC
fn: me.onEscKey,
scope: me
}
]);
}, me, { single: true });
},
onNumberKey: function(e) {
var me = this,
grid = me.grid,
selModel = grid.getSelectionModel(),
record,
columnHeader = grid.headerCt.getHeaderAtIndex(0);
// Calculate editing start position from SelectionModel
// CellSelectionModel
if (selModel.getCurrentPosition) {
pos = selModel.getCurrentPosition();
record = grid.store.getAt(pos.row);
columnHeader = grid.headerCt.getHeaderAtIndex(pos.column);
}
// RowSelectionModel
else {
record = selModel.getLastSelected();
}
// if current cell have editor, then save numeric key in global variable
ed = me.getEditor(record, columnHeader);
if (ed) {
newValue = String.fromCharCode(e);
}
// start cell edit mode
me.startEdit(record, columnHeader);
}
});
Ext.override(Ext.Editor, {
startEdit : function(el, value) {
var me = this,
field = me.field;
me.completeEdit();
me.boundEl = Ext.get(el);
value = Ext.isDefined(value) ? value : me.boundEl.dom.innerHTML;
if (!me.rendered) {
me.render(me.parentEl || document.body);
}
if (me.fireEvent('beforestartedit', me, me.boundEl, value) !== false) {
me.startValue = value;
me.show();
field.reset();
field.setValue((newValue != '' ? newValue : value));
me.realign(true);
field.focus(false, 10);
if (field.autoSize) {
field.autoSize();
}
me.editing = true;
// reset global newValue
newValue = '';
}
}
});
/**
* END OF ALL OVERRIDES (thank god!) :)
*/
var tCellEdit = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
var tGrid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: tStore,
columns: [
{header: 'Name', dataIndex: 'name',
editor: {
xtype: 'textfield',
maskRe: /[\d]/
}
},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype:'textfield'
}
},
{header: 'Phone', dataIndex: 'phone'}
],
selType: 'cellmodel',
plugins: [tCellEdit],
height: 200,
width: 400,
renderTo: 'testgrid'
});
});
