如何从视图中触发事件（自定义事件）并在 Ext JS 的控制器中处理它们？

Posted 2023-02-26

【中文标题】如何从视图中触发事件（自定义事件）并在 Ext JS 的控制器中处理它们？

【英文标题】：How to fire events (custom event) from view and handle them in controller in Ext JS?

【发布时间】：2013-10-28 10:07:18

【问题描述】：

我正在使用 Ext JS MVC，我想从视图中触发一个事件，而控制器必须处理它。

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

那么如何设置事件并在控制器中监听它们。

假设事件名为“onLoadingTextFile”，我如何在 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");
                
            
        

在控制器中我想要类似的东西

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

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

【参考方案1】：

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

如果一个事件可以在视图中处理，那么它总是可以由控制器控制（至少对于 ExtJS 提供的事件）。

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

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

控制器可以像这样改变

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

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

【讨论】：

这是正确的做法。我看了你的问题，但我没有时间。很高兴你自己找到了。