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

html extjs extjs4

11,298

Solution 1

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

Solution 2

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.

11,298

Author by

davetoxa

Top Specializations: Web development - https://evrone.com/web-development Ruby on Rails development - https://evrone.com/ruby Python web development - https://evrone.com/python High-performance Elixir development - https://evrone.com/elixir Microservices in Golang - https://evrone.com/go Rust development - https://evrone.com/rust User interfaces with React - https://evrone.com/react Node.js web development - https://evrone.com/nodejs DevOps solutions - https://evrone.com/devops Key expertise facilitating the process of creating a successful company by providing valuable web or mobile solutions providing consulting and advisory service for startups at any stage of their development building connections between members of remote teams PM/QA services guided by the most effective methodology and practices fluent in English and Russian

Updated on June 16, 2022

Comments

davetoxa almost 2 years

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 ?

davetoxa over 11 years

How i can integrate it to my MeridianCRM.dialogs.recentСhanges.recentСhanges class ?
davetoxa over 11 years

i have no problem with it, changes.html contains only li tags
Izhaki over 11 years

And another update to show integrating the code into the component itself.
davetoxa over 11 years

Thanks a lot, i did it! Sorry, but a can't inc you rep =) (My reputation is not enough)