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>佈局中斷

回答

相關問題