extjs table布局
类别:Web前端 浏览量:18542
时间:2013-8-18 extjs table布局
extjs table布局Ext.layout.TableLayout对应面板布局layout,配置项的名称为table。这种比较允许你非常容易的渲染内容到HTML表格中,可以指定列数(columns),跨行(rowspan),跨列(colspan),可以创建出复杂的表格布局。必须使用layoutConfig属性来指定属于此布局的配置,table布局仅有唯一的布局配置项columns,而包含在其中的子面板会具有rowspan和colspan两个配置项!
在layoutConfi中我们无需指定有几行,只要指定由几列就可以了,有几行往下写几行就可了。另外一点就是对于合并行列的时候记得指明高和宽否则可能出现你合并的行跟未合并的单元格一样高的情况。同Ext中多数布局一样也是在父容器指定对应的布局为"table",然后子容器设置对应的参数(对table布局就是colspan等)。
一、Table布局实例
new Ext.Panel({
id:'pn',
title:"新闻",
renderTo:"liPanel",
width:800,
height:500,
layout:"table",
bodyStyle:'padding:10 10 10 10',
layoutConfig:{
columns:2
},
defaults:{
height:220,
width:380,
frame:true
},
items:[
{
title:'国际',
html:"第一个子panel(行:1,列:1)",
bodyStyle:'padding:20'
},
{
title:'国内',
html:"第一个子panel(行:1,列:1)",
bodyStyle:'padding:20'
},
{
title:'新闻组图',
colspan:2,
html:"第一个子panel(行:1,列:1)",
bodyStyle:'padding:20;',
width:770
}
]
});
附加的CSS样式为:
#pn td
{
padding:5px;
}
效果:
实例二:
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'Ext.layout.container.Table布局示例',
layout:{
type:'table',//表格布局
columns:4 //设置表格布局默认列数为4列
},
frame:true,
height:250,
width:310,
renderTo:Ext.getBody(),
defaults:{
bodyStyle:'background-color:#FFFFFF;',
frame:true,
width:60,
height:50
},
items:[{
title:'子面板一',
width:220,
colspan:3
},{
title:'子面板二',
rowspan:2,
height:100
},{title:'子面板三'},{title:'子面板四'},{title:'子面板五'}]
});
});
</script>
效果图:
您可能感兴趣
- Extjs中文乱码
- Extjs menu菜单的简单用法
- extjs多选下拉框
- extjs column列布局
- extjs xtype的使用
- ExtJs中XTemplate使用
- extjs中treepanel例子
- extjs实现树形下拉框
- extjs中apply和applyIf的用法
- extjs checkboxGroup 复选框的用法
- extjs 日期控件
- Extjs msgTarget 提示位置
- Extjs updateProgress进度条的应用
- extjs radiogroup赋值和取值
- extjs anchor 锚点布局
- extjs tabPanel的用法
- 苹果自研芯片跑分对比 A16芯片排名靠后,M1系列霸榜(苹果自研芯片跑分对比)
- X86处理器的梦魇 苹果M1自研芯片到底有多强(苹果M1自研芯片到底有多强)
- 泰剧《爱欲之神》Boom kitkong和Great合体杂志(泰剧爱欲之神Boomkitkong和Great合体杂志)
- 素人恋爱综艺火药味十足 男生为赢得芳心集体扯头花,真是出好戏(素人恋爱综艺火药味十足)
- 《囧妈》为何受抵制 春节七部影片撤档背后的责任与博弈(囧妈为何受抵制)
- 提醒 2019年起河南驾考要开设科目五 官方回应来了(2019年起河南驾考要开设科目五)
热门推荐
- Global.asax文件的介绍
- python基础知识重点(python语言元素知识点详解)
- mysql事务未提交会锁表吗(Mysql事务中Update是否会锁表?)
- 小程序ui图与移动ui(AmazeUI 缩略图的实现示例)
- html使用canvas画矩形(CSS、SVG和canvas分别实现文本文字纹理叠加效果)
- SQL SERVER连接池
- php抽奖功能(php+lottery.js实现九宫格抽奖功能)
- web界面测试中需要测试的几个点
- 做网站是使用nginx还是apache(web服务器软件Apache与Nginx的对比分析)
- centos7 docker容器目录(CentOS7使用docker部署Apollo配置中心的实现)