我們是否真的需要向視口明確添加Sencha視圖？

Question

在所有上煎茶觸摸2 I看到碼樣本一樣的例子： -

//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 
    } 
}); 

注意，示例代碼沒添加新實例化的視圖到Viewport，但實際的代碼。兩種代碼是否相同？在示例代碼中，View如何將自己添加到Viewport或者這是可選的？

Answer 1

Ext.Viewport基本上是一個佈局設置爲'card'的容器。

在您的第一個示例中，該類應該將「全屏」配置選項設置爲true。 設置全屏：true將在創建實例時自動將該組件添加到視口。

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

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

從DOC全屏

分力佔用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')); 

從DOC視口

由於Ext.Viewport從Ext.Container延伸，它有作爲佈局 （默認爲Ext.layout.Card）。這意味着您可以隨時在代碼中的任何位置將項目添加到 。 Ext.Viewport 全屏配置在默認情況下爲true，因此它會佔用整個屏幕的 。