八、Viewport

Viewport是一个表示程序可视区域的容器，它会直接渲染在HTML的body上，并且可以根据浏览器可视区域的大小自动调整窗口，但是一个网页中只允许存在一个Viewport，若要添加面板，则通过它的items来添加。上一例中添加了两个Panel到第三个Panel中，本例将这两个Panel添加到Viewport中。首先新建一个Viewport.html网页，其内容如下：

<!DOCTYPE html PUBLIC “-//W3C//DTDHTML 4.01//EN”>

<html>

<head>

<meta http-equiv=”Content-Type”content=”text/html; charset=UTF-8; user-scalable=no”>

<title>Viewport</title>

<link rel=”stylesheet”type=”text/css” href=”resources/css/ext-all.css”/>

    <scripttype=”text/javascript” src=”bootstrap.js”></script>

    <script type=”text/javascript” src=”Viewport.js”></script>

</head>

<body>

</body>

</html>

然后新建一个Viewport.js文件，在里面添加Viewport，如下：

Ext.onReady(function(){

    var myView = Ext.create(‘Ext.Viewport’,{

       layout:’border’,

       items:[]

    });

});

其结果如下图所示：

由于只添加了Viewport，所以什么都看不见。下面在Viewport的items中添加面板，如下：

Ext.onReady(function(){

    var myView = Ext.create(‘Ext.Viewport’,{

       layout:’border’,

       items:[Ext.create(‘Ext.form.Panel’,{

           title:’我的第一个Panel’,  //标题

           width:200,               //宽度

           split:true,             //可以收缩

           region:‘west’,         //在左侧，西边

           collapsible:true,      //可以收缩

           html:’你好，欢迎使用Panel！<br/>Panel在实际应用中非常广泛’

       })]

    });

});

这里添加的Panel代码与上一例中创建第一个Panel一样，其结果图形题所示：

如果在添加第二个Panel，并设置其居中，同样在items里面添加，代码如下：

Ext.onReady(function(){

    var myView = Ext.create(‘Ext.Viewport’,{

       layout:’border’,

       items:[Ext.create(‘Ext.form.Panel’,{

           title:’我的第一个Panel’,  //标题

           width:200,               //宽度

           split:true,             //可以收缩

           region:‘west’,         //在左侧，西边

           collapsible:true,      //可以收缩

           html:’你好，欢迎使用Panel！<br/>Panel在实际应用中非常广泛’

       }),

           Ext.create(‘Ext.form.Panel’, { //添加第二个panel

                  title: ‘第二个Panel’,

                  region: ‘center’,

                  autoScroll :true,

                  html:’你好，欢迎使用Panel2！<br/>这个是第二个Panel’

              })]

    });

});

其结果如下图所示：

同样，在Panel中可能还需要添加或动态添加其他控件，如按钮或标签等，则在Viewport中新建这些Panel的时候就定义其变量名，如在第一个Panel中添加一个按钮，如下代码：

Ext.onReady(function(){

    var myPanel01, myPanel02;

    var myView = Ext.create(‘Ext.Viewport’,{

       layout:’border’,

       items:[myPanel01=Ext.create(‘Ext.form.Panel’,{

           title:’我的第一个Panel’,  //标题

           width:200,               //宽度

           split:true,             //可以收缩

           region:‘west’,         //在左侧，西边

           collapsible:true,      //可以收缩

           autoScroll:true,

           html:’你好，欢迎使用Panel！<br/>Panel在实际应用中非常广泛’

       }),

           myPanel02=Ext.create(‘Ext.form.Panel’, { //添加第二个panel

                  title:‘第二个Panel’,

                  region:‘center’,

                  autoScroll:true,

                  html:’你好，欢迎使用Panel2！<br/>这个是第二个Panel’

              })]

    });

   

    myPanel01.add(Ext.create(‘Ext.Button’,//添加一个按钮

    {

       id:’button01’,

       text:’这是一个按钮’,

       height: 30,

        width: myPanel01.width,         

        href :’http://www.ctgu.edu.cn’ //添加热链接);

    }));

});

其结果如下图所示：