0
Ich habe Probleme, ein benutzerdefiniertes Widget zu erhalten (erbt von _WidgetBase, _TemplatedMixin, & _FocusMixin), um ordnungsgemäß als Editor-Widget mit Dgrid zu funktionieren.Wie fokussiere ich ein benutzerdefiniertes Editor-Widget mit dgrid?
Insbesondere habe ich Probleme, den Fokus zwischen den Spalten zu verwalten. Wenn ich ein Widget in einer Spalte bearbeite und versuche, in eine andere Spalte zu wechseln, wird das Editor-Widget in der neuen Spalte nicht fokussiert.
Hier ist eine abgespeckte Beispiel:
console.clear();
require({
packages: [
{
name: 'dgrid',
location: '//cdn.rawgit.com/SitePen/dgrid/v1.1.0'
},
{
name: 'dstore',
location: '//cdn.rawgit.com/SitePen/dstore/v1.1.1'
}
]
}, [
'dojo/_base/declare',
'dojo/keys',
'dojo/on',
'dgrid/Editor',
'dgrid/Keyboard',
'dgrid/OnDemandGrid',
'dgrid/Selection',
'dijit/_WidgetBase',
'dijit/_TemplatedMixin',
'dijit/_FocusMixin',
'dstore/Memory',
'dstore/Trackable',
'dojo/domReady!'
], function (
declare,
keys,
on,
Editor,
Keyboard,
OnDemandGrid,
Selection,
_WidgetBase,
_TemplatedMixin,
_FocusMixin,
Memory,
Trackable
) {
var EditWidget = declare([_WidgetBase, _TemplatedMixin, _FocusMixin], {
templateString: '<div><input data-dojo-attach-point="textBox" type="text"></div>',
focus: function() {
this.textBox.focus();
},
_getValueAttr: function() {
return this.textBox.value;
},
_setValueAttr: function (newValue) {
this.textBox.value = newValue;
},
postCreate: function() {
var that = this;
on(this.textBox, 'blur', function() {
that.emit('blur');
});
this.inherited(arguments);
}
});
var grid = new (declare([OnDemandGrid, Keyboard, Selection, Editor]))({
selectionMode: 'single',
noDataMessage: 'no data',
columns: [{field: 'ID', sortable: false}, {
autoSave: true,
field: 'LENGTH',
editor: EditWidget,
sortable: false,
editOn: 'dgrid-cellfocusin'
}, {
autoSave: true,
field: 'WEIGHT',
editor: EditWidget,
sortable: false,
editOn: 'dgrid-cellfocusin'
}, {
autoSave: true,
field: 'HEIGHT',
editor: EditWidget,
sortable: false,
editOn: 'dgrid-cellfocusin'
}],
deselectOnRefresh: false
}, document.getElementById('gridDiv'));
var store = new (declare([Trackable, Memory]))({
data: [{ID: 1, LENGTH: '', WEIGHT: '', HEIGHT: ''},
{ID: 2, LENGTH: '', WEIGHT: '', HEIGHT: ''},
{ID: 3, LENGTH: '', WEIGHT: '', HEIGHT: ''}],
idProperty: 'ID'
});
grid.set('collection', store);
grid.startup();
var onGridKeydown = function (e) {
var modifierKeys = [
keys.TAB,
keys.LEFT_ARROW,
keys.UP_ARROW,
keys.RIGHT_ARROW,
keys.DOWN_ARROW
];
var advance = function() {
Keyboard.moveFocusRight.call(grid, e);
};
var retreat = function() {
Keyboard.moveFocusLeft.call(grid, e);
};
if (modifierKeys.indexOf(e.keyCode) !== -1) {
switch (e.keyCode) {
case keys.TAB:
if (!e.shiftKey) {
advance();
} else {
retreat();
}
break;
case keys.LEFT_ARROW:
retreat();
break;
case keys.RIGHT_ARROW:
advance();
break;
case keys.UP_ARROW:
Keyboard.moveFocusUp.call(grid, e);
break;
case keys.DOWN_ARROW:
Keyboard.moveFocusDown.call(grid, e);
break;
}
}
};
grid.on('keydown', onGridKeydown);
});.dgrid {
height: 300px;
}
.dgrid-row {
height: 25px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Custom dgrid editor widget</title>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/SitePen/dgrid/v1.1.0/css/dgrid.css">
</head>
<body>
<p>Click in a cell in the "LENGTH" column and type in a character. Then hit "TAB". Why doesn't the next cell's textbox focus?</p>
<div id='gridDiv'></div>
</body>
</html>Dank im Voraus für jede Beratung.
Wenn das Sie haben ein Problem, müssen Sie nach Ihrem fragen anders ausstellen. Während ich froh bin, jemanden zu sehen, der die Dokumentation lesen möchte, ist die Abfrage von Offsite-Ressourcen off-topic: Fragen, die uns auffordern, ** ein Buch, ein Tool, eine Softwarebibliothek, ein Tutorial oder eine andere Offsite-Ressource zu empfehlen oder zu finden, sind deaktiviert -Topic ** für Stack Overflow, da sie dazu neigen, eigensinnige Antworten und Spam zu bekommen. Beschreiben Sie stattdessen das Problem und was bisher unternommen wurde, um es zu lösen. – Makyen