ExtJs4 load panel from URL

Question

In ExtJs 3x this code

Ext.getCmp('specific_panel_id').load({
    url:'url_containing_scripts.htm',
    scripts:true, 
    params:{
        something:else
    }
});

works for loading content from URL into a specific panel...

However it does not work in ExtJs 4.x.

Answer 1

This also work:

Ext.define('EI.view.Viewport',{
extend: 'Ext.container.Viewport',
alias: 'widget.principal',

layout: {
    type: 'vbox',
    align: 'center',
    pack: 'center'
},

items:[
    {
        xtype: 'panel',
        title: 'Mi Documentacion',
        width: 800,
        height: 600,
        border: false,
        autoScroll: true,
        loader: {
            autoLoad:true,
            url :'http://localhost/docs/'
        }
    }

]

});

Answer 2

The load method is gone from the Ext.panel.Panel in ExtJs4. As a workaround you could try to load your panel content with a regular Ext.Ajax.request and set these as items to your panel.

Example:

var itemsConfig;
Ext.Ajax.request({
url : 'url_containing_scripts.htm',
callback : function(options, success, response) {
        itemsConfig = Ext.decode(response.text);
    }
});
Ext.getCmp('specific_panel_id').add(itemsConfig);

Where url_containing_scripts.htm should have the items you want on your panel in JSON format.

In the same way you can load the whole panel with all inital configuration settings you need.

Answer 3

Solved it with the following code:

dynamicPanel = new Ext.Component({
           loader: {
              url: 'url_containing_scripts.htm',
              renderer: 'html',
              autoLoad: true,
              scripts: true
              }
           });

Ext.getCmp('specific_panel_id').add(dynamicPanel);