×
Creating solutions

Ako pridať novú funkcionalitu widgetu dijit/form/DateTextBox

V tomto článku pridám novú funkcionalitu widgetu dijit/form/DateTextBox. Ide o rozšírenie, ktoré nastaví aktuálny dátum. Na nižšie uvedenom príklade je demonštrovaný spôsob, ako vyriešiť bug, ktorý majú niektoré widgety, kam patrí aj DateTextBox či Textarea.
Neviem prečo, ale na niektorých widgetoch nefungujú eventy onKeyDown, onKeyPress a ďalšie, aj napriek tomu, že sú v API uvedené. Napríklad analýzou DateTextBox som zistil, že event keypress je handlovaný iba v rámci metódy, teda nie je možné prepísať ho. Z tohto dôvodu je potrebné hľadať iné riešenia, ktoré zbytočne narúšajú koncepciu vytvárania eventov.
Pre demonštrovanie rozšírenia widgetu DateTextBox je vytvorená funkcionalita, ktorá umožňuje prostredníctvom klávesy F4 nastaviť aktuálny dátum. Nová funkcionalita je vytvorené dvoma spôsobmi. Je na čitateľovi, ktorý variant si zvolí.
Príklad: Podpora klávesy F4 - variant 1.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/**
* DateTextBox with extended functionality / keyboard support
*
* F4 key sets current date
*
* @author : Matej Lednár
*/
define([
"dojo/on",
"dojo/_base/declare",
"dijit/form/DateTextBox"
], function (on, declare, DateTextBox) {
return declare([
DateTextBox
], {
setCurrentDate: function () {
this.set("value", new Date());
},
createKeyEvents: function () {
var widget = this;
var event = on(this.textbox, "keydown", function (evt) {
// F4 key sets current date
if (evt.keyCode === 115) {
widget.setCurrentDate();
}
});
this.own(event);
},
postCreate: function () {
this.inherited(arguments);
this.createKeyEvents();
}
});
});
Príklad: Podpora klávesy F4 - variant 2.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/**
* DateTextBox with extended functionality / keyboard support
*
* F4 key sets current date
*
* @author : Matej Lednár
*/
define([
"dojo/_base/declare",
"dijit/form/DateTextBox"
], function (declare, DateTextBox) {
return declare([
DateTextBox
], {
setCurrentDate: function () {
this.set("value", new Date());
},
_onKey: function (evt) {
this.inherited(arguments);
if (evt.keyCode === 115) {
this.setCurrentDate();
}
}
});
});
V prvom variante používam on a v druhom privátnu metódu _onKey.

Záver

V prípade, že máte iné zaujímavé riešenie, podeľte sa oň prostredníctvom komentára.


Dojo,dijit/form/DateTextBox,dojo/_base/declare,event,keyCode,_onKey,dijit/form/Textarea,onKeyDown,onKeyPress
No part of this article may be reproduced without mention of the author and URL to this website.
For more information, see the About section.

Comments

Article has no comments.

Add a comment

Name (required)
Website
Message (required)
Submit
From latest