extjs - 在 Ext Js 视口(viewport)中动态加载内容(面板)

Question

好吧，基本上我正在研究这个问题，我有许多带有动态内容的组件，这些组件是用 PHP 在服务器端编写的。

根据用户的不同，我的组件会根据用户的角色而改变。

所以我需要知道如何做到这一点的任何方法/示例/信息。

1- 我使用了 EXTJS 的加载功能，但它清楚地表明我不会只加载纯文本的脚本。

2-我使用了 eval() 但我有点害怕这种方法，比如这个示例 crate 布局组件(静态)

var contentPanel = new Ext.Panel({
                frame: true,
                style: {marginTop: '10px'},
                height: 315,
                border: true,
                bodyBorder: false,
                layout: 'fit',
                id: 'contentPanel'
            });


            var mainPanel = new Ext.Panel({
                title: 'Panel Principal',
                id: 'mainPanel',
                border: true,
                frame: true,
                width: '50%',
                style: {margin: '50px auto 0 auto'},
                height: 400,
                renderTo: Ext.getBody(),
                items: [
                        {
                            html: '<a href="#" onClick="requestContent(\'panel1\');">Panel 1</a>'
                        },
                        {
                            html: '<a href="#" onClick="requestContent(\'panel2\');">Panel 2</a>'
                        },
                        contentPanel

                ]
            })

并用写在服务器上的js文件更新布局的内容

function receiveContent(options, success, response)
        {



            var respuesta = response.responseText;

            //console.log(respuesta);

            eval(respuesta);

            //console.log(options.url);

            url = options.url;

            url = url.substring(0,(url.search(/(\.)/)));

            var contenedor = Ext.getCmp('contentPanel');

            contenedor.removeAll();

            var contenido = Ext.getCmp(url);

            contenedor.add(contenido);
            contenedor.doLayout();
        }

        function requestContent(panel)
        {
            //panel es el nombre del archivo que quiero
            Ext.Ajax.request({
                url: panel+'.js',
                callback: receiveContent
            });
        }

要做到这一点的任何其他方式，我不想做的是制作一百万个不同的组件并在登录时将它们全部加载，就像许多人似乎说的那样

Answer 1

为了解决您的问题:

.load 方法将加载脚本并在内容完成加载后对其进行评估，但是要完成此操作，您需要设置 scripts:true 选项，示例可能是:

my_panel.load({
  url: 'url_to_load.php/hmt/html/asp...',
  params: {param1: param1value, param2: param2value...etc},
  nocache: true,
  timeout: 30,
  scripts: true
});

使用 eval() 很好......但是看到上面的 scripts:true 配置选项为源文件中的 javascript 完成了这个，你不应该需要使用它。

希望这可以帮助