SenchaTouch: закрепленный <img>разрывы макета - PullRequest
Новая
       1

SenchaTouch: закрепленный <img>разрывы макета

0 голосов
/ 05 ноября 2011

Я создаю приложение Sencha Touch. Я хотел бы, чтобы баннер был закреплен внизу моего окна просмотра, чтобы он не зависел от другого кода пользовательского интерфейса.

Если HTML-код баннера представляет собой статический текст, макет является идеальным для пикселей. Однако когда я ставлю на место, то макет немного ломается. Я не знаю, как это описать, но вы можете сами увидеть, что прокомментировали тег img на панели баннера.

Что я делаю не так?

Вы можете просто скопировать / вставить этот автономный код в файл index.html и открыть его с помощью Chrome или iOS Simulator. Чтобы увидеть проблему, просто раскомментируйте строку 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>

Спасибо!

1 Ответ

1 голос
/ 05 ноября 2011

нашел его!

просто добавив
макет: «подгонка» к панели баннера решила мою проблему

...