ExtJS学习之Ext.container.Viewport

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

viewport示例

图1:viewport示例

上图1的实现代码如下:

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中,即放在了整个窗口中,其大小随着窗口的大小而变化。

本文标题:ExtJS学习之Ext.container.Viewport

本文链接:http://yedward.net/?id=287

本文版权归作者所有,欢迎转载,转载请以文字链接的形式注明文章出处。

相关文章