ExtJs布局之border

简介:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<! DOCTYPE html>
< html >
< head >
     < title >ExtJs</ title >
         < meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     < link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
         < script type="text/javascript" src="ExtJs/ext-all.js"></ script >
         < script type="text/javascript" src="ExtJs/bootstrap.js"></ script >
         < script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></ script >
 
     < script type="text/javascript">
             Ext.onReady(function() {
                 Ext.create('Ext.panel.Panel',{
                     title: 'Ext.layout.container.Table',
                     frame: true,
                     height: 600,
                     width: 800,
                     renderTo: Ext.getBody(),
           defaults: {
                         collapsible: true
                     },
                     layout: 'border',
 
                     items: [{
                         title: 'north Panel',
                         height: 50,
             html: '上边',
             region: 'north'
                     },{
                         title: 'south Panel',
                         height: 50,
             html: '下边',
             region: 'south'
                     },{
                         title: 'west Panel',
                         width: 100,
             html: '左边',
             region: 'west'
                     },{
                         title: 'east Panel',
                         width: 100,
             html: '右边',
             region: 'east'
                     },{
                         title: 'main content',
             html: '中间',
             region: 'center'
                     }]
                 });
             });
     </ script >
</ head >
< body >
     < div id='form'></ div >
         < div id='form1'></ div >
 
 
</ body >
</ html >

  

目录
相关文章
|
1天前
|
容器
css_flex布局
css_flex布局
7 0
|
5天前
|
前端开发 容器
彻底学会 css grid布局
【4月更文挑战第19天】CSS Grid布局是二维布局的强大工具,涉及核心概念:网格容器、网格项、网格线和轨道。关键属性包括定义列行的`grid-template-columns/rows`、区域布局的`grid-template-areas`、间距的`grid-gap`、对齐方式的`justify-content/align-items`以及简写形式`place-content/place-items`。学习过程需结合实践,通过探索不同属性和值的组合,实现复杂布局。深入了解和不断练习将提升布局设计能力。
17 6
|
3月前
|
前端开发 测试技术 容器
CSS Flex 布局和 Grid 布局怎么选?
CSS Flex 布局和 Grid 布局怎么选?
|
8月前
CSS3【display: flex;】自适应布局案例
CSS3【display: flex;】自适应布局案例
49 0
|
4月前
|
弹性计算 前端开发 容器
CSS之Flex布局的详细解析
Flex布局 目标:熟练使用 Flex 完成结构化布局 01-标准流 标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个。
59 0
|
4月前
|
前端开发 容器
css极速入门 —— grid布局
css极速入门 —— grid布局
41 1
|
7月前
|
前端开发
css flex布局
css flex布局
33 0
|
前端开发 容器
CSS Grid 布局从 0 到 1
现在很多的 UI 组件库都提供了栅格系统,在响应式方面非常的方面,今天我们来谈的是 CSS 原生的栅格系统。
69 0
|
前端开发
css, css3, flex实现圣杯布局
css, css3, flex实现圣杯布局
css, css3, flex实现圣杯布局