Geek Answers Handbook

Uploading an html file on the server side to the contents of the panel

I create a change log and I decided to download my change log from an .html file

I have

Ext.define('MeridianCRM.dialogs.recenthanges.recenthanges', { 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 can i solve this? (html: 'changes.html') How can I load html into my window?

+6
source share
2 answers

You will need to download html asynchronously and 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 a component with id:

 Ext.define('MeridianCRM.dialogs.recenthanges.recenthanges', { extend : 'Ext.window.Window', title : '   ', id: : 'my-log', ... });

Then you can:

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

You can "integrate" it into your panel as follows:

 Ext.define('MeridianCRM.dialogs.recenthanges.recenthanges', { 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 ); } }); } } ... });

Please note that you may have problems if the returned html contains the <head> (since the extjs page already has one).

+5
source

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

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

which will lead to this global code.

 Ext.define('MeridianCRM.dialogs.recenthanges.recenthanges', { 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 call to listener or Ext.Ajax .

+9
source

More articles:


All Articles