extjs里的viewport 和window的理解，

最新推荐文章于 2019-04-19 17:59:41 发布

朱智文

最新推荐文章于 2019-04-19 17:59:41 发布

阅读量2k

点赞数

分类专栏： extjs

extjs 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1、Viewport

Viewport代表整个浏览器窗口，直接渲染到document.body节点，取代页面中的所有内容。一般作为应用程序主界面。

2、Viewport特点

3、Window

Window表示应用程序窗口，其实是一个浮动的层，直接调用show方法显示窗口，窗口有关闭按钮；窗口的关闭直接调用close方法，窗口的隐藏使用hide方法；使用modal属性来配置模式窗口。

4、窗口关闭及隐藏

5、模态及非模态窗口

1、Viewport，顶级界面，浏览器显示区域。

代表整个浏览器的应用程序主界面控件。VeiwPort表示整个浏览器显示区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort实例。看下面的代码：

  
  
   
           
   
   <
   
   script type
   
   =
   
   "
   
   text/javascript
   
   "
   
   >
   
   
        Ext.onReady(
   
   function
   
   (){
           
   
   new
   
    Ext.Viewport({
              layout: 
   
   "
   
   fit
   
   "
   
   ,
              items: [{
                 title: 
   
   "
   
   面板
   
   "
   
   ,
                 html: 
   
   ""
   
   ,
                 bbar: [{
                    text: 
   
   "
   
   按钮一
   
   "
   
   
                 },{
                    text: 
   
   "
   
   按钮二
   
   "
   
   
                 }]
              }]
           });
        });
        
   
   <
   
   /
   
   script>

显示效果：

2、Viewport特点

Viewport不需要再指定renderTo，而我们也看到Viewport确实填充了整个浏览器显示区域，并会随着浏览器显示区域大小的改变而改改。他有三个特点：

1）、创建即可使用。不需要渲染，当组件在创建时会自动渲染到document.body节点。

2）、不能使用程序改变该控件的大小，也没有滚动条。

3）、只是作为容器组件，没有额外的属性、方法及事件

下面再来看看Viewport的应用场景：

Viewport主要用于应用程序的主界面，可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport上常用的布局有fit、border等，当然在需要的时候其它布局也可以使用。看下面的代码：

  
  
   
           
   
   <
   
   script type
   
   =
   
   "
   
   text/javascript
   
   "
   
   >
   
   
        Ext.onReady(
   
   function
   
   (){
           
   
   new
   
    Ext.Viewport({
              enableTabScroll: 
   
   true
   
   ,
              layout: 
   
   "
   
   border
   
   "
   
   ,
              items: [{
                 title: 
   
   "
   
   面板
   
   "
   
   ,
                 region: 
   
   "
   
   north
   
   "
   
   ,
                 height: 
   
   50
   
   ,
                 html: 
   
   "
   
   <h1>网站后台管理系统!</h1>
   
   "
   
   
              }, {
                 title:
   
   "
   
   菜单
   
   "
   
   ,
                 region:
   
   "
   
   west
   
   "
   
   ,
                 width:
   
   200
   
   ,
                 collapsible:
   
   true
   
   , 
                 html:
   
   "
   
   菜单栏
   
   "
   
   
              }, {
                 xtype: 
   
   "
   
   tabpanel
   
   "
   
   ,
                 region: 
   
   "
   
   center
   
   "
   
   ,
                 items: [{
                    title: 
   
   "
   
   面板一
   
   "
   
   
                 }, {
                    title: 
   
   "
   
   面板二
   
   "
   
   
                 }]
              }]
           });
        });
        
   
   <
   
   /
   
   script>

显示效果如下：

3、窗口Window

我们来讲窗口Window控件，他可以用来表示应用程序中的一个窗口，在窗口中可以放置种种界面元素。窗口Ext.Window的父类是Ext.Panel，因此窗口其实是一种特殊的面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。

由于窗口是总是顶级容器，因此一般情况下我都是直接使用new操作符来创建一个Ext.Window对象来使用窗口。窗口中的内容与面板一样，可以是各种各样的Ext组件或控件元素，也可以是html片段或指定url中的html内容。由于窗口是一种特殊的面板，因此面板的能用特性对窗口仍然适用。相对于面板Ext.Panel来说，他不需要指定渲染目标，也就是不需要指定渲染到页面中的某一个节点。当调用窗口的show方法的时候，他会自动把窗口渲染(render)到当前文档的body节点中，并使该面板浮动在页面中，使得窗口不依赖于其它的父容器而存在。

4、窗口关闭及隐藏

窗口的隐藏及关闭。在程序中我们可以直接调用窗口对象的相关方法来实现窗口的隐藏及关闭操作。其中hide()方法用来隐藏窗口，而close()方法则用来直接关闭并销毁窗口。如果程序窗口在后面的程序中不需要重新显示，则应该使用hide()方法，这样可以节省再次初始化这个窗口所产生的资源消耗；如果窗口在后面的程序中不需要重新显示，则应该调用close()来关闭窗口，从而释放窗口对象所占用的系统资源。

默认情况下，窗口的标题工具栏中会包括一个关闭按钮，点击该按钮会执行窗口的关闭或隐藏操作。

5、模态及非模态窗口

窗口可以分为模态窗口及非模态窗口两种类型，所谓模态窗口就是指当该窗口打开时，除了本窗口中的内容可以操作以外，窗口以外的控件、界面元素及内容都处于不可用状态，只有当关闭该窗口后，这些变成不可用状态的元素及内容才能恢复成为可用状态；而非模态窗口打开时，不影响窗口以外的其它元素的可操作及可用状态。

在配置选项中通过modal选项来指定窗口是否属于模式窗口。默认情况下的窗口都是非模态窗口，当把modal属性设置为true时，窗口就会变成一个模态窗口。