面板相当于一张干净的白纸，如果直接在上面添加内容，将很难控制面板中内容的显示位置，面板元素越多就越显得凌乱，所以需要在面板上划分不同的区域，将面板内容展示到希望的位置上。ExtJS通过提供多种布局类来为面板提供支持，主要包括如下10种, 我自己总结了两句话, 先把它背起来,再慢慢研究这十种布局是怎么玩的."列表自折容, 卡表锚(描)边绝", 稍微胡说下, 供大家能更快记忆. 大家都知道html有列表, 那么列表把自己的容貌给折毁了,这叫"列表自折容", 有卡(信用卡,银行卡,随意啦), 有表(瑞士, OMEGA) 当然给自己描边(装饰自己),天下一绝啊,所以叫"卡表描边绝". 言归正传, 这十种布局方式分别为:
•ColumnLayout（列布局）, 在面板设置的对应代码：layout : 'column', 即layout配置项名称为：column
•FormLayout（表单布局）, 在面板设置的对应代码：layout : 'form', 即layout配置项名称为：form
•FitLayout（自适应布局）, 在面板设置的对应代码：layout : 'fit', 即layout配置项名称为：fit
•AccordionLayout（折叠布局）, 在面板设置的对应代码：layout : 'accordion', 即layout配置项名称为：accordion
•ContainerLayout（容器布局）
•CardLayout（卡片式布局）, 在面板设置的对应代码：layout : 'card', 即layout配置项名称为：card
•TableLayout（表格布局）, 在面板设置的对应代码：layout : 'table', 即layout配置项名称为：table
•AnchorLayout（锚点布局）, 在面板设置的对应代码：layout : 'anchor', 即layout配置项名称为：anchor
•BorderLayout（边框布局）, 在面板设置的对应代码：layout : 'border', 即layout配置项名称为：border
•AbsoluteLayout（绝对位置布局）, 在面板设置的对应代码：layout : 'absolute', 即layout配置项名称为：absolute
接下来分别介绍这10种布局类的特点及使用方式。
本文所用的html文本如下。
1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 4 <title>Test Extjs Panel</title> 5 <script type="text/javascript" src="Ext-4-Lib/datagrid/include-ext.js"></script> 6 <script type="text/javascript" src="Ext-4-Lib/datagrid/options-toolbar.js"></script> 7 <script type="text/javascript" src="Ext-4-Lib/class/panel.js"></script> 8 </head> 9 <body> 10 <div id="panel"> 11 </div> 12 </body> 13 </html>