0
dgridでエディタウィジェットとして正しく動作するようにカスタムウィジェット（_WidgetBase、_TemplatedMixin、& から継承）を取得する際に問題が発生しています。dgridを使ってカスタムエディタウィジェットをフォーカスする方法は？
具体的には、列間のフォーカスの管理に問題があります。ある列のウィジェットを編集して別の列に移動しようとすると、新しい列のエディタウィジェットはフォーカスしません。何かアドバイスのために、事前に、
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>ありがとう：
は、ここでストリップダウン例です。
あなたが持っている場合問題は、あなたはあなたのことについて尋ねる必要があります別の方法で発行します。ドキュメントを読んでみたいと思っている人にはうれしいですが、オフサイトのリソースを求めているのです。本、ツール、ソフトウェアライブラリ、チュートリアル、その他のオフサイトリソースを推奨するか**見つけるように私たちに質問する質問はありません。彼らが有害な回答と迷惑メールを引き付けてしまう傾向があるため、Stack Overflowのための-topic **。代わりに、問題を説明し、それを解決するためにこれまでに何が行われているかを記述します。 – Makyen