ExtJS 4 플러그 인 편집 영역

EditArea 는 문법 하 이 라 이 트 를 지원 하 는 텍스트 편집기 로 같은 소프트웨어 와 Ace, CodeMirror 등 이 있 습 니 다.구체 적 인 기능 상의 차 이 는 방문 하 시기 바 랍 니 다.http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors。 프로젝트 에 서 는 ExtJS 4.2 와 EditArea 를 사용 합 니 다. EditArea 플러그 인 을 찾 을 수 없 기 때문에 스스로 하 나 를 실 현 했 습 니 다. 테스트 를 통 해 기본적으로 사용 할 수 있 습 니 다.실현 과정 은 기 존 플러그 인 을 모방 하여 비교적 간단 하고 더 이상 잔소리 하지 않 습 니 다. 
     

Ext.define('Ext.ux.form.EditTextArea', {  
    extend: 'Ext.form.TextArea',  
    alias: 'widget.editarea',  
      
    initComponent: function() {  
        var me = this;  
        this.eaid = this.id;  
        me.callParent(arguments);  
        editAreaLoader.init({  
                id: this.eaid,  
                start_highlight: this.initialConfig.start_highlight || true,  
                language: this.initialConfig.language|| 'en',  
                syntax: this.initialConfig.syntax,  
                syntax_selection_allow: "css,html,js,php,python,vb,xml,c,cpp,sql,basic,pas,brain",  
                allow_toggle: this.initialConfig.allow_toggle || true,  
                allow_resize: this.initialConfig.allow_resize || false,  
                replace_tab_by_spaces: this.initialConfig.replace_tab_by_spaces || 4,  
                toolbar: this.initialConfig.toolbar || "search, go_to_line, |, undo, redo, |, select_font,|, change_smooth_selection, highlight, reset_highlight, |, help",  
                is_editable: this.initialConfig.is_editable || true,  
                show_line_colors: true,  
                //plugins: "autocomplite",  
                autocompletion:true  
            });  
    },  
      
    afterRender: function() {  
        this.callParent();  
    },  
      
    getValue:function(){  
        var v = editAreaLoader.getValue(this.eaid);  
        return v;  
    },  
          
    setValue: function(value) {  
        editAreaLoader.setValue(this.eaid, value);  
    },  
    onDestroy: function() {  
        editAreaLoader.delete_instance(this.eaid);  
        this.callParent();  
    }  
});