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

我有一个这样的布局：

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

在演示中，在“上一页”和“下一页”上单击“如何销毁以前的结构并加载新结构”。提前谢谢