There was a question in the sencha forum “Does anyone know how to add a form field that is an Ace code editor?”. So I decided to implement such a field. I have done it once in 2011 but forgotten already which lib was used and in which form it was done.
Here I tried to implement the new form field at the base of ‘Ext.form.field.Base’ class and make like the other extjs form fields. The field fires the ‘change’ event, has validations and info, error and warning events. I hope the code is self explanatory.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
Ext.define('AceEditorTextArea', { extend: 'Ext.form.field.Base', alias: 'widget.aceeditortextarea', fieldSubTpl: [ '<div foo="aaa" id="{aceWrapperDivId}" ', 'style="min-height: {minHeight}px; height: {height}px"', '<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>', '<tpl if="fieldCls"> class="{fieldCls}"</tpl>', '>', '<div id="{aceDivId}" ', 'style="min-height: {minHeight}px; height: {height}px"', '></div>', '</div>', ], defaultAceEditorOptions: { highlightActiveLine: true, showPrintMargin: false }, aceOptions: {}, value: '', lastValue: '', minHeight: 58, allowBlank: true, blankText: "This field is required", extraFieldBodyCls: Ext.baseCSSPrefix + 'form-text-wrap-default', invalidCls: Ext.baseCSSPrefix + 'form-invalid-ace-field-default', initComponent: function () { this.on('afterrender', this.initAceEditor, this); this.callParent(); }, getAceEditor: function () { if (!this.aceEditor) { this.aceEditor = ace.edit(this.getAceDivId()); } return this.aceEditor; }, initAceEditor: function () { var me = this, aceOptions = Ext.Object.merge( this.defaultAceEditorOptions, this.aceOptions ); this.getAceEditor().setOptions(aceOptions); this.getAceEditor().getSession().setValue(this.getValue()); this.getAceEditor().getSession().setMode(this.defaultAceEditorOptions.mode); this.getAceEditor().getSession().on('change', function () { me.onChange.call(me); }); }, onChange: function () { this.lastValue = this.value; this.value = this.getAceEditor().getSession().getValue(); this.isCodeValid(); this.fireEvent('change', this, this.value, this.lastValue); this.callParent([this.value, this.lastValue]); }, isCodeValid: function () { var annotations = this.getAceEditor().getSession().getAnnotations(); if (annotations.length > 0) { this.fireEvent('annotation', annotations); } Ext.Array.each(annotations, function (annotation) { if (annotation.type == 'info') { this.fireEvent('infoannotation'); return false; } }, this); Ext.Array.each(annotations, function (annotation) { if (annotation.type == 'error') { this.fireEvent('errorannotation'); return false; } }, this); Ext.Array.each(annotations, function (annotation) { if (annotation.type == 'warning') { this.fireEvent('worningannotation'); return false; } }, this); return this; }, getValue: function () { var value = this.value; return value; }, getSubmitValue: function () { var value = this.value; return value; }, getSubTplData: function (fieldData) { fieldData.aceWrapperDivId = this.getAceWrapperDivId(); fieldData.aceDivId = this.getAceDivId(); fieldData.height = this.height || this.minHeight; fieldData.minHeight = this.minHeight; fieldData.fieldCls = this.fieldCls; return fieldData; }, getAceWrapperDivId: function () { return this.getId() + '-aceDivWrapperId'; }, getAceWrapperEl: function() { return Ext.get(this.getAceWrapperDivId()); }, getAceDivId: function () { return this.getId() + '-aceDivId'; }, getErrors: function (value) { var errors = this.callParent([value]); if (!this.allowBlank && this.value.length == 0) { errors.push(this.blankText); } if(errors && errors.length > 0) { this.getAceWrapperEl().addCls(this.invalidCls); } else { this.getAceWrapperEl().removeCls(this.invalidCls); } return errors; } }); |
I also added trivial test environment, to disable/enable or validate field, change the theme and mode. If you will use this code and would like to add some new features this platform will help you with testing.