MVVM with inheritance between view and viewcontrollers

How can we extend the view with MVJM ExtJs pattern? What is the correct way to extend a view with the view manager bound to it?

I have a basic view with its viewcontroller and I would like to extend it like in this script .

The problem is that the methods defined in the base view controller are no longer available in the extended view. ExtJs only looks at the extended viewcontroller for methods to be called.

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

      

+3


source to share


1 answer


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

To be explicit: just replace

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

      



from

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

      

+1


source







All Articles