ExtJs布局之BOX

简介:
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
<! 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(),
                     layout: {
             type: 'hbox',
             align: 'stetch'
           },
 
                     items: [{
                         title: '子面板一',
                         flex: 1,
             html: '1/4宽(flex=1)'
                     },{
                         title: '子面板二',
             flex: 1,
             html: '1/4宽(flex=1)'
                     },{
                         title: '子面板三',
                         flex: 2,
             html: '2/4宽(flex=2)'
                     }]
                 });
             });
     </ script >
</ head >
< body >
     < div id='form'></ div >
         < div id='form1'></ div >
 
 
</ body >
</ html >

  

目录
相关文章
|
2月前
|
前端开发
前端 CSS 经典:flex + margin 布局
前端 CSS 经典:flex + margin 布局
23 0
|
4月前
|
前端开发 容器
彻底学会 css grid布局
【4月更文挑战第19天】CSS Grid布局是二维布局的强大工具,涉及核心概念:网格容器、网格项、网格线和轨道。关键属性包括定义列行的`grid-template-columns/rows`、区域布局的`grid-template-areas`、间距的`grid-gap`、对齐方式的`justify-content/align-items`以及简写形式`place-content/place-items`。学习过程需结合实践,通过探索不同属性和值的组合,实现复杂布局。深入了解和不断练习将提升布局设计能力。
67 6
|
4月前
|
容器
css_flex布局
css_flex布局
40 0
CSS3【display: flex;】自适应布局案例
CSS3【display: flex;】自适应布局案例
87 0
|
4月前
|
弹性计算 前端开发 容器
CSS之Flex布局的详细解析
Flex布局 目标:熟练使用 Flex 完成结构化布局 01-标准流 标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个。
106 0
|
4月前
|
前端开发 容器
css极速入门 —— grid布局
css极速入门 —— grid布局
56 1
|
4月前
|
前端开发 测试技术 容器
CSS Flex 布局和 Grid 布局怎么选?
CSS Flex 布局和 Grid 布局怎么选?
109 0
|
12月前
|
开发者 容器
css3-flex布局:基础使用 / Flexbox布局
css3-flex布局:基础使用 / Flexbox布局
53 0
|
12月前
|
前端开发
css flex布局
css flex布局
42 0
|
前端开发 容器
如何使用CSS Grid 居中 div
如何使用CSS Grid 居中 div
100 0