I was playing with panels and one problem was to load HTML content form the page’s BODY and display it into the panel‘s body like using the html property: I’m not happy to write HTML code inside Javascript!
... <head> ... sencha touch stuff ... </head> <body> <div id="content-provider">my <strong>panel</strong>'s content...</div> </body> ....
This piece of code contains some strings wrapped by a named DIV placed into the BODY like every web page on the net. Now I want to create an App to display this text inside the main panel with styleHtmlContent applied:
Ext.onReady(function(){
new Ext.Panel({
fullscreen:true,
tpl: new Ext.Template.from('content-provider'),
data: {}
}).show();
});
The very important instructions are tpl and data.
tpl:
This panel’s property is used to setup a template to be filled with some data provided by a store or directly whit the data property (see next paragraph).
TPL uses a Template or an XTemplate object (booth are Sencha Touch’s classes) to handle a piece of xHTML code with placeholders, mix it with a data object and render it as a simple xHTML source.
A very usefull method of booth Template and XTemplate is from() to load the template string from a string, a DOM element identified by an ID or a configuration object. Obviously the DOM element identified by an ID is our case!
data:
TPL property is not enought to achieve our objective: without some data to render our panel will be left blank!
The workaround is to set an empty data object so we force the rendering of the Template.
Download the example code!
If you want to test this source in your local machine just download this Example Package and the Sencha Touch SDK!
