Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

extjs

extjs4

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 ?

like image 474
davetoxa Avatar asked Jan 31 '13 11:01

davetoxa


2 Answers

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).

like image 44
Izhaki Avatar answered Oct 21 '22 11:10

Izhaki


There is a better solution that uses the declaration of the loader config of the panel:

loader: {
    url: 'changes.html',
    autoLoad: true
},

which will result in this global code.

Ext.define('MeridianCRM.dialogs.recentСhanges.recentСhanges', {
    extend  : 'Ext.window.Window',
    title   : 'Последние изменения на сайте',
    modal   : true,
    height  : 400,
    width   : 500,
    resizable : false,
    loader: {
        url: 'changes.html',
        autoLoad: true
    },
    buttons: [{
        text: 'Закрыть',
        handler: function() {
            this.up('window').close();
        }
    }]
});

This is preferable, because we do not need to define a listener, nor an Ext.Ajax call.

like image 103
Lorenz Meyer Avatar answered Oct 21 '22 11:10

Lorenz Meyer