add extjs 6.0.1 sources

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

Ext.require([\r
    'Ext.XTemplate',\r
    'Ext.util.KeyNav',\r
    'Ext.fx.*'\r
]);\r
\r
Ext.define('Board', {\r
    constructor: function(size, activeCls){\r
        this.size = size;\r
        this.activeCls = activeCls;\r
    },\r
\r
    render: function(el){\r
        el = Ext.get(el);\r
\r
        var tpl = Ext.create('Ext.XTemplate',\r
            '<tpl for=".">',\r
                '<div class="square">{.}</div>',\r
                '<tpl if="xindex % ' + this.size + ' === 0"><div class="x-clear"></div></tpl>',\r
            '</tpl>'),\r
            data = [],\r
            i = 0,\r
            max = this.size * this.size;\r
\r
        for (; i < max; ++i) {\r
            data.push(i + 1);\r
        }\r
        tpl.append(el, data);\r
        this.cells = el.select('.square');\r
    },\r
\r
    getIndex: function(xy){\r
        return this.size * xy[0] + xy[1];\r
    },\r
\r
    constrain: function(x, y) {\r
        x = Ext.Number.constrain(x, 0, this.size - 1);\r
        y = Ext.Number.constrain(y, 0, this.size - 1);\r
        return [x, y];\r
    },\r
\r
    setActive: function(x, y) {\r
        var xy = this.constrain(x, y),\r
            cell = this.cells.item(this.getIndex(xy));\r
\r
        cell.radioCls(this.activeCls);\r
        this.active = xy;\r
    },\r
\r
    setActiveCls: function(activeCls){\r
        this.cells.removeCls(this.activeCls);\r
        this.activeCls = activeCls;\r
        var active = this.active;\r
        this.setActive(active[0], active[1]);\r
    },\r
\r
    highlightActive: function(){\r
        var cell = this.cells.item(this.getIndex(this.active));\r
        Ext.create('Ext.fx.Anim', {\r
            target: cell,\r
            duration: 1000,\r
            alternate: true,\r
            iterations: 2,\r
            to: {\r
                backgroundColor: '#FFFF00'\r
            },\r
            callback: function(){\r
                cell.setStyle('background-color', '');\r
            }\r
        });\r
    },\r
\r
    moveUp: function(){\r
        var active = this.active;\r
        this.setActive(active[0] - 1, active[1]);\r
    },\r
\r
    moveDown: function(){\r
        var active = this.active;\r
        this.setActive(active[0] + 1, active[1]);\r
    },\r
\r
    moveLeft: function(){\r
        var active = this.active;\r
        this.setActive(active[0], active[1] - 1);\r
    },\r
\r
    moveRight: function(){\r
        var active = this.active;\r
        this.setActive(active[0], active[1] + 1);\r
    }\r
});\r
\r
Ext.onReady(function(){\r
\r
    var cls = 'active-green';\r
    var board = new Board(4, cls);\r
    board.render('board');\r
    board.setActive(0, 0);\r
\r
    var nav = Ext.create('Ext.util.KeyNav', Ext.getDoc(), {\r
        scope: board,\r
        left: board.moveLeft,\r
        up: board.moveUp,\r
        right: board.moveRight,\r
        down: board.moveDown,\r
        space: board.highlightActive,\r
        home: function(){\r
            cls = Ext.String.toggle(cls, 'active-green', 'active-red');\r
            board.setActiveCls(cls);\r
        }\r
    });\r
\r
});\r