Loading a server side html file into the content of a panel

extjs, extjs4, html

Solution

You'd need to load the html asynchronously, then inject it into your component. So:

Ext.Ajax.request({
    url: 'changes.html',
    success: function(response){
        // response.responseText will have your html content
        // you can then feed it into your component using update()
    }
});

So if you declare you component with id:

Ext.define('MeridianCRM.dialogs.recentСhanges.recentСhanges', {
    extend  : 'Ext.window.Window',
    title   : 'Последние изменения на сайте',

    id:     : 'my-log',

    ...
});

You can then do:

Ext.Ajax.request({
    url: 'changes.html',
    success: function(response){
        Ext.getCmp('my-log').update( response.responseText );
    }
});

You can `integrate' it into your panel like so:

Ext.define('MeridianCRM.dialogs.recentСhanges.recentСhanges', {
    extend  : 'Ext.window.Window',
    title   : 'Последние изменения на сайте',

    id:     : 'my-log',

    listeners: {
        'render': function()
            {
                Ext.Ajax.request({
                    url: 'changes.html',
                    success: function(response){
                        Ext.getCmp('my-log').update( response.responseText );
                    }
                });                
            }
    }

    ...
});

Notice though, that you may have issues if the returned html contains `<head>` tag (as the extjs page already has one).

Problem

I'm creating a changelog and i decided to load my changelog from .html file I've got ``` Ext.define('MeridianCRM.dialogs.recentСhanges.recentСhanges', { extend : 'Ext.window.Window', title : 'Последние изменения на сайте', modal : true, height : 400, width : 500, resizable : false, html: 'changes.html', buttons: [{ text: 'Закрыть', handler: function() { this.up('window').close(); } }] }); ``` How i can solve this ? (html: 'changes.html') How i can load html to my window ?

Original source