javascript - 在Extjs中，如何从另一个 Controller 调用 View 中的函数？

Question

我正在尝试让它在 Sencha Fiddle 中工作。我面临的问题是我在这一行遇到错误

MyApp.app.getView('MyApp.view.test2').test();

当您在文本框内单击时，它会失败并显示错误(在控制台日志中) Uncaught TypeError: MyApp.app.getView(...).test is not a function

//Controller
Ext.define('MyApp.controller.test', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.test',
    myVar:0,
    init: function() {
    }
});

//View
Ext.define('MyApp.view.test', {
    extend: 'Ext.form.field.Text',
    alias:'widget.test',
    controller: 'test',
    title: 'Hello',   
    listeners: {
        focus: function(comp){
            MyApp.app.getView('MyApp.view.test2').test(); //Fails with an error that test is not a function                        }
    },
    renderTo: Ext.getBody()
});

//View
Ext.define('MyApp.view.test2', {
    extend: 'Ext.form.Panel',
    alias:'widget.test2', 
    title: 'Hello2',     
    renderTo: Ext.getBody(),
    test:function()
    {
        alert('in MyApp.view.test2');
    }
});

Ext.application({
    name: 'MyApp',
    launch: function() {
        Ext.create('MyApp.view.test');
        Ext.create('MyApp.view.test2');
    }
});

Answer 1

getView() 函数仅返回类，而不是 View 的实例。请参阅ExtJs 5.1.1 Controller.getView() :

Returns a View class with the given name. To create an instance of the view, you can use it like it's used by Application to create the Viewport:

this.getView('Viewport').create();

要获取创建的 View 实例，您可以使用 Ext.ComponentQuery 将其存档.

//query returns an array of matching components, we choose the one and only
var test2View = Ext.ComponentQuery.query('test2')[0];
// and now we can execute the function
test2View.test();

查看运行简约 fiddle .

//View
Ext.define('MyApp.view.test', {
    extend: 'Ext.form.field.Text',
    alias: 'widget.test',
    title: 'Hello',
    listeners: {
        focus: function (comp) {
            //query returns an array of matching components, we choose the one and only
            var test2View = Ext.ComponentQuery.query('test2')[0]; 
            test2View.test();
            //MyApp.app.getView('MyApp.view.test2').test();//Fails with an error that test is not a function
        }
    },
    renderTo: Ext.getBody()
});


//View
Ext.define('MyApp.view.test2', {
    extend: 'Ext.form.Panel',
    alias: 'widget.test2',
    title: 'Hello2',
    renderTo: Ext.getBody(),
    test: function ()
    {
        alert('in MyApp.view.test2');
    }
});


Ext.application({
    name: 'MyApp',
    launch: function () {
        Ext.create('MyApp.view.test');
        Ext.create('MyApp.view.test2');
    }
});