ExtJS创建DataGrid

前言

    最近在做一个项目，后台管理系统的页面用的ExtJS，具体它是什么，或者含义什么的，百度一下就OK了。至于它的优点，这个虽然用的时间不长，但是体会还是挺深的。它用起来很方便是毋庸置疑的，否则为什么不用原生JS呢。具体方便到哪种程度，请看下面的内容。

DataGrid

    说起来用ExtJS做DataGrid，得先看看这个表格的组成部分。DataGrid基本上由表格名称、表格操作按钮、表格内容、表格分页栏四部分组成。表格名称好说，就是这个表格叫什么，指明它是显示什么信息的。表格操作按钮，是对表格内容进行增删改查的，另外可能还加上查询条件。表格内容又分为两部分，一部分是表头，表示这一列名称；一部分是数据，也就是每一列的内容。分页栏表示，如果表格内容是分页的，则会显示第一页、最后一页、上一页、下一页和当前页等内容。

                   

ExtJS实现

    上面说把DataGrid分为了几个部分，那么也就是把DataGrid这一个大的对象，拆分成了几个小的对象。ExtJS实现DataGrid就是这个意思，它很好的体现了面向对象的思想，将控件分为几个小对象，定义每一个对象，设置他们相应的属性，然后组合起来，这不是面向对象是什么？而且它很完美的支持了组件的拆卸和重组，实现了组建的复用，这也是使用方便的一个很好体现。

    说那么多也没办法真实体现，下面就来看看代码：

    1、定义每一类的属性，用于绑定数据库数据，可以看到里面有一个mapping属性，这个就是用于绑定这一列要显示哪一个字段的数据的。

//定义每一列字段属性
var gridPlant = Ext.data.Record.create([
	{name:'SID',mapping:'SID',type:'string',hidden:'true'},
	{name:'SNAME',mapping:'SNAME',type:'string'},
	{name:'PHONENUM',mapping:'PHONENUM',type:'string'},
	{name:'POST',mapping:'POST',type:'string'},
	{name:'SLEVEL',mapping:'SLEVEL',type:'string'},
	{name:'SUNIT',mapping:'SUNIT',type:'string'},
	{name:'SCOUNTY',mapping:'SCOUNTY',type:'string'},
	{name:'STOWN',mapping:'STOWN',type:'string'},
	{name:'SVILLAGE',mapping:'SVILLAGE',type:'string'},
	{name:'SREGIOONCODE',mapping:'SREGIOONCODE',type:'string'},
]);

    

    2、定义表格最左边的复选框，如果不需要就不加。

var sm = new Ext.grid.CheckboxSelectionModel();

      3、定义表格的每一列，给每一列添加名称、宽度、是否显示、是否可编辑等属性。

var cm = new Ext.grid.ColumnModel([
	sm,
	{
		header:'员工编号',
		id:'SID',
		dataIndex:'SID',
		width:200,
		sortable:false;
		hideable:false,
		menuDisabled:true,
		hidden:true,
		editor:new Ext.form.TextField({
			allowBlank:false
		})
	},
	{
		header:'姓名',
		id:'SNAME',
		dataIndex:'SNAME',
		width:200,
		sortable:false;
		hideable:false,
		menuDisabled:true,
		editor:new Ext.form.TextField({
			allowBlank:false
		})
	},
	{
		header:'电话号码',
		id:'PHONENUM',
		dataIndex:'PHONENUM',
		width:200,
		sortable:false;
		hideable:false,
		menuDisabled:true,
		editor:new Ext.form.TextField({
			allowBlank:false
		})
	},
	{
		header:'职位',
		id:'POST',
		dataIndex:'POST',
		width:200,
		sortable:false;
		hideable:false,
		menuDisabled:true,
		editor:new Ext.form.TextField({
			allowBlank:false
		})
	},
	{
		header:'通知级别',
		id:'SLEVEL',
		dataIndex:'SLEVEL',
		width:200,
		sortable:false;
		hideable:false,
		menuDisabled:true,
		editor:new Ext.form.TextField({
			allowBlank:false
		})
	},
	{
		header:'单位',
		id:'SUNIT',
		dataIndex:'SUNIT',
		width:200,
		sortable:false;
		hideable:false,
		menuDisabled:true,
		editor:new Ext.form.TextField({
			allowBlank:false
		})
	},
	{
		header:'区县',
		id:'SCOUNTY',
		dataIndex:'SCOUNTY',
		width:200,
		sortable:false;
		hideable:false,
		menuDisabled:true,
		editor:new Ext.form.TextField({
			allowBlank:false
		})
	},
	{
		header:'乡镇',
		id:'STOWN',
		dataIndex:'STOWN',
		width:200,
		sortable:false;
		hideable:false,
		menuDisabled:true,
		editor:new Ext.form.TextField({
			allowBlank:false
		})
	},
	{
		header:'村',
		id:'SVILLAGE',
		dataIndex:'SVILLAGE',
		width:200,
		sortable:false;
		hideable:false,
		menuDisabled:true,
		editor:new Ext.form.TextField({
			allowBlank:false
		})
	},
	{
		header:'行政区划编号',
		id:'SREGIONCODE',
		dataIndex:'SREGIONCODE',
		width:200,
		sortable:false;
		hideable:false,
		menuDisabled:true,
		editor:new Ext.form.TextField({
			allowBlank:false
		})
	}
]);

        4、定义操作按钮

var gridButton = [{
	id:'addStaff',
	text:'新增员工',
	iconCls:'add',
	disabled:false,
	handler:addStaff
},'-',{
	id:'modifyStaff',
	text:'修改员工',
	iconCls:'edit',
	disabled:false,
	handler:modifyStaff
},'-',{
	id:'deleteStaff',
	text:'删除员工',
	iconCls:'delete',
	disabled:false,
	handler:deleteStaff
}];

    

    5、定义分页栏

var pagingBar = new Ext.PagingToolbar({
	pageSize:pageSize,
	store:gridStore,
	displayInfo:true,
	displayMsg:'显示第{0}条到{1}条记录，共{2}条',
	emptyMsg:'没有可显示的记录'
});

        6、定义数据Store，这一部分是存储数据，将数据库的数据取出后放到Store中，再将Store绑定到Grid上。

var gridStore = new Ext.data.Store({
	proxy:new Ext.data.HttpProxy({url:getDocGridDataURL}),
	reader:new Ext.data.JsonReader({
		totalProperty:'totalProperty',
		root:'root'
	},gridPlant)
});
gridStore.on('beforeload',function(){
	Ext.apply(this.baseParams,{
		start:0;
		limit:pageSize;
	});
});

    

    7、定义表格主体，将上面每一部分都添加到表格主体中，最下面是给grid注册的几个方法。

var grid = new Ext.grid.GridPanel({
	id:'grid',
	border:false,
	store:gridStore,
	cm:cm,
	sm:sm,
	title:'员工信息',
	tbar:gridButton,
	bbar:pagingBar,
	listeners:{
		render:gridCellShow
	},
	viewConfig:{
		forceFit:true;
	}
});
//表格显示
grid.show();
//表格加载数据
gridStore.load({params:{start:0,limit:pageSize}});
//给表格注册双击事件
grid.addListener("rowdblclick",modifyStaff);

    到这里为止，一个表格就算做出来了。至于JSP页面，只需要引入相应的ExtJS文件，和上面这个grid的JS文件，再给出一个div用来盛放这个表格就行了。

总结

    刚开始觉得ExtJS特别难，怎么自己都不会弄。结果弄出来之后，多看几遍代码就发现，它其实跟写后台代码一样，没什么太大的区别。曾经听过一句话，写程序很简单，只要把你的话说给电脑就行了。基础扎实了还是厉害的，对于新出来的技术，只要往直前的知识网里面一结合，就不难了。