MVVM with inheritance between views and viewcontrollers

Question

How can we extend a view with ExtJs MVVM pattern ? What is the correct way to extend a view that has a viewcontroller bound to it ?

I have a base view with its viewcontroller, and I would like to extend it, like in this fiddle.

The problem is that the methods defined in the base viewcontroller are no longer accessible in the extended view. ExtJs is only looking in the extended viewcontroller for the methods to be invoked.

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()
})

Why don't you want to extend 'Fiddle.view.BaseController' with onExtendedMethod method? https://fiddle.sencha.com/#fiddle/20m3 — fen1ksss, May 31 '17 at 17:04
@fen1ksss Thanks, it was fairly obvious. I just couldn't find it out for a couple of hours. Post it as an answer, I'll accept it. — Lorenz Meyer, May 31 '17 at 19:21

score 1 · Accepted Answer · edited Jun 01 '17 at 06:15

1

You can simply extend 'Fiddle.view.BaseController' with onExtendedMethod method. See the fiddle https://fiddle.sencha.com/#fiddle/20m3

To be explicit: just replace

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

with

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

edited Jun 01 '17 at 06:15

Lorenz Meyer

19,166
22
75
121

answered May 31 '17 at 19:32

fen1ksss

1,100
5
21
44

MVVM with inheritance between views and viewcontrollers

1 Answers1