ExtJs布局管理

最新推荐文章于 2021-06-18 12:32:46 发布

ysj5125094

最新推荐文章于 2021-06-18 12:32:46 发布

阅读量98

点赞数

分类专栏： ExtJS 文章标签： ExtJs JavaScript Layout ExtJs布局管理 ViewUI

ExtJS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

所有ExtJs的Layout Class都在API Documentation->Ext->Layout下,如果想用哪种而已方式可以直接查询API帮助文档.我写这篇文章的意思是把学习的时候做的笔记保留下了,为了以后使用方便.

下面列出的是一些常用的Layout.

layout.html页面代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ExtJs Layout Example</title>
<link rel="stylesheet" type="text/css" href="../ext-3.2.0/resources/css/ext-all.css"></link>
<script type="text/javascript" src="../ext-3.2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.2.0/ext-all.js"></script>
<script type="text/javascript" src="../js/layout.js"></script>
</head>
<body>
    <div id="columnId"></div>
    <div id="borderId"></div>
    <div id="fitId"></div>
    <div id="accordionId"></div>
    <div id="anchorId"></div>
</body>
</html>

以下的代码都是放在..js/layout.js文件中的.

1.columnLayout

/*
    创建column布局
*/
function createColumnPanel(){
    var obj = {
        title : '父面板',
        width : 600,
        height : 400,
        layout : 'column',//一列一列的显示容器中的元素
        items : [{
            xtype : 'panel',//子元素中默认的显示类型为:panel.也可以根据需要换成button等.
            title : '页面1',
            columnWidth : 0.5,//以面板整体宽度大小的25%大小进行填充.
            height : 200,//高度为固定值.
            layout : 'column',
            items : [{
                xtype : 'button',
                text : '按钮1',
                columnWidth : 0.5
            },{
                xtype : 'button',
                text : '按钮2',
                columnWidth : 0.5
            }],
            html : '我是面板1'
        },{
            title : '页面2',
            columnWidth : 0.5,
            height : 50,
            html : '我是面板2'
        }]
    } ;
    //实例化父面板
    var mainPanel = new Ext.Panel(obj) ;
    //将父面板添加到id为columnId的标签上.
    mainPanel.render("columnId") ;
}

2.borderLayout

/*
    创建border布局
*/
function createBorderPanel(){
    var obj = {
        title : '父面板',
        width : 600,
        height : 400,
        layout : 'border',//以东南西北中的方式显示容器中的元素
        items : [{
            title: 'North Region',
            region: 'north',     // 上
            height : 50
        },{
            title: 'South Region',
            region: 'south',     // 下
            height: 50
        },{
            title: 'West Region',
            region:'west',    // 左
            split: true,   //设置可以调整该panel的大小(宽度)
            collapsible: true,   //设置该面板是否可以收缩
            width: 50
        },{
            title: 'East Region',
            region: 'east',     // 右
            width : 50
        },{
            title: 'Center Region',
            region: 'center',     // 中,此面板必须存在.
            layout: 'border', 
            items: [{
                title: 'west',
                region: 'west',
                width: '50%'
            },{
                title: 'center',
                region: 'center',
            }]
        }]
    } ;
    //实例化父面板
    var mainPanel = new Ext.Panel(obj) ;
    //将父面板添加到id为borderId的标签上.
    mainPanel.render("borderId") ;
}

3.fitLayout

/*
    创建fit布局
*/
function createFitPanel(){
    var obj = {
        title : '父面板',
        width : 600,
        height : 400,
        layout : 'fit',//填满整个外部容器,只能看到一个子元素
        items : [{
            title : '页面1',
            html : '我是面板1'
        },{
            title : '页面2',
            html : '我是面板2'
        }]
    } ;
    //实例化父面板
    var mainPanel = new Ext.Panel(obj) ;
    //将父面板添加到id为columnId的标签上.
    mainPanel.render("fitId") ;
}

4.accordionLayout

/*
    创建accordion布局
*/
function createAccordionPanel(){
    var obj = {
        title : '父面板',
        width : 600,
        height : 400,
        layout : 'accordion',//制作应用程度菜单式样式.
        items : [{
            title : '菜单1',
            items : [{
                xtype : 'panel',
                title : 'a',
            }]
        },{
            title : '菜单2',
            items : [{
                xtype : 'panel',
                title : 'a',
            },{
                xtype : 'panel',
                title : 'b',
            }]
        }]
    } ;
    //实例化父面板
    var mainPanel = new Ext.Panel(obj) ;
    //将父面板添加到id为columnId的标签上.
    mainPanel.render("accordionId") ;
}

5.anchorLayout

/*
    创建anchor布局
*/
function createAnchorPanel(){
    var obj = {
        title : '父面板',
        width : 600,
        height : 400,
        layout : 'anchor',// 好处1:可以让子元素的大小根据父元素的大小确定.
        items : [{
            title : '菜单1',
            anchor : '50% 30%'  //利用achor方式布局子元素.
            },{
            title : 'b',
            width : 50,
            height : 50
        }]
    } ;
    //实例化父面板
    var mainPanel = new Ext.Panel(obj) ;
    //将父面板添加到id为columnId的标签上.
    mainPanel.render("anchorId") ;
}

Ext.onReady方法如下:

/*
    页面成功载入后会第一个调用此方法
*/
Ext.onReady(function(){
    createColumnPanel() ;//创建column布局
    document.getElementById("columnId").style.display = 'none' ;//隐藏column布局
    createBorderPanel() ;//创建border布局
    document.getElementById("borderId").style.display = 'none' ;//隐藏border布局
    createFitPanel() ;//创建fit布局
    document.getElementById("fitId").style.display = 'none' ;//隐藏fitId布局
    createAccordionPanel() ;//创建accordion布局
    document.getElementById("accordionId").style.display = 'none' ;//隐藏accordion布局
    createAnchorPanel() ;//创建anchor布局
}) ;

ysj5125094

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs布局管理

所有ExtJs的Layout Class都在API Documentation-&gt;Ext-&gt;Layout下,如果想用哪种而已方式可以直接查询API帮助文档.我写这篇文章的意思是把学习的时候做的笔记保留下了,为了以后使用方便.下面列出的是一些常用的Layout.layout.html页面代码如下:&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HT...
复制链接

扫一扫

专栏目录