Sencha Touch中的 Viewport

在Sencha Touch中，Viewport组件是单例的。也就是说，在你的应用程序中，只有一个Viewport。在程序运行后，Viewport组件会自动被创建。你可以直接用Ext.Viewport.add()来把其它组件添加到主界面中。当然，还有一种方式，它隐式地等同于Viewport组件的add方法。那就是组件的fullscreen属性。例如，我创建一个TabPanel组件：

<!-- lang: js -->
    Ext.create('Ext.TabPanel', {
    fullscreen: true,
    tabBarPosition: 'bottom',

    defaults: {
        styleHtmlContent: true
    },

    items: [
        {
            title: 'Home',
            iconCls: 'home',
            html: 'Home Screen'
        },
        {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
        }
    ]
});

这里的fullscreen:true也会自动TabPanel组件添加到Viewport中。