ExtJs布局之accordion,fit,auto

简介:
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
<! 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.Auto',
             frame: true,
             width: 250,
             renderTo: Ext.getBody(),
             bodyPadding: 5,
             //layout: 'auto',
             //layout: 'fit',
             layout: 'accordion',
             defaults: {
               bodyStyle: 'background-color: #FFFFFF'
             },
             items: [{
               title: 'Panel One',
               html: 'Panel One'
             },{
               title: 'Panel Two',
               html: 'Panel Two'
             },{
               title: 'Panel Three',
               html: 'Panel Three'
             }]
           });
         });
     </ script >
</ head >
< body >
   <!--
   <table border=1 id='localElement'>
     <tr><th colspan="2">Staff List</th></tr>
     <tr>
       <th width="60">Number</th>
       <th width="60">Value</th>
     </tr>
     <tr><td>1</td><td>One</td></tr>
     <tr><td>2</td><td>One</td></tr>
     <tr><td>3</td><td>One</td></tr>
     <tr><td>4</td><td>One</td></tr>
     <tr><td>5</td><td>One</td></tr>
     <tr><td>6</td><td>One</td></tr>
     <tr><td>7</td><td>One</td></tr>
     <tr><td>8</td><td>One</td></tr>
     <tr><td>9</td><td>One</td></tr>
   </table>
-->
</ body >
</ html >

  

目录
相关文章
|
12天前
|
前端开发 容器
彻底学会 css grid布局
【4月更文挑战第19天】CSS Grid布局是二维布局的强大工具,涉及核心概念:网格容器、网格项、网格线和轨道。关键属性包括定义列行的`grid-template-columns/rows`、区域布局的`grid-template-areas`、间距的`grid-gap`、对齐方式的`justify-content/align-items`以及简写形式`place-content/place-items`。学习过程需结合实践,通过探索不同属性和值的组合,实现复杂布局。深入了解和不断练习将提升布局设计能力。
22 6
|
4月前
|
前端开发 测试技术 容器
CSS Flex 布局和 Grid 布局怎么选?
CSS Flex 布局和 Grid 布局怎么选?
|
5月前
css3快速完成重构title提示tip样式
css3快速完成重构title提示tip样式
|
5月前
|
前端开发 容器
css极速入门 —— grid布局
css极速入门 —— grid布局
41 1
|
7月前
|
容器
SAP UI5 Form 表单的 Responsive Grid Layout 布局中的 breakpoint
SAP UI5 Form 表单的 Responsive Grid Layout 布局中的 breakpoint
25 0
|
9月前
|
前端开发 容器
如何使用CSS Grid 居中 div
如何使用CSS Grid 居中 div
80 0
|
前端开发 容器
CSS Grid 布局从 0 到 1
现在很多的 UI 组件库都提供了栅格系统,在响应式方面非常的方面,今天我们来谈的是 CSS 原生的栅格系统。
69 0
|
前端开发
实用CSS属性——object-fit
我们常常将图片或者视频放在一个盒子内,那么就经常在业务上考虑适配的问题,而object-fit能帮助我们设定图片在盒子中的显示方法
209 6
|
前端开发 容器 JavaScript
CSS Grid布局入门
相信大家都比较熟悉flex布局了,最近有空研究了波grid布局,感觉虽然兼容性还不是太高,应用不是太普遍,但是功能非常强大。未来应该是grid+flex为主流,grid是二维布局,很灵活,适合整体构架,而flex是一维布局,适合处理局部细节。
1129 0
|
Web App开发 前端开发
CSS 布局 position 详解
CSS 布局 position 详解 1.position 之 static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
1577 0