Question

我正在创建一个Sencha Touch应用程序。我希望在我的视口底部停靠一条横幅，这样它就可以独立于其他UI代码。

当横幅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>

谢谢！

Answer 1

找到它了！

只需添加
布局：'适合' 横幅面板解决了我的问题

Sencha Touch：停靠<img/>布局中断

1 个答案: