如何使用dgrid集中一个自定义编辑器小部件？ [英] How to focus a custom editor widget with dgrid?
本文介绍了如何使用dgrid集中一个自定义编辑器小部件？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我遇到麻烦得到一个自定义的小部件（继承自 _WidgetBase ， _TemplatedMixin ，&$ _FocusMixin ）使用dgrid作为编辑器小部件正常工作。
I'm having troubles getting a custom widget (inherits from _WidgetBase, _TemplatedMixin, & _FocusMixin) to work properly as an editor widget with dgrid.
具体来说，我在管理列之间的焦点时遇到麻烦。当我编辑一列中的小部件并尝试移动到另一列时，新列中的编辑器小部件不会重点。
这是一个被删除的示例：
Specifically I'm having troubles managing the focus between columns. When I edit a widget in one column and try to move to another column the editor widget in the new column does not focus.
Here's a stripped down example:
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>
谢谢，提前，任何建议。
Thanks, in advance, for any advice.
推荐答案
唯一缺少的部分是您的编辑器小部件的启动方法。
（启动方法是dojo小部件生命周期的一部分）
The only missing part is a startup method for your Editor widget.
(The startup method is part of dojo widgets' life-cycle)
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);
},
startup: function() {
this.focus();
}
});
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".</p>
<div id='gridDiv'></div>
</body>
</html>
使用纯文本框：
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',
'dstore/Memory',
'dstore/Trackable',
'dojo/domReady!'
], function (
declare,
keys,
on,
Editor,
Keyboard,
OnDemandGrid,
Selection,
Memory,
Trackable
) {
var grid = new (declare([OnDemandGrid, Keyboard, Selection, Editor]))({
selectionMode: 'single',
noDataMessage: 'no data',
columns: [{field: 'ID', sortable: false}, {
autoSave: true,
field: 'LENGTH',
editor: 'text',
sortable: false,
editOn: 'focus'
}, {
autoSave: true,
field: 'WEIGHT',
editor: 'text',
sortable: false,
editOn: 'focus'
}, {
autoSave: true,
field: 'HEIGHT',
editor: 'text',
sortable: false,
editOn: 'focus'
}],
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".</p>
<div id='gridDiv'></div>
</body>
</html>
这篇关于如何使用dgrid集中一个自定义编辑器小部件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
