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

i trying develop base container extending ext.container, have default items in it. subclass should add items child component of base class , not directly container instead. how this? may override setitems/applyitems method add items navigationview.add(items); ?? i'm unsure how works. since i'm new extjs, unable identify way generically won't affect subclass add n number of items 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 items rather 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: [{         // should not directly add items here remove navbar , navigation view         // how add in generic way??         xtype: 'container',         layout:{             type:'card'         },         items: [{             xtype: 'button',             role: 'nav',             title: 'card 1',             text: 'go next',             handler: function() {              }         }, {             itemid: 'mycard',             title: 'card 2',             html: '<h1>card 2</h1>'         }],     }], }); 

afaik, there's no "automatic" way it.

i can suggest approaches:

first of all, check if need this: example, move navbar dockeditems config , move navigationview 1 level up. abstractcontainer extend navigationview, navbar dockeditem, , able use items config usual.

otherwise, use different config (let's "extraitems" or "navitems"), , merge them overriding abstract class initcomponent function. there, after callparent initialize navigationview, like

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