0

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

请注意，示例代码没有添加新实例化的视图，Viewport但实际代码添加了。两个代码是否等效？在示例代码中，视图如何将自身添加到Viewport可选的 or 中？

4

1 回答 1

0

Ext.Viewport 基本上是一个布局设置为“卡片”的容器。

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

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

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

来自全屏文档

通过将组件添加到 Ext.Viewport，强制组件占用 100% 的可用宽度和高度。

在第二个示例中，将一个组件添加到视口中。（不需要全屏选项）。就像将面板添加到容器中一样。

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，因此它将占据您的整个屏幕。

于 2013-05-05T13:14:07.710 回答