(33)ExtJS之Panel中的表格布局

最新推荐文章于 2017-12-10 16:33:47 发布

无人与我共黄昏

最新推荐文章于 2017-12-10 16:33:47 发布

阅读量2.5k

点赞数

分类专栏： ExtJS案例

本文链接：https://blog.csdn.net/Xuan6251237011/article/details/21122885

版权

ExtJS案例同时被 2 个专栏收录

47 篇文章 0 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

EXTJS代码

47 篇文章 0 订阅

订阅专栏

本文通过一个示例展示了如何使用ExtJS创建一个带有表格布局的Panel，详细介绍了如何设置布局类型、列数、默认属性，以及如何实现子面板的跨行和跨列。示例中创建了一个4列的表格布局Panel，包含了5个子面板，子面板一跨越3列，子面板二跨越2行。

摘要由CSDN通过智能技术生成

Ext.onReady(function(){
	Ext.create('Ext.panel.Panel',{
		title:'Ext.layout.container.Table布局示例',
		layout:{
			type:'table',//表格布局
			columns:4//设置表格布局默认列数为4列
		},
		frame:true,//渲染面板
		height:150,
		width:210,
		renderTo:Ext.getBody(),
		defaults:{//设置默认属性
			bodyStyle:'background-color:#FFFFFF;padding:15px',//设置面板体的背景色'
			frame:true,
			width:50,
			height:50
		},
		items:[{
			title:'子面板一',
			width:150,
			colspan:3//设置跨列
		},{
			title:'子面板二',
			rowspan:2,//设置跨行
			height:100
		},
			{title:'子面板三'},
			{title:'子面板四'},
			{title:'子面板五'}
		
		]
	});
	
});