Ext鍵盤處理

Ext.onReady(function(){
    
    //6.13 Ext.KeyNav 爲元素提供簡單的按鍵處理方法
    //可綁定的按鍵 enter,left,right,up,down,tab,esc,pageUp,pageDown,home,end,del
    //1.Ext.KeyNav.disable()廢棄原來鍵盤綁定
    //2.Ext.KeyNav.enbale()將廢棄的從新生效
    var myKey = new Ext.Panel({
        title : 'keyNav鍵盤綁定對象示例',
        width : 320,
        renderTo : 'myKey',
        html : '<div style="padding:10px;"><div style="background-color:#3399ff" tabindex="1" id="div01">請點擊我，而後按鍵盤enter鍵</div><div style="background-color:red" tabindex="2" id="div02">我是div02</div></div>'
    });
    var myKeyEl = Ext.get("div01");//獲取元素
    var mnav = new Ext.util.KeyNav({
        target : myKeyEl,
        left : function(e){
            alert("你按下了左方向鍵");        
        },
        right : function(e){
            console.info("你按下了右方向鍵");    
        },
        enter : function(e){
            console.info("你按下了回車鍵");    
        },
        scope : this//範圍
    });
    mnav.enable();
    
    
    
    //6.14 Ext.KeyMap 提供更靈活強大的對按鍵的處理方法
    //Ext.KeyMap.disable();廢棄已綁定的keyMap
    //Ext.KeyMap.enable();廢棄的配置從新生效
    //Ext.KeyMap.isEnabled() : Boolean 當前keymap配置是否有效
    
    //on(Number/Array/Object key,Function fn,[Object scope])
    //爲調用對象快速地綁定key對象中指定的按鍵,觸發後再scope上調用fn
    function myHandler(){
        console.info("div02-enter");
    }
    function myHandler1(){
        console.info("arnt");
    }
    /*
    var map1 = new Ext.KeyMap({
        target : Ext.get("div02"),
        key : 13,//enter鍵
        fn : myHandler,
        scope : this
    });
    
    var map2 = new Ext.KeyMap({
        target : Ext.get("div02"),
        key:"a\r\n\t",
        fn : myHandler1,
        scope : this
    });
    */
    var map = new Ext.util.KeyMap({
        target: Ext.get("div02"),
        binding: [{
            key: [10,13],
            fn: function(){ alert("回車鍵按下"); }
        }, {
            key: "abc",
            fn: function(){ alert('a, b 或者 c 按下'); }
        }, {
            key: "\t",
            ctrl:true,
            shift:true,
            fn: function(){ alert('Control + shift + tab 按下'); }
        }]
    });
    //map1.enable();
    //map2.enable();
    //給對象添加鍵盤綁定
    map.addBinding({
        key : 'def',
        shift : true,
        fn : function(){
            console.info("shift+d/e/f");
        },
        scope : this
    });
    
    
});