ExtJS全屏集装箱不能正常工作

在以前的Sencha Architect 2版本中，没有任何问题。我刚刚升级到Sencha Architect 3，我似乎无法制作容器来填充浏览器屏幕。 enter image description here ExtJS全屏集装箱不能正常工作

我的网站有一个视口。里面有一个背景的容器。但通常它会填满整个浏览器，但在这种情况下不会。容器无法填充所有的浏览器高度，它只是中途停止。下面是视口的一些代码：

Ext.define('QuickDecisionExtJS.view.AppViewport', { 
    extend: 'Ext.container.Viewport', 

    id: 'AppView', 
    layout: { 
     type: 'card' 
    }, 

    initComponent: function() { 
     var me = this; 

     Ext.applyIf(me, { 
      items: [ 
       { 
        xtype: 'container', 
        cls: 'loginBackground', 
        id: 'LoginView', 
        items: [ 
         { 
          xtype: 'form', 
          cls: 'loginForm', 
          frame: true, 
          id: 'frmLogin', 
          width: 450, 
          defaults: { 
           anchor: '100%' 
          }, 
          bodyPadding: '5px', 
          icon: 'resources/Start.png', 
          title: 'Đăng nhập hệ thống' 
         }, 
         { 
          xtype: 'image', 
          id: 'imgLogin', 
          src: 'resources/QuickDecision.png' 
         } 
        ] 
       } 
      ] 
     }); 

     me.callParent(arguments); 
    } 

});

我的网站有两种观点，一个登录视图和主视图，每个人都有自己的背景。这就是为什么我为登录容器添加CSS类的原因。我使用Sencha海王星主题。无论如何解决这个问题？它与CSS有什么关系？我只是张贴一些CSS的情况下：

.loginBackground { 
    background-image: url('resources/white-metro.jpg'); 
    background-size: 100% 100%; 
} 
.loginForm { 
    margin: 15% auto; 
}

来源

2013-12-10 Meister

我认为这正在发生，因为无论DIV应用.loginBackground类没有完全伸展。对于一个真正的完全伸展背景我会删除loginBackground类赞成以下的定义：

body { 
    background-image: url('resources/white-metro.jpg'); 
    background-size: 100% 100%; 
}

，因为它似乎仅仅是额外的嵌套和视口将被默认渲染然后，您可以完全删除'loginBackground'容器到页面的<body>元素。

来源

2013-12-10 17:50:05 drembert

我的网页有两个视图，一个登录视图和一个主视图，每个都有自己的背景。这就是为什么我为登录容器添加CSS类的原因。任何方式来解决这个问题？ – Meister

如果每个视图都是从不同的URL访问的，那么拥有两个不同的视口是不可能的，每个页面一个。看起来您正在使用卡片布局，但您可以使用另一个使用不同视口的登录URL。视口只是一个适合浏览器窗口的容器，具有多个视口尤其如果它们都包含不同的样式和组件时，不会出现问题。 – drembert

我正在瞄准一个单页的网络应用程序，但我可能不得不采取你的想法。谢谢：） – Meister

ExtJS全屏集装箱不能正常工作

回答

相关问题