从即时创建的表单访问ViewController中的函数

时间:2015-10-04 14:32:54

标签: javascript extjs extjs5

视图控制器将处于活动状态,但它将控制许多其他视图的一个子视图,因此我认为将有其他活动视图控制器。

通过 on-the-fly 基本上,表单由完全不同的调度程序创建,包含组件和处理程序等,视图控制器和表单之间没有直接连接。

视图控制器有几个我需要的函数来获取结果:

canContinue: function (arg1) {var result = true; /*...*/ return result;}
getStatus: function (arg1, arg2) {var result = 0; /* ... */ return result;}

/*...*/表示代码被省略。所以我想访问视图控制器和这些功能。这些方面的东西:

var controller = /* how to get it? */;

if (!controller.canContinue(p))
    alert(controller.status(q, r));

我读过它不建议以这种方式直接访问函数,所以尝试触发事件,但我似乎无法获得结果,这是我需要的。

我以为我可以给视图控制器一个itemId,然后做Ext.ComponentQuery.query('#itemId'),但它似乎不起作用。我认为视图控制器不是一个组件,是有意义的。

视图控制器具有唯一的类和别名,如果有帮助的话,一次只能激活其中一个视图控制器。

我可能错过了一些非常简单的事情。欢迎任何帮助。

1 个答案:

答案 0 :(得分:3)

我对你的问题不太确定。这就是我的理解:你有不同的观点,他们之间没有直接的关系。但是你想要达到彼此视图的控制器。如果是这样,请检查这个小提琴:https://fiddle.sencha.com/#fiddle/urg

否则,我宁愿你准备一个小提琴,它会显示你的问题。

Ext.define('FirstPanel', {
            extend: 'Ext.panel.Panel',
            controller: 'FirstPanelController',
            layout: 'fit',
            itemId: 'firstPanel',
            items: [{
                xtype: 'button',
                text: 'FirstPanel Button',
                handler: 'FirstButtonClick'
            }]
        });
        Ext.define('FirstPanelController', {
            extend: 'Ext.app.ViewController',
            alias: 'controller.FirstPanelController',
            FirstButtonClick: function(button) {
                var me = this;
                var SecondPanelController = me.getView().mainView.down('#secondPanel').getController();
                SecondPanelController.FirstButtonClick();
                console.log('FirstButton Click');

            },
            SecondButtonClick: function() {
              alert('You are in FirstPanelController');  
            },
            init: function() {
                var me = this;     
            }
        });

        Ext.define('SecondPanelController', {
            extend: 'Ext.app.ViewController',
            alias: 'controller.SecondPanelController',
            SecondButtonClick: function(button) {
                var me = this;
                var FirstPanelController = me.getView().up().down('#firstPanel').getController();
                FirstPanelController.SecondButtonClick();
                console.log('SecondPanelController');

            },
            FirstButtonClick: function() {
                alert('You are in SecondPanelController');
            },
            init: function() {
                var me = this;     
            }
        });

        Ext.define('SecondPanel', {
            extend: 'Ext.panel.Panel',
            controller: 'SecondPanelController',
            layout: 'fit',
            itemId: 'secondPanel',
            items: [{
                xtype: 'button',
                text: 'SecondPanel Button',
                handler: 'SecondButtonClick'
            }]
        });


        Ext.define('MainPanel', {
            extend: 'Ext.panel.Panel',
            initComponent: function() {
              var me = this;
              me.items = [
                  Ext.create('FirstPanel', {
                      mainView: me
                  }),
                  Ext.create('SecondPanel')
              ]
              me.callParent();
            }
         });