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 >

  

目录
相关文章
|
4月前
|
前端开发
前端 CSS 经典:flex + margin 布局
前端 CSS 经典:flex + margin 布局
32 0
|
6月前
|
前端开发 容器
彻底学会 css grid布局
【4月更文挑战第19天】CSS Grid布局是二维布局的强大工具,涉及核心概念:网格容器、网格项、网格线和轨道。关键属性包括定义列行的`grid-template-columns/rows`、区域布局的`grid-template-areas`、间距的`grid-gap`、对齐方式的`justify-content/align-items`以及简写形式`place-content/place-items`。学习过程需结合实践,通过探索不同属性和值的组合,实现复杂布局。深入了解和不断练习将提升布局设计能力。
84 6
CSS3【display: flex;】自适应布局案例
CSS3【display: flex;】自适应布局案例
97 0
|
6月前
|
弹性计算 前端开发 容器
CSS之Flex布局的详细解析
Flex布局 目标:熟练使用 Flex 完成结构化布局 01-标准流 标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个。
112 0
|
6月前
|
前端开发 容器
css极速入门 —— grid布局
css极速入门 —— grid布局
63 1
|
6月前
|
前端开发 测试技术 容器
CSS Flex 布局和 Grid 布局怎么选?
CSS Flex 布局和 Grid 布局怎么选?
134 0
|
前端开发
css的学习(下)两千字入门css的几种布局(flex,grid,float...)
# 规则生效问题 ## 优先级 特异度的值来决定的 ### 选择器的特异度 Sqecificity id (伪)类 标签 #id .class tag 百 十 个 # 继承 某些属性会自动继承其父元素的计算值 除非显示的 指定一个值 文字相关的,颜色,字体 不给会继承 一些盒子模型 大小 不会继承 ## css可以和不可以继承的属性 不可继承的:display、margin、border、padding、background、height、min
|
前端开发 容器
CSS Grid 布局从 0 到 1
现在很多的 UI 组件库都提供了栅格系统,在响应式方面非常的方面,今天我们来谈的是 CSS 原生的栅格系统。
88 0
|
前端开发 容器
【CSS】最强大的布局之grid布局精讲
【CSS】最强大的布局之grid布局精讲
390 0
【CSS】最强大的布局之grid布局精讲
|
前端开发
10、前端开发:CSS知识总结——盒子模型(Box Model)(1)
10、前端开发:CSS知识总结——盒子模型(Box Model)(1)
121 0
10、前端开发:CSS知识总结——盒子模型(Box Model)(1)