StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POExtJS Fullscreen Container not working
text
Body
copied!<p>In the previous version of Sencha Architect 2, there's no problem. I've just upgrade to Sencha Architect 3, and I can't seem to make a container to fill the browser screen.<img src="https://i.stack.imgur.com/TErvB.jpg" alt="enter image description here"></p> <p>My web has a Viewport. Inside there's a Container with the background. But normally it would fill the whole browser, but it doesn't in this case. The Container can't fill all of the browser height, it just stops midway. Here are some code of the Viewport:</p> <pre><code>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); } }); </code></pre> <p>My web has two views, a login view and a main view, each has their own background. That's why I added a CSS class for the login container. I use the Sencha Neptune theme. Anyway to solve this? Does it have anything to do with CSS? I will post some CSS just in case:</p> <pre><code>.loginBackground { background-image: url('resources/white-metro.jpg'); background-size: 100% 100%; } .loginForm { margin: 15% auto; } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload