Javascript extjs 4 textarea自动完成/建议

我们的一个新要求是有一个公式编辑器，用户可以在其中输入某种公式（excel类型），例如

IF（$Field1<1000，'Message 1'）和
如果（$Field2>10000，'Message 2'）

因此，这里的想法是，我们应该为“函数（如果）”、“字段（字段1和字段2）”、“条件（和）”、“运算符（>）”执行自动建议（上下文），作为textarea中的用户类型（因此它不会是多行的）

因此，基本上，我们正在尝试模仿jira的相同功能，它会自动建议分辨率、修复版本等，如下图所示
到目前为止，我已经尝试过了，但我得到了我们不想要的多选组合框的行为<所以我的问题是 1.文本区域上下文自动完成
2.对公式进行语法分析以获取上下文


这个

---

我在这里真的需要帮助，因为谷歌帮不上什么忙。

创建一个组合框，其中包含所有可能的值，您可以建议用户，并在textarea的按键事件中，根据键入的字符使用过滤记录填充组合框。

---

示例-我键入一个字段名，然后键入一个空格，在本例中，按筛选器组合显示所有运算符。

这里我是如何解决自动建议问题的

 var textField = Ext.create('Ext.form.field.TextArea', {
        renderTo: Ext.getBody(),
        enableKeyEvents: true,
        width: 200,
        height:200
    });   


    textField.on('keypress', function(f){
      // debugger;
        var val = f.getValue();

        if(val){
            var query = val;
            console.log(query);
            store.clearFilter();

            store.filter('Name', query);

            dataview.show();

        } else {
            dataview.hide()
        }


    }, this, {
        buffer: 200
    });



    var dataview = Ext.create('Ext.view.View', {
        height: 200,
        width: 50,
        store: store,
        itemTpl: '{Name}',
        renderTo: Ext.getBody(),
        hidden: true,
        listeners: {
            itemclick: function(view, rec){
                var val = textField.getValue();

                val = val.replace(nameRegex, '@' + rec.get('Name'));

                textField.setValue(val);

                dataview.hide();

                textField.focus();
            }
        }
    });

---

组合框多文本-你能说得更清楚一点吗？我的意思是，组合框不允许你改变高度，我想要的是一个文本区域，用户可以像其他HTML编辑器一样一次看到多行。很好的答案，我已经为此创建了一个提琴

 var textField = Ext.create('Ext.form.field.TextArea', {
        renderTo: Ext.getBody(),
        enableKeyEvents: true,
        width: 200,
        height:200
    });   


    textField.on('keypress', function(f){
      // debugger;
        var val = f.getValue();

        if(val){
            var query = val;
            console.log(query);
            store.clearFilter();

            store.filter('Name', query);

            dataview.show();

        } else {
            dataview.hide()
        }


    }, this, {
        buffer: 200
    });



    var dataview = Ext.create('Ext.view.View', {
        height: 200,
        width: 50,
        store: store,
        itemTpl: '{Name}',
        renderTo: Ext.getBody(),
        hidden: true,
        listeners: {
            itemclick: function(view, rec){
                var val = textField.getValue();

                val = val.replace(nameRegex, '@' + rec.get('Name'));

                textField.setValue(val);

                dataview.hide();

                textField.focus();
            }
        }
    });