examples/keynav/keynav.js

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