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();

    }

});