[英]Advice, help needed with ExtJS 4: grid: cell editing: auto edit feature
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”). 我想问一下如何制作ExtJS 4网格的一些帮助:单元格编辑:自动编辑功能 - 我的意思是,当我按一个键时我想进入单元格编辑模式(例如,按下“123”突出显示的单元格,用“123”替换文本(如果有的话)。 At the moment entering cell editing mode can be done by pressing ENTER or clicking with mouse.
进入单元格编辑模式时,可以按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 config参数放入单元格中进行文本选择,现在我需要在单元格中插入第一个char(启动编辑模式)。
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":"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'
}
}
});
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()
});
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. 很抱歉长时间拖延,但我只想说我正在度假,坐在海边喝着Mojitos ......想着生活,土豆和我真正需要的即将到来的项目网格。 I came to conclusion about these points:
我得出结论这些要点:
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(to按数字键进入编辑模式)和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) TODO:当处于编辑模式时,按ENTER不仅完成编辑,而且如果有一个单元格则向下移动一个单元格(类似于Excel)
PS. 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":"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.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'
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.