Нужно ли нам явно добавлять Sencha View в Viewport?

Question

Во всех примерах на Сенча Touch, 2, я вижу примеры кода, как: -

//contents of app.js 
Ext.application({ 
    name: 'MyApp', 
    views: ['MyView'], 

    launch: function() { 
     Ext.create('MyApp.view.MyView'); 
    } 
}); 

Однако код, сгенерированный Сенча Cmd, как: -

//contents of app.js 
Ext.application({ 
    name: 'MyApp', 
    views: ['MyView'], 

    launch: function() { 
     // Destroy the #appLoadingIndicator element 
     Ext.fly('appLoadingIndicator').destroy(); 

     Ext.Viewport.add(Ext.create('MyApp.view.MyView')); // <--- NOTICE THIS LINE 
    } 
}); 

Обратите внимание, что пример кода не добавьте вновь созданный View to Viewport, но фактический код сделал. Оба кода эквивалентны? В примере кода, как будет отображаться представление в Viewport или это необязательно?

Answer 1

Ext.Viewport - это в основном контейнер с макетом, установленным как «карта».

В вашем первом примере класс должен иметь опцию конфигурации «fullscreen», установленную в true. Настройка полноэкранного режима: true будет автоматически добавлять comoponent в область просмотра, когда экземпляр создан.

Ext.define('MyApp.view.test', { 
    extend: 'Ext.Container',    
    config: { 
     fullscreen:true, 
     html: ['screen2'].join("") 
    } 
});  

Ext.create('MyApp.view.test'); 

Из дока для полноэкранного

Force компонента, чтобы занять ширину и высоту 100% доступную, с помощью добавления его к Ext.Viewport.

Во втором примере компонент добавляется к окну просмотра. (Не нужно полноэкранный вариант). Как добавление панели в контейнер.

Ext.define('MyApp.view.home', { 
    extend: 'Ext.Container', 
    xtype: 'homecontainer',    
    config: { 
     html: ['test'].join("") 
    } 
}); 
Ext.Viewport.add(Ext.create('MyApp.view.home')); 

Из дока для видового

Поскольку Ext.Viewport простирается от Ext.Container, оно имеет в качестве макета (который по умолчанию Ext.layout.Card). Это означает, что вы можете добавлять предметы в в любое время, из любого места вашего кода. По умолчанию полноэкранная конфигурация Ext.Viewport истинна, поэтому она будет занимать весь экран .