Przepraszamy za dużym opóźnieniem, ale pozwala tylko powiedzieć, że byłem na wakacjach, siedzi na morzu i popijając Mojito ... myślenia o życiu, ziemniaki i co naprawdę muszę na nadchodzące starcie projektu mądry. Doszedłem do wniosku w sprawie tych punktów:
- Ponieważ w mojej sieci ludzie będą pisać liczby. Muszę skupić się na wejściu w tryb edycji, naciskając cyfry w bieżącej komórce.
- Potrzebuję naciśnięcia klawisza numerycznego nie tylko aktywuję tryb edycji, ale wstawię go jako nową wartość (tak, naciskając 1 na klawiaturze, komórka wchodzi w tryb edycji i wprowadzając 1 jako nową wartość)
- Muszę pozwolić ESC i ENTER magia działa jak zwykle.
Ogólnie dokonałem pewnych przesłonięć do Ext.core.Element (w celu naprawienia dziwnego błędu, który pojawia się przy użyciu IE9 i Firefox 6.0.2 w systemie Windows 7. Aby uzyskać więcej informacji, zobacz komentarze w kodzie.), Ext.grid .plugin.Edycja (aby przejść do trybu edycji za pomocą klawiszy numerycznych) i Ext.Editor (aby ustawić nową wartość).
TODO: gdy w trybie edycji, naciskając klawisz ENTER nie tylko pełną edycję, ale przejść o jedną komórkę w dół, jeśli jest jeden (podobny do programu Excel)
PS. Przepraszam za mój angielski ... naprawdę nie mój ojczysty język, ale mam nadzieję, że jest mniej lub bardziej zrozumiały. Dziękuję również za wkład i komentarze! ;)
/**
* 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], //
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'
});
});
Czy możesz potwierdzić, że chcesz, aby pole edytora siatki zawierało cały zaznaczony tekst? Coś jak akcja na stronie połączonej tutaj, ale w siatce? [link] (http://javascript-array.com/scripts/onclick_select_all_text_in_field/) –
tak, to jest pomysł na to. – vins
wydaje mi się, że mogę robić, co chcę, używając config param selectOnFocus: true – vins