ExtJS border布局之小案例_ext panel layout border-CSDN博客

本文链接：https://blog.csdn.net/qq_43274386/article/details/113056619

本文介绍了ExtJS中border布局的使用，通过一个实例展示了如何创建一个包含north, east, south, west和center五个区域的界面。border布局允许自动放置子组件并支持内置的分割栏功能，提供了一种面向应用的UI布局方式。" 109730824,8314666,最长上升子序列问题解析及动态规划实现,"['动态规划', '算法', '信息竞赛']

摘要由CSDN通过智能技术生成

前言：

layout:‘border’。该布局包含多个字面板，是一个面向应用的UI风格的布局，它将整个容器分为5个部分，分别是east,south, west, north, center,加入到容器中的字面板需要指定region配置这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置，并且该布局还内建了对面板分割栏的支持。

一．实现界面：

在这里插入图片描述

二．实现思路：

      １－首先确定整体panel为Viewport,layout:"border"(东南西北中　五个区域)
      ２－各个部分分别用panel方式搭建
      ３－从上往下，从左往右依次填充各个panel
      ４－north难点在于展示靠右显示
      ５－south难点在于展示间隔控制
      ６－west难点在于TreePanel
      ７－center难点在于TabPanel,GridPanel,PagingToolbar
      ８－east难点在于accordion
      ９－其中center中:确定整体panel为TabPanel,里面分为３个tab,我们以第一个tab为例，这个tab整体又由GridPanel构成，这个GridPanel里面又分为上,中，下三部分，分别对应Toolbar(工具栏)，ColumnModel(列模型)，PagingToolbar(分页)

三．代码部分

<!DOCTYPE html>
<html lang="en">
<head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
          <script src="Ext/adapter/ext/ext-base.js"></script>
          <script src="Ext/ext-all.js"></script>
          <script src="Ext/src/locale/ext-lang-zh_CN.js"></script>
          <script type="text/javascript">
                    Ext.onReady(function () {
    
                              var toobarTop = new Ext.Toolbar({
      //工具栏
                                        height: 25,
                                        items: ['->', {
    
                                                  xtype: 'tbtext',  //工具栏文本项
                                                  text: '欢迎　管理员登录'
                                        },
                                                  {
    
                                                            xtype: 'tbseparator', //工具栏分隔符
                                                            width: 20
                                                  },
                                                  {
    
                                                            xtype: 'tbbutton', //按钮
                                                            text: '退出'
                                                  },
                                                  {
    
                                                            xtype: 'tbspacer', //工具栏空白
                                                            width: 20
                                                  }]
                              });

                              var toobarFooter = new Ext.Toolbar({
    
                                        height: 25,
                                        items: [{
    
                                                  xtype: 'tbtext',
                                                  text: '模块名称'
                                        }, '->', {
    
                                                  text: '当前时间：' + new Date().format('Y- m - d')
                                        }, {
    
                                                  xtype: 'tbspacer',
                                                  width: 20
                                        }]
                              });



                              //列模型
                              //显示序号
                              Ext.grid.RowNumberer.prototype = {
    
                                        id: 'numberer',
                                        header: "序号",
                                        width: 40,
                                        align: "center",
                                        sortable: false,
                                        fixed: true,
                                        menuDisabled: true,
                                        dataIndex: '',
                                        rowspan: undefined,
                                        renderer: function (v, p, record, rowIndex) {
    
                                                  if (this.rowspan) {
    
                                                            p.cellAttr = 'rowspan="' + this.rowspan + '"';
                                                  }
                                                  return rowIndex + 1;
                                        }

                              };

                              //增加复选框　　GridPanel中也要增加
                              var sm = new Ext.grid.CheckboxSelectionModel(