Sencha touch SenchaTouch：停靠<；img>；布局中断
我正在创建Sencha Touch应用程序。我希望有一个横幅停靠在我的视口底部，这样它就独立于其他UI代码 当横幅html代码是静态文本时，布局是像素完美的。然而，当我在适当的位置放置一个新的布局时，布局会有一点中断。我不知道如何描述它，但您可以在横幅面板中看到自己取消img标记的注释 我做错了什么 您只需将这个自包含的代码复制/粘贴到index.html文件中，然后用Chrome或iOS模拟器打开它。要查看问题，只需取消注释HERE注释下面的html行，并注释静态文本Sencha touch SenchaTouch：停靠<；img>；布局中断,sencha-touch,Sencha Touch,我正在创建Sencha Touch应用程序。我希望有一个横幅停靠在我的视口底部，这样它就独立于其他UI代码 当横幅html代码是静态文本时，布局是像素完美的。然而，当我在适当的位置放置一个新的布局时，布局会有一点中断。我不知道如何描述它，但您可以在横幅面板中看到自己取消img标记的注释 我做错了什么 您只需将这个自包含的代码复制/粘贴到index.html文件中，然后用Chrome或iOS模拟器打开它。要查看问题，只需取消注释HERE注释下面的html行，并注释静态文本 <!DOCTYPE
<!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>
演示
.banner{背景色：红色；文本对齐：居中；}
分机再应用({
名称：“应用程序”，
启动：函数（）{
this.views.viewport=新建app.views.viewport（）；
}
});
app.views.banner=新的外部面板({
宽度：320，
身高：50，
//>>>>这里！为什么使用图像会破坏视图的布局？
//html:“”，
html:'横幅'，
cls:‘旗帜’，
船坞：“底部”，
});
app.views.Viewport=Ext.extend（Ext.Panel{
全屏：“正确”，
布局：“卡片”，
CardSwitch动画：“幻灯片”，
dockedItems:[
{
xtype:'工具栏'，
标题：“演示”，
码头：“顶部”
},
app.views.banner]，
});
布局：“适合” 到横幅面板解决了我的问题