代码之家 › 专栏 › 技术社区 › Roberto

绑定codemirror extjs 6

extjs6-classic extjs6 codemirror extjs

0

Roberto · 技术社区 · 7 年前

我已经尝试过订阅get和set方法,只有set有效,当组件打开时,值被设置,但当它更改codemirror的值时,它不会与值绑定

Ext.define('Ext.form.field.CodeMirror', {
extend: 'Ext.form.field.TextArea',

alias: 'widget.codemirror',

getValue: function () {

    var me = this;

    if (me.codeEditor) {
        return me.codeEditor.getValue();
    }
},

setValue: function (value) {

    this.codeEditor.setValue(value);
},

listeners: {
    afterrender: function (textarea) {

        var me = this;

        me.codeEditor = CodeMirror.fromTextArea(textarea.inputEl.dom, {
            mode: "xml",
            htmlMode: true,
            theme: "default",
            lineNumbers: true,
            lineWrapping: true,
            matchTags: {
                bothTags: true
            },
            autoCloseTags: true,
            extraKeys: {
                "F11": function (cm) {
                    cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                },
                "Esc": function (cm) {
                    if (cm.getOption("fullScreen")) {
                        cm.setOption("fullScreen", false);
                    }
                }
            },
            foldGutter: {
                rangeFinder: new CodeMirror.fold.combine(CodeMirror.fold.indent)
            },
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
        });
    }
}

使用组件(默认绑定是Extjs上的值):

xtype: 'codemirror',
name: 'xml',
bind: '{model.arquivoNfceWrapper.xml}',

1 回复 | 直到 7 年前

1

0

Roberto 7 年前

listeners: {
    afterrender: function (textarea) {

        var me = this;

        me.codeEditor = CodeMirror.fromTextArea(textarea.inputEl.dom, {
            mode: "xml",
            htmlMode: true,
            theme: "default",
            lineNumbers: true,
            lineWrapping: true,
            matchTags: {
                bothTags: true
            },
            autoCloseTags: true,
            extraKeys: {
                "F11": function (cm) {
                    cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                },
                "Esc": function (cm) {
                    if (cm.getOption("fullScreen")) {
                        cm.setOption("fullScreen", false);
                    }
                }
            },
            foldGutter: {
                rangeFinder: new CodeMirror.fold.combine(CodeMirror.fold.indent)
            },
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
        });

        me.codeEditor.on('change', function (cMirror) {

            me.updateBindValue(cMirror.getValue());
        });

        me.codeEditor.setValue(me.getBindValue());
    }
},

getBindValue: function () {

    return this.bind.value.getValue();
},

updateBindValue: function (value) {
    this.bind.value.setValue(value)
}