嵌套的initComponent无法正常工作

Question

我有一个窗口（Ext.window.Window），其中我有卡片布局的窗格。我正在动态地将网格添加到面板项目：

Ext.define('Example.view.ProcessInfoLayout',{
   extend: 'Ext.window.Window',
    requires: [
        'Ext.layout.container.Card',
        'Example.view.SubProcessController',
        'Example.view.Info'
    ],
    xtype: 'app--processinfolayout',

    controller: 'main-content-subprocesscontroller',
    layout: 'fit',
    initComponent: function(){

       this.callParent();

        this.header = {
            titlePosition: 0,
            items:[{
                xtype: 'button',
                text: 'Resubmission',
                glyph: 'xf0e2@FontAwesome',
                tooltip: 'Resubmit',
                listeners: {
                    click: 'ResubmissionClick'
                }
            }]
        };
        console.log('thisw')


        this.items =  []

        this.add({
            xtype: 'panel',
            frame: false,
            border: false,
            itemId: 'v6panel',

            layout: {
                type:'card',
                deferredRender: true
            },

           defaultListenerScope: true,

           bbar: ['->',
                {
                    itemId: 'card-prev',
                    text: '« Previous',
                    handler: 'showPrevious',
                    disabled: true
                },
                {
                    itemId: 'card-next',
                    text: 'Next »',
                    handler: 'showNext'
                }
            ],

            items: [],
            initComponent: function() {
                var me = this;
                me.callParent();



                me.store = Ext.getStore('app-main-store-' + me.up('app-main-processinfolayout').processData.id);

                if (!me.store) {
                    me.store = Ext.create('Example.store.ProcessInfo', {
                        storeId: 'app-main-store-' + me.up('app-main-processinfolayout').processData.id,
                        room: me.up('app-main-processinfolayout').processData.id
                    });

                    me.store.proxy.url = Ext.String.format(me.store.proxy.url, 
                                                           me.up('app-main-processinfolayout').processData.id);
                }




              me.store.on('load', function(store, records, successful, eOpts) {
                console.log('@@@@')
                me.fireEvent('refreshProcessInfoLayoutView', me, records);
              });

            },

            listeners:{
                beforerender: function(obj) {
                    console.log('Hey Australia')
                    obj.store.load();
                },
                refreshProcessInfoLayoutView: 'refreshProcessInfoLayoutView',

               scope: 'this'


            },
            refreshProcessInfoLayoutView: function(obj, records) {
                console.log('thise')
                console.log(records[0].data.processes)
                    if (records[0].data.v6_processes) {
                        for (elem in records[0].data.processes) {
                            var subprocessInfo = {
                                xtype: 'app-main-cycle-info',
                                processId: records[0].data.processes[elem],
                                itemId: 'card-' + elem
                            };
                            obj.add(subprocessInfo);
                        }
                }
            },

            showNext: function () {
                this.doCardNavigation(1);
            },

            showPrevious: function (btn) {
                this.doCardNavigation(-1);
            },

            doCardNavigation: function (incr) {
                var me = this;
                var l = me.getLayout();
                var i = l.activeItem.id.split('card-')[1];
                var next = parseInt(i, 10) + incr;
                l.setActiveItem(next);

                me.down('#card-prev').setDisabled(next===0);
                me.down('#card-next').setDisabled(next===this.down('#v6panel').store.getCount() - 1);
            }
        })


    }
})

它将控制台日志打印到thisw。之后它会给出错误... Uncaught TypeError：me.items.insert不是函数。我做错了什么。请建议。

Answer 1

在指定this.callParent();和initComponent之前，不要在this.header中this.items {$ 1}}。在之后。这是因为一旦你调用this.callParent();你的组件被实例化，因此尝试像this.items = []这样的东西只是搞砸了。

此外，而不是：

this.items = [];
this.add({stuff});

做的：

this.items = [{stuff}];

Answer 2

在处理嵌套项和initComponent函数时，您可以使用xhooks配置，以便callParent()可以正常工作：

Ext.define('Example.view.ProcessInfoLayout', { 
    // ...
    xhooks: {
        initComponent: function(){
            this.callParent();
            // ...
            this.add({
                xtype: 'panel',
                // ...
                items: [],
                initComponent: function() {
                    // ...
                }
            });
        }
    }
});

查看Ext.Component constructor method。