Question

在Sencha Touch 2的所有示例中，我看到代码示例如： -

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

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

但是，Sencha 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添加到Viewport，但实际代码确实如此。两个代码都相同吗？在示例代码中，View如何将自身添加到Viewport或可选？

Answer 1

Ext.Viewport基本上是一个容器，其布局设置为'card'。

在第一个示例中，该类应将配置选项“fullscreen”设置为true。设置全屏：true将在创建实例时自动将组件添加到视口。

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

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

来自全屏幕的文档

强制组件占用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 默认情况下，全屏配置为true，因此它将占用您的全屏。

我们真的需要明确地将Sencha View添加到Viewport吗？

1 个答案: