0

我试图通过扩展 Ext.Container 来开发一个基本容器，其中包含一些默认项。子类应该将项目添加到基类的子组件中，而不是直接添加到容器中。这个怎么做？我可以覆盖setItems / applyItems方法以将项目添加到 navigationView.add(items); ?? 我不确定这是如何工作的。由于我是 ExtJs 的新手，因此无法确定哪种方法是通用的，因此它不会影响我的子类使用 inline 或 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>'
        }],
    }],
});
4

1 回答 1

1

AFAIK，没有“自动”的方法可以做到这一点。

我可以建议一些方法：

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

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

this.down('navigationview').add(this.extraItems);
于 2016-09-22T12:48:52.397 回答