Ext Designer生成表格

最新推荐文章于 2019-09-18 14:19:15 发布

最新推荐文章于 2019-09-18 14:19:15 发布 · 121 阅读

本文介绍如何使用ExtJS框架创建包含学号、姓名及年龄等字段的自定义表格组件。该组件支持滚动、自动高度调整等功能，并展示了如何定义列属性如排序、调整宽度等。

1、生成表格代码

Ext.MyPanel=Ext.extend(Ext.Panel ,{
xtype:"panel",
	title:"我的面板",
	width:307,
	height:423,
	autoScroll:true,
	layout:"auto",
	autoDestroy:false,
	autoHeight:false,
	autoWidth:false,
	initComponent: function(){
		this.items=[
			{
				xtype:"grid",
				title:"我的表格",
				columns:[
					{
						header:"学号",
						sortable:true,
						resizable:true,
						dataIndex:"data1",
						width:100,
						hidden:false,
						menuDisabled:false,
						align:"center",
						fixed:false
					},
					{
						header:"姓名",
						sortable:true,
						resizable:true,
						dataIndex:"data2",
						width:100,
						align:"center"
					},
					{
						header:"年龄",
						sortable:true,
						resizable:true,
						dataIndex:"data3",
						width:100,
						align:"center"
					}
				]
			}
		]
		Ext.MyPanel.superclass.initComponent.call(this);
	}
})

2、生成结果