在视图和视图控制器之间使用继承的MVVM模式

Question

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

我有一个基础视图以及它的viewcontroller，我想像这个例子一样扩展它。

问题在于在扩展视图中不再能够访问在基础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()
})

- Lorenz Meyer

---

为什么你不想用'onExtendedMethod'方法扩展'Fiddle.view.BaseController'呢？https://fiddle.sencha.com/#fiddle/20m3 - fen1ksss

@fen1ksss 谢谢，这很明显。我只是找了几个小时没找到。把它作为答案发布，我会接受的。 - Lorenz Meyer

Answer 1

你可以通过扩展“Fiddle.view.BaseController”并使用onExtendedMethod方法来实现。请查看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',

- fen1ksss