PDA

View Full Version : Custom header and footer for sencha touch view



anuj123
11 Feb 2011, 3:09 PM
Sencha touch uses a html document with an empty body tag. Is it possible to write a simple editable header and footer section inside body tags and let sencha touch insert markup only in div between them(senchaPanel) instead of the body tag
<html>
<head>
</head>
<body>
<div id= "header"></div>
<div id="senchaPanel"></div>
<div id="footer"></div>
</body>
</html>

gcallaghan
11 Feb 2011, 3:55 PM
Try specifying the renderTo property in the Panel config.

You could also accomplish the same thing using Docked items.

anuj123
13 Feb 2011, 10:52 PM
What i really want is my header and footer should be totally independent of sencha touch and act as normal html markup. Only senchaPanel div should use sencha touch

alexandra.ac
14 Feb 2011, 3:33 AM
Hi,

I'm new to Sencha Touch, but from what I saw the framework also applies some classes and ids to the body tag. It also calculates the positioning, width and height of all the elements (like header, footer and content) in pixels, depending on the screen resolution, so they might overlap with the html elements that you create from the html source.

If you're not already, I suggest using Firebug for Safari to see what is going on in the html after the js code is executed.