SenchaTouch：停靠<img>布局中断

我正在创建一个Sencha Touch应用程序。我想在我的视口底部放置一个横幅，以便它独立于其他UI代码。SenchaTouch：停靠<img>布局中断

当横幅html代码是一个静态文本，然后布局是像素完美。但是，当我放置一个位置时，布局会稍微有点突破。我不知道如何描述它，但是您可以自己看到在横幅面板中取消注释img标签。

我在做什么错？

您可以将此自包含代码复制/粘贴到index.html文件中，然后使用Chrome或iOS模拟器打开它。要查看该问题，只需取消注释HERE注释下方的html行并注释静态文本。

<!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>

谢谢！

来源

2011-11-05 tato

找到了！

只是增加
布局：“适合” 的旗帜面板解决我的问题

来源

2011-11-05 12:20:34 tato

SenchaTouch：停靠<img>布局中断

回答

相关问题