javascript - 如何从 View 中触发事件(自定义事件)并在 Ext JS 的 Controller 中处理它们？

Question

我正在使用 Ext JS MVC，我想从 View 中触发一个事件， Controller 必须处理该事件。

我在 View 中有一个文件字段，每当我使用它更改/选择一个文件时，我想用文本文件中每一行的每一行中的文件内容填充网格。

那么如何设置事件并在 Controller 中收听它们。

假设事件名为“onLoadingTextFile”，我如何在 Controller 中监听此事件并通过调用 Controller 中的方法处理事件并填充网格。

         {
            xtype : 'filefield',
            buttonText : 'Load text file',

            listeners : {
                'change' : function(field, value) {
                    var file = field.getEl().down('input[type=file]').dom.files[0];
                    var reader = new FileReader();
                    reader.onload = function (oFREvent) {
                        var fileContent = oFREvent.target.result;
                        //fire an event 
                    };
                    filecontent = reader.readAsText(file, "UTF-8");
                }
            }
        }

在 Controller 中我想要类似的东西

    init : function() {
        this.control({
            // I want something as follows
            'viewport > container' : {
                'onLoadingTextFile' : this.onLoadingTextFile
            }
        });
    },

    onLoadingTextFile : function(fileContent) {
        //populate grid with fileContent
    }

Answer 1

我在 http://mutinyworks.com/blog/2012/05/15/extjs-and-a-simple-mvc-model-view-controller-tutorial-part-2/ 中找到了解决方案ExtJS 提供了一种干净的方法来做到这一点，我是 ExtJS 的新手，所以跟进这些概念有点困难。

如果一个事件可以在 View 中处理，那么它总是可以由 Controller 控制(至少对于 ExtJS 提供的事件)。

在这种情况下，ExtJS 的“filefield”有事件“change”，所以代码变成如下所示

{
    xtype : 'filefield',
    buttonText : 'Load text file',
}

Controller 可以像这样改变

init : function() {
    this.control({
        'filefield' : {
            'change' : this.onLoadingTextFile
        }
    });
},

onLoadingTextFile : function(field, value) {
    //populate grid with fileContent
}