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