在ExtJs中动态重新加载面板

Ext.onReady(function() {
    // 创建一个面板
    var myPanel = Ext.create('Ext.panel.Panel', {
        title: '动态面板',
        width: 400,
        height: 300,
        renderTo: Ext.getBody(),
        items: [
            {
                xtype: 'button',
                text: '刷新面板',
                handler: function() {
                    // 动态重新加载面板内容
                    myPanel.load({
                        url: 'data.json', // 数据来源
                        scripts: true, // 如果需要执行返回的脚本
                        callback: function(options, success, response) {
                            if (success) {
                                console.log('面板内容已成功更新');
                            } else {
                                console.error('加载失败:', response);
                            }
                        }
                    });
                }
            },
            {
                xtype: 'displayfield',
                itemId: 'contentField',
                fieldLabel: '内容'
            }
        ]
    });

    // 模拟数据加载
    myPanel.on('afterrender', function() {
        Ext.Ajax.request({
            url: 'data.json',
            success: function(response) {
                var data = Ext.decode(response.responseText);
                myPanel.down('#contentField').setValue(data.content);
            }
        });
    });
});