Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / keynav / keynav.js

diff --git a/examples/keynav/keynav.js b/examples/keynav/keynav.js
new file mode 100644 (file)
index 0000000..0ac3ea5
--- /dev/null
+++ b/examples/keynav/keynav.js
@@ -0,0 +1,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);
+        }
+    });
+
+});