extjs 4.2 教程 - 07 - Viewport - 2018
原创    xingfu2017    发表于:2018-05-07 14:29:10
  阅读 :77   收藏

上一节:extjs 4.2 教程 -06 - 组件class和xtype对照表 - 2018

在extjs中,Viewport代表整个浏览器的显示的区域,它渲染的是整个bady区域,并且大小会随着浏览器的大小自动改变,也因为这样,在一个页面中也只能只有一个Viewport实例,常常在此使用fit,border等布局。

实例:

在页面中创建一个Viewport实例,并设置layout为border

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
        <script type="text/javascript" src="extjs/ext-all.js" ></script>
        <script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js"></script>
        <script>
            Ext.onReady(function(){
               var table = Ext.create("Ext.Viewport",{
                       layout: {
                        type: 'border', //这里我使用border布局
                        padding: 5
                    },items: [{
                        region: 'north', 
                        collapsible: false,
                        title: 'North',
                        split: true,
                        height: 60,
                        minHeight: 60,
                        html: 'north'
                    },{
                        region: 'west', 
                        collapsible: false,
                        title: 'West',
                        split: true,
                        width: '10%',
                        html: 'west'
                    },{
                        region: 'center', 
                        collapsible: false,
                        title: 'Center',
                        split: true,
                        html: 'center'
                    }]
               })

            })
        </script>
    </head>
    <body>
    </body>

</html>

实例效果:

评论
条评论
推荐阅读
extjs 4.2 教程 - 01 - Hello Extjs - 2018

概述ExtJS是一个用javascript、CSS和HTML等技术实现的主要用于创建RIA即富客户端,且与后台技术无关的前端Ajax框架。GPL协议版本下载:http://cdn.sencha.com...

extjs 4.2 教程 - 04 - Window - 2018

上一节:extjs4.2教程-03-对话框之Ext.MessageBox-2018本节,为大家介绍Ext中另一个比较常用的控件,window就是在页面中创建一个窗口,我们可以把它称作为一个容器,并且可...

extjs 4.2 教程 - 05 - 组件 - 2018

上一节:extjs4.2教程-04-Window-2018本节我们将介绍extjs组件,上一节我们已经学习了一个容器面板窗口window的组件,exjts4.2的组件可分为:容器组件:比较常见的容器有...

extjs 4.2 教程 -06 - 组件class和xtype对照表 - 2018

上一节:extjs4.2教程-05-组件-2018|Class|xtype|备注||------------|------------|------------||Ext.container.Cont...

extjs 4.2 教程 - 03 - 对话框之Ext.MessageBox - 2018

上一节:extjs4.2教程-02-Ext.onReady()及Ext.get()函数-2018在应用管理系统中,一个友好美观的提示可以给使用人员带来很多的提示、警示效果,在ext中,提示效果一般大都...

extjs 4.2 教程 - 02 - Ext.onReady()及Ext.get()函数 - 2018

上一节:extjs4.2教程-01-HelloExtjs-2018Ext.onReady(fn,[scope],[options])传入一个函数,当DOM和所需要的类都加载完毕后执行此函数后两个参数通...