Ext4.2学习之布局

lang20150928

于 2021-03-22 21:09:39 发布

阅读量110

点赞数

分类专栏： extjs 文章标签： html js

本文链接：https://blog.csdn.net/m0_37607945/article/details/115098235

版权

extjs 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

首先看一下结果图
在这里插入图片描述
首先一个完整的布局一般都是以Ext.Viewport对象包裹的，因为这个图像可以自动适应不同浏览器大小。在这里使用了layout: 'border'布局方式，所以分为了东南西北中四个板块。也就是所谓的上下左右和中间，在这里上面是一个标题栏。而下面就是一个状态栏。
在这里插入图片描述
而左侧放的是一个TreePanel，通过读取文本中的数据构造了一棵树（需要指定叶子节点）

[
    {text:'01',children:[
        {text:'01-01',leaf:true},
        {text:'01-02',children:[
            {text:'01-02-01',leaf:true},
            {text:'01-02-02',leaf:true}
        ]},
        {text:'01-03',leaf:true}
    ]},
    {text:'02',leaf:true}
]

在这里插入图片描述
主语split和collapsible参数，通过这两个参数可以实现左侧菜单栏的左右大小调节和隐藏

最后中间部位如下

其实这块也使用了layout: 'border'布局

分别包含了一个表格控件和表单控件，然后在控件中再指定相应的region
在这里插入图片描述

完整代码如下所示

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="ext-4/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext-4/ext-all.js"></script>
    <script type="text/javascript" src="ext-4/locale/ext-lang-zh_CN.js"></script>
    <style type="text/css">
        p {
            margin: 5px;
        }

        .settings {
            background-image: url(icons/fam/folder_wrench.png);
        }

        .nav {
            background-image: url(icons/fam/folder_go.png);
        }

        .info {
            background-image: url(icons/fam/information.png);
        }
    </style>
    <script type="text/javascript">
        Ext.onReady(function () {

            // 表格配置开始
            var columns = [
                {header: '编号', dataIndex: 'id'},
                {header: '名称', dataIndex: 'name'},
                {header: '描述', dataIndex: 'descn'}
            ];

            var data = [
                ['1', 'name1', 'descn1'],
                ['2', 'name2', 'descn2'],
                ['3', 'name3', 'descn3'],
                ['4', 'name4', 'descn4'],
                ['5', 'name5', 'descn5']
            ];

            var store = new Ext.data.ArrayStore({
                data: data,
                fields: [
                    {name: 'id'},
                    {name: 'name'},
                    {name: 'descn'}
                ]
            });
            store.load();

            var grid = new Ext.grid.GridPanel({
                store: store,
                columns: columns,
                title: 'center-north',
                region: 'north'
            });
            // 表格配置结束

            // 树形配置开始
            var tree = new Ext.tree.TreePanel({
                store: new Ext.data.TreeStore({
                    proxy: {
                        type: 'ajax',
                        url: '13-05.tree.txt'
                    },
                    root: {
                        expand: true,
                        text: '我是根'
                    }
                }),
                title: 'west',
                region: 'west',
                split: true,
                border: true,
                collapsible: true,
                width: 120,
                minSize: 80,
                maxSize: 200
            });
            // 树形配置结束

            // 表单配置开始
            var form = new Ext.form.FormPanel({
                defaultType: 'textfield',
                labelAlign: 'right',
                title: 'form',
                labelWidth: 50,
                frame: true,
                width: 220,

                title: 'center-center',
                region: 'center',

                items: [{
                    fieldLabel: '文本框',
                    anchor: '90%'
                }],
                buttons: [{
                    text: '按钮'
                }]
            });
            // 表单配置结束

            // 布局开始
            var viewport = new Ext.Viewport({
                layout: 'border',
                items: [{
                    region: 'north',
                    contentEl: 'north-div',
                    height: 80,
                    bodyStyle: 'background-color:#BBCCEE;'
                }, {
                    region: 'south',
                    contentEl: 'south-div',
                    height: 20,
                    bodyStyle: 'background-color:#BBCCEE;'
                }, tree, {  // 此处在tree里面已经定义了region为west
                    region: 'center',
                    split: true,
                    border: true,
                    layout: 'border',
                    items: [grid, form]
                }]
            });
            // 布局结束

        });
    </script>
</head>
<body>
<div id="north-div">标题栏：viewport加panel实现复杂布局</div>
<div id="south-div">状态栏：Copyright by www.mossle.com</div>
</body>
</html>

lang20150928

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ext4.2学习之布局

首先看一下结果图首先一个完整的布局一般都是以Ext.Viewport对象包裹的，因为这个图像可以自动适应不同浏览器大小。在这里使用了layout: 'border'布局方式，所以分为了东南西北中四个板块。也就是所谓的上下左右和中间，在这里上面是一个标题栏。而下面就是一个状态栏。而左侧放的是一个TreePanel，通过读取文本中的数据构造了一棵树（需要指定叶子节点）[ {text:'01',children:[ {text:'01-01',leaf:true},
复制链接

扫一扫