在视图和视图控制器之间继承的 MVVM

Question

我们如何使用 ExtJs MVVM 模式扩展视图？扩展绑定了 viewcontroller 的视图的正确方法是什么？

我有一个带有 viewcontroller 的基本视图，我想扩展它，例如 this fiddle。

问题是基础 viewcontroller 中定义的方法在扩展视图中不再可用。 ExtJs 仅在扩展 viewcontroller 中查找要调用的方法。

Ext.define('Fiddle.view.Base', {
    extend: 'Ext.panel.Panel',
    requires: [
        'Fiddle.view.BaseController'
    ],
    controller: 'base',
    tbar: [{
        text: 'Base button',
        handler: 'onBaseMethod'
    }]
})

Ext.define('Fiddle.view.BaseController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.base',
    onBaseMethod: function(me){
        Ext.Msg.alert('Base', 'Base method')
    }
})

Ext.define('Fiddle.view.Extended', {
    extend: 'Fiddle.view.Base',
    requires: ['Fiddle.view.ExtendedController'],
    controller: 'extended',
    title: 'Viewcontroller inheritance',
    bodyPadding: 5,
    html: 'The Base button does not work, because the method is searched in ExtendedController only.',
    bbar: [{
        text: 'Extended button',
        handler: 'onExtendedMethod'
    }]
})

Ext.define('Fiddle.view.ExtendedController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.extended',
    onExtendedMethod: function(me){
        Ext.Msg.alert('Extended', 'Extended method')
    },
    renderTo: Ext.getBody()
})

Answer 1

您可以简单地使用 onExtendedMethod 方法扩展 'Fiddle.view.BaseController'。见 fiddle https://fiddle.sencha.com/#fiddle/20m3

明确地说：只需替换

Ext.define('Fiddle.view.ExtendedController', {
    extend: 'Ext.app.ViewController',

和

Ext.define('Fiddle.view.ExtendedController', {
    extend: 'Fiddle.view.BaseController',

在视图和视图控制器之间继承的 MVVM

MVVM with inheritance between views and viewcontrollers

extjs

mvvm

viewcontroller

extjs6