如何在 Sencha Extjs 6 中使用一些默认项抽象基本容器？

Question

我试图通过扩展 Ext.Container 来开发一个基础容器，其中有一些默认项。 subclass 应该将项目添加到基础 class 的子组件中，而不是直接添加到容器中。这该怎么做？我可以覆盖 setItems/applyItems 方法以将项目添加到 navigationView.add(items); ？？我不确定这是如何工作的。由于我是 ExtJs 的新手，因此无法确定哪种方法是通用的，因此它不会影响我的 subclass 使用内联或 add(item) 方法向其添加 n 个项目.

抽象类

 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');
    },

});

子类

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

据我所知，"automatic" 没有办法。

我可以推荐一些方法：

首先，检查您是否真的需要这样做：例如，您可以将导航栏移动到停靠项目配置并将导航视图向上移动一级。所以你的 AbstractContainer 将扩展 navigationview，navbar 将是一个停靠的项目，你将能够像往常一样使用项目配置。

否则，您可以使用不同的配置（比如 "extraItems" 或 "navItems"），并合并它们以覆盖抽象的 class initComponent 函数。在那里，在实际初始化导航视图的 callParent 之后，您可以执行类似

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

如何在 Sencha Extjs 6 中使用一些默认项抽象基本容器？

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

extjs

extjs5

extjs6

extjs6-modern

抽象类

子类