0

Ext.Container を拡張してベース コンテナを開発しようとしていましたが、これにはいくつかのデフォルト アイテムが含まれています。サブクラスは、項目をコンテナーに直接ではなく、基本クラスの子コンポーネントに追加する必要があります。これを行う方法？setItems / applyItemsメソッドをオーバーライドして、項目を navigationView.add(items); に追加できますか? ?? これがどのように機能するかわかりません。私はExtJsを初めて使用するため、インラインまたは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

私の知る限り、それを行う「自動」の方法はありません。

いくつかのアプローチを提案できます：

まず、本当にこれを行う必要があるかどうかを確認します。たとえば、navbar を dockedItems 構成に移動し、navigationview を 1 レベル上に移動できます。したがって、AbstractContainer は navigationview を拡張し、navbar は dockedItem になり、アイテム構成を通常どおり使用できるようになります。

それ以外の場合は、別の構成 (「extraItems」または「navItems」としましょう) を使用して、抽象クラスの initComponent 関数をオーバーライドしてそれらをマージできます。そこで、ナビゲーションビューを実際に初期化するcallParentの後、次のようなことができます

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