EXTJS4扩展实例：在输入框TextArea或TextField内使用tab键

测试环境： ext-4.1.0-gpl

基本的原理：先停止tab事件,自己控制插入tab符号

 

Ext.onReady(function () {
    Ext.widget('textareafield', {
        width: 300,
        height: 100,
        enableKeyEvents: true,　　//通过api文档，我们知道要捕捉keydown事件，必须设置此项
        tabText: '\t',　　//定义制表符
        listeners: {
            keydown: function (f, e) {　　//f:Ext.form.field.Text,e:Ext.EventObject

　　　　　　　if (e.getKey() == e.TAB) {
                    e.stopEvent();　　//停止事件
                    f.insertAtCursor(f.inputEl.dom, f.tabText);　　
                }
            }
        },
　　　　 //插入指定字符并重新计算输入光标的位置
        insertAtCursor: function (el, ins) {
            if (el.setSelectionRange) {
                var withIns = el.value.substring(0, el.selectionStart) + ins;
                var pos = withIns.length;
                el.value = withIns + el.value.substring(el.selectionEnd, el.value.length);
                el.setSelectionRange(pos, pos);
            }
            else if (document.selection) {
                document.selection.createRange().text = ins;
            }
        },
        renderTo: Ext.getBody()
    });
});