ExtJs布局之accordion,fit,auto

<!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>

时间： 2024-12-04 20:51:34

ExtJs布局之accordion,fit,auto的相关文章

ExtJs学习笔记(11)_Absolute布局和Accordion布局

ExtJs其实在某种程度上可以代替div+css来进行页面布局(不过经测试,在最新的Firefox3下,部分功能好象有点问题),今天我们来学习二种最基本的布局 1.Absolute 布局:这种最容易理解,直接用x,y值来绝对定位组件 2.Accordion布局:Accordion意为"手风琴",即最终效果可以象手风琴那样拉来拉去,说白了,就是类似QQ面板的功能下面通过示例代码观察一下效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

关于extjs布局，只显示一列

问题描述关于extjs布局,只显示一列代码如下,这个actionPanel有两列,第一列是6个Button正常显示(newTimeLine,addTimeLine,.....),第二列是6个Label显示不出来(finishLabel,...). 能不能帮忙看是哪里错了? var actionPanel=new Ext.form.FormPanel({ region:'center', border:false, labelAlign:'right', bodyStyle : 'paddin

extjs 布局中添加了collapseMode:&#039;mini&#039;,就能出现小箭头折叠west 请问小箭头的click事件是什么？

问题描述 extjs 布局中添加了collapseMode:'mini',就能出现小箭头折叠west 请问小箭头的click事件是什么?我想手动调用让他折叠! 问题补充:柴秉承写道解决方案 Ext.onReady(function() {var nodeData = [{text:'node',leaf:false,children:[{text:'childNode',leaf:false,children:[{text:'hello',leaf:true}]}]}]var panel =

ExtJS布局：制作后台管理布局

一个后台管理页面大概头部.左侧导航.右侧的在线用户(可有可无)和状态栏(不是必须) 头部一般放一些logo.登陆用户信息和提醒事项等我上面给出的这个图片就是我用ExtJS实现的一个后台管理页面布局,源代码如下: Ext.onReady(function () { Ext.create('Ext.container.Viewport', { layout: 'border', items: [{ region: 'north', html: '<h1 class="x-panel-head

ExtJs布局之Card

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 60 61 62 63 64 65 66 67 68 69 <!DOCTYPE html> <html> <head> <t

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>

ExtJs布局之Column

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 <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv="Content-Type"

ExtJs布局之tabPanel

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 <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv="Content-Type&

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="Cont