ExtJs4.x viewport 效果

viewport代表浏览器窗口的整个显示区域，将document body作为渲染对象，它会根据浏览器窗口的大小自动调整自身的尺寸，在一个页面中只允许出现一个ViewPort实例，此外它没有提供对滚动条的支持，如果需要使用滚动条，那么应该在其子面板中进行设置。

图1：viewport示例

上图1的实现代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Ext.onReady(function() {     var panel = Ext.create('Ext.container.Viewport', {          layout : 'border',         items : [{             title : 'north panel',             html : 'north content',             region : 'north',             height : 100         }, {             title : 'west panel',             html : 'west content',             region : 'west',             width : 150         }, {             title : 'main panel',             html : 'main content',             region : 'center'         }]     }); });

viewport表示的是整个浏览器的窗口，上面的示例中，将border布局的对象放在了viewport中，即放在了整个窗口中，其大小随着窗口的大小而变化。

viewport代表浏览器窗口的整个显示区域，将document body作为渲染对象，它会根据浏览器窗口的大小自动调整自身的尺寸，在一个页面中只允许出现一个ViewPort实例，此外它没有提供对滚动条的支持，如果需要使用滚动条，那么应该在其子面板中进行设置。

图1：viewport示例

上图1的实现代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Ext.onReady(function() {     var panel = Ext.create('Ext.container.Viewport', {          layout : 'border',         items : [{             title : 'north panel',             html : 'north content',             region : 'north',             height : 100         }, {             title : 'west panel',             html : 'west content',             region : 'west',             width : 150         }, {             title : 'main panel',             html : 'main content',             region : 'center'         }]     }); });

viewport表示的是整个浏览器的窗口，上面的示例中，将border布局的对象放在了viewport中，即放在了整个窗口中，其大小随着窗口的大小而变化。