How to Abstract a base container with some default items in Sencha Extjs 6?

Question

I was trying to develop a base container by extending Ext.Container, which have some default items in it. A subclass should add the items to the child component of the base class and not directly to the container instead. How to do this? May i override the setItems/applyItems method to add the items to navigationView.add(items); ?? I'm unsure about how this works. Since i'm new to ExtJs, unable to identify which is the way to do it generically so that it won't affect my subclass to add n number of items to it either using inline or add(item) method.

AbstractClass

 Ext.define('MyApp.container.AbstractMainContainer', {
    extend: 'Ext.Container',
    xtype: 'abstractmaincontainer',
    requires: [
        'MyApp.container.NavigationView',
        'MyApp.control.NavigationBar'
    ],

    config: {
        layout: {
            type: 'vbox',
            pack: 'start',
            align: 'stretch'
        },
        flex: 1,
        height: '100%',
        width: '100%'

    },

    controller: 'maincontroller',

    items: [{
        xtype: 'navbar',
        itemId: 'navbar'
    }, {
        xtype: 'navigationview',
        itemId: 'navigationview',
        reference: 'navigationview',
        navigationBar: false,
        layout: {
            pack: 'start',
            align: 'stretch'
        },
        flex: 1,
        height: '100%',
        items: [
          // new item should added here
         ]
    }],

    /**
     * @method getContentView  add the items to this rather than directly

     * @return {void}
     */
    getContentView: function() {
        return this.down('#navigationview');
    },

});

SubClass

Ext.define('MyApp.main.view.MainContainer', {
extend: 'MyApp.container.AbstractMainContainer',
requires: [
    'MyApp.container.AbstractMainContainer'
],

config: {

},
items: [{
        // we should not directly add items here this will remove the navbar and navigation view
        // HOW TO ADD THIS IN A GENERIC WAY??
        xtype: 'container',
        layout:{
            type:'card'
        },
        items: [{
            xtype: 'button',
            role: 'nav',
            title: 'Card 1',
            text: 'go to next',
            handler: function() {

            }
        }, {
            itemId: 'myCard',
            title: 'Card 2',
            html: '<h1>Card 2</h1>'
        }],
    }],
});

Answer 1

AFAIK, there's no "automatic" way to do it.

I can suggest some approaches:

First of all, check if you really need to do this: for example, you could move the navbar to the dockedItems config and move the navigationview one level up. So your AbstractContainer will extend navigationview, navbar will be a dockedItem, and you will be able to use the items config as usual.

Otherwise, you could use a different config (let's say "extraItems" or "navItems"), and merge them overriding the abstract class initComponent function. There, after a callParent that actually initialize the navigationview, you could do something like

this.down('navigationview').add(this.extraItems);