如何在下一个/上一次点击分页时调用动态创建的面板？

Question

我有这样的布局：

Ext.define('App.view.Demo', {
    extend: 'Ext.panel.Panel',
    requires:[
            'Ext.toolbar.Paging'
    ],
    xtype: 'app-main-demo',

    autoScroll: true,

    layout: {
        type: 'vbox',
        pack: 'start',
        align: 'stretch'
    },

    frame: true,

    initComponent: function() {
        Id = this.Id;
        var store = Ext.create('APP.store.Demo');
        store.proxy.url = store.proxy.url + this.Id;
        Ext.apply(this, {
            store: store
        });

        this.items = [],
        this.bbar = Ext.create('Ext.PagingToolbar', {
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            listeners: {
                beforechange: function(){
                    //do some stuff
                }

            }
        }),

        this.callParent();
    },
    listeners: {
        afterrender: function(obj,eOpts){
             obj.store.currentPage = 1;
             obj.store.load(function(records, operation, success) {
                console.log(records.length);
                if (records.length > 0){
                        var panel = Ext.create('App.view.Demo2',{
                        Id: Id,
                        oId: records[(obj.store.currentPage - 1)].data.id,
                        rId: records[(obj.store.currentPage - 1)].data.request_id
                     }) 
                    obj.add(panel);
                    obj.doLayout();
              }
            })
        }
    }
});

这里我动态创建面板（Demo2）。在下一个或上一次单击Demo的分页时，它应该动态绘制结构（将相应的oId和rId传递给Demo2）。

Demo2由Ext.panel.Panel扩展而来，在传递oId和rId的基础上，我正在查询数据库并更改按钮的颜色。

演示代码2：

Ext.define('Ext.view.Demo2', {
    extend: 'Ext.panel.Panel',

    xtype: 'app-main-demo2',
    layout: {
        type: 'fit',
        pack: 'start',
        align: 'stretch'
    },

    initComponent: function() {
        var store = Ext.create('Ext.store.Demo2');
        store.proxy.url = store.proxy.url + this.oId + '/' + this.rId;
        Ext.apply(this, {
            store: store
        });
        this.items= []

        this.callParent();
    },
listeners: {
        afterrender: function(obj, eOpts){
            var status;
            obj.store.load(function(records, operation, success) {
                 status= records[0].data.status;
                 if (status == 'Complete') {
                        var Panel = Ext.create('Ext.view.Demo3',{
                             style: {
                            background: '#A9A9A9'
                        }
                            flex:2,
            text: 'Completed'
                    }) ;
                    obj.add(Panel);
                    obj.doLayout();
                    }

});

在这里，我动态创建了Demo3，它扩展了Ext.button.Button。

演示代码3：

Ext.define('Ext.view.Demo3', {
    extend: 'Ext.button.Button',
    requires:[

    ],

    xtype: 'app-main-demo3',
    layout: {
        type: 'fit',
        pack: 'start',
        align: 'stretch'
    }
});

在演示中，在上一个和下一个单击如何销毁先前的结构并加载新结构。在此先感谢