I’m creating a Sencha Touch application. I would like to have a banner docked at the bottom of my viewport, so that it’s independent of the other UI code.
When the banner html code is a static text, then layout is pixel perfect. However, when I put an in place, then layout breaks a little bit. I don’t know how to describe it, but you can see for yourself uncommenting the img tag in the banner Panel.
What am I doing wrong?
You can just copy/paste this self-contained code into an index.html file and open it with Chrome or iOS Simulator. To see the problem, just uncomment the html line below the HERE comment and comment the static text.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>demo</title>
<script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js" type="text/javascript"></script>
<link href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<style>
.banner { background-color: red; text-align: center; }
</style>
<script type="text/javascript">
Ext.regApplication({
name: 'app',
launch: function() {
this.views.viewport = new app.views.Viewport();
}
});
app.views.banner = new Ext.Panel({
width: 320,
height: 50,
// >>>> HERE! Why using an image breaks the layout of the view?
//html: '<img alt="banner" src="http://4.bp.blogspot.com/_6k8rY5378Hw/Sqm9f3vBzPI/AAAAAAAAAJ4/683-xy6yWA0/s320/2.jpg" width="320" height="50" />',
html: 'banner',
cls: 'banner',
dock: 'bottom',
});
app.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: 'true',
layout: 'card',
cardSwitchAnimation: 'slide',
dockedItems: [
{
xtype: 'toolbar',
title: 'demo',
dock: 'top'
},
app.views.banner ],
});
</script>
</head>
<body>
</body>
</html>
Thank You!
found it!
just adding
layout: ‘fit’
to the banner panel solved my problem