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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
| Ext.require([
| 'Ext.XTemplate',
| 'Ext.util.KeyNav',
| 'Ext.fx.*'
| ]);
|
| Ext.define('Board', {
| constructor: function(size, activeCls){
| this.size = size;
| this.activeCls = activeCls;
| },
|
| render: function(el){
| el = Ext.get(el);
|
| var tpl = Ext.create('Ext.XTemplate',
| '<tpl for=".">',
| '<div class="square">{.}</div>',
| '<tpl if="xindex % ' + this.size + ' === 0"><div class="x-clear"></div></tpl>',
| '</tpl>'),
| data = [],
| i = 0,
| max = this.size * this.size;
|
| for (; i < max; ++i) {
| data.push(i + 1);
| }
| tpl.append(el, data);
| this.cells = el.select('.square');
| },
|
| getIndex: function(xy){
| return this.size * xy[0] + xy[1];
| },
|
| constrain: function(x, y) {
| x = Ext.Number.constrain(x, 0, this.size - 1);
| y = Ext.Number.constrain(y, 0, this.size - 1);
| return [x, y];
| },
|
| setActive: function(x, y) {
| var xy = this.constrain(x, y),
| cell = this.cells.item(this.getIndex(xy));
|
| cell.radioCls(this.activeCls);
| this.active = xy;
| },
|
| setActiveCls: function(activeCls){
| this.cells.removeCls(this.activeCls);
| this.activeCls = activeCls;
| var active = this.active;
| this.setActive(active[0], active[1]);
| },
|
| highlightActive: function(){
| var cell = this.cells.item(this.getIndex(this.active));
| Ext.create('Ext.fx.Anim', {
| target: cell,
| duration: 1000,
| alternate: true,
| iterations: 2,
| to: {
| backgroundColor: '#FFFF00'
| },
| callback: function(){
| cell.setStyle('background-color', '');
| }
| });
| },
|
| moveUp: function(){
| var active = this.active;
| this.setActive(active[0] - 1, active[1]);
| },
|
| moveDown: function(){
| var active = this.active;
| this.setActive(active[0] + 1, active[1]);
| },
|
| moveLeft: function(){
| var active = this.active;
| this.setActive(active[0], active[1] - 1);
| },
|
| moveRight: function(){
| var active = this.active;
| this.setActive(active[0], active[1] + 1);
| }
| });
|
| Ext.onReady(function(){
|
| var cls = 'active-green';
| var board = new Board(4, cls);
| board.render('board');
| board.setActive(0, 0);
|
| var nav = Ext.create('Ext.util.KeyNav', Ext.getDoc(), {
| scope: board,
| left: board.moveLeft,
| up: board.moveUp,
| right: board.moveRight,
| down: board.moveDown,
| space: board.highlightActive,
| home: function(){
| cls = Ext.String.toggle(cls, 'active-green', 'active-red');
| board.setActiveCls(cls);
| }
| });
|
| });
|
|
