Sometimes a web page layout may be too complicated or time-consuming to develop purely in ExtJS or perhaps you want to convert an existing html page to use ExtJS components. In either case there is a simple and straightforward way to inject ExtJS components into a complex html page. There are only a few simple steps needed to accomplish this:
- create the html
- fetch the html
- load the html
- plug in the ExtJS components
The following methods are from myScript.js.
This method loads the html using an Ajax request:
initStructure : function() {
Ext.Ajax.request({
url : 'myPage.html',
disableCaching : false,
method : 'GET',
success : this.onStructureLoaded.createDelegate(this)
});
} // initStructure()
This success handler puts the html text into an ExtJS XTemplate and then loads that into the body of this component (an ExtJS panel or window):
onStructureLoaded : function(response, options) {
var template = new Ext.XTemplate(
response.responseText
});
this.body.update(template.apply({
idBase : this.id
}));
this.initMyButton();
...
} // onStructureLoaded()
Once the html has been loaded into the DOM we can start plugging our ExtJS components into it:
initMyButton : function() {
new Ext.Button({
applyTo : this.getCustomId('myButton'),
text : 'My Button',
handler : this.onMyButtonClick.createDelegate(this)
});
} // initMyButton()
getCustomId : function(name) {
return String.format('{0}_{1}', name, this.id);
} // getCustomId()
