javascript - Extjs MVVM - slider 小部件更改事件

Question

在 MVVM 结构中，我非常困惑如何从某些 View 元素触发 Controller 中的某些功能。按钮的处理程序和一些简单的东西正在工作，但这里我有一个例子，我无法正确理解。

https://fiddle.sencha.com/#fiddle/qcf

或者查看

Ext.define('MVVM.view.Master', {
extend : 'Ext.grid.Panel',
xtype  : 'mvvm-MasterView',
requires: [
    'Ext.grid.column.Action',
    'Ext.ProgressBarWidget',
    'Ext.slider.Widget',
    'Ext.sparkline.*'
],

title : 'Master Panel',

store : 'People',

columns: [
    { 
        text      : 'Name',  
        dataIndex : 'name' 
    },{
        text     : 'Slider',
        xtype    : 'widgetcolumn',
        width    : 120,
        dataIndex: 'progress',
        widget: {
            xtype: 'sliderwidget',
            minValue: 0,
            maxValue: 1,
            decimalPrecision: 2,
            listeners: {
                change: function(slider, value) {
                        //how to trigger something in the controller?

                    }                        
                }
            }
        }
    },        
    { 
        text      : 'Email', 
        dataIndex : 'email', 
        flex      : 1 
    },
    { 
        text      : 'Phone',
        dataIndex : 'phone' 
    }
]

});

每次 slider 发生变化时，我都需要调用 Controller 中的函数。怎么做？

这不起作用:

listeners: {
                    change: 'controllerFunction'
    }

谢谢

Answer 1

如果您指的是普通 Controller 而不是 ViewController，那么您可以执行以下操作:

varcontroller = MyApp.app.getController('MyApp.controller.MainController');
Controller .doMethod();

如果您指的是 View Controller ，那么这篇文章非常有用:

https://www.sencha.com/blog/using-viewcontrollers-in-ext-js-5/