2013-12-10 3 views
0

В предыдущей версии Sencha Architect 2 нет проблем. Я только что обновился до Sencha Architect 3, и я не могу создать контейнер для заполнения экрана браузера. enter image description hereЭкстремальный контейнер ExtJS не работает

У меня в Интернете есть видовое окно. Внутри есть Контейнер с фоном. Но обычно это заполняло весь браузер, но в этом случае это не так. Контейнер не может заполнить всю высоту браузера, он просто останавливается на полпути. Вот некоторый код Viewport:

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 Neptune. В любом случае, чтобы решить это? Это имеет какое-либо отношение к CSS? Я буду размещать некоторые CSS на всякий случай:

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

ответ

1

Я думаю, что это происходит потому, что все, что ДИВ .loginBackground класс применяется к не полностью растянуты. Для истинного полностью растянутого фона Я хотел бы удалить класс loginBackground в пользу следующего определения:

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

Затем можно полностью удалить 'loginBackground' контейнер, поскольку он, как представляется, просто дополнительный вложенности и окно просмотра по умолчанию будет оказываться к элементу страницы <body>.

+0

У меня есть два вида, вид входа и основной вид, каждый из которых имеет свой собственный фон. Вот почему я добавил класс CSS для контейнера входа. Любой способ решить это? – Meister

+0

Если для каждого из этих видов доступа доступны разные URL-адреса, не может быть и двух разных видовых экранов, по одному для каждой страницы. Похоже, вы используете макет карты, но у вас может быть отдельный URL-адрес для входа в систему, в котором используется другое окно просмотра. Видовой экран - это просто контейнер, который подходит для окна браузера, и не исключено, что у него есть несколько видовых экранов, особенно если они содержат разные стили и компоненты. – drembert

+0

Я стремился к одностраничному веб-приложению, но мне, возможно, придется принять вашу идею. Благодаря :) – Meister

Смежные вопросы