Extjs-表格 Ext.grid.GridPanel

 

Extjs-表格 Ext.grid.GridPanel

项目中的grid

自动显示行号

[javascript]  view plain copy

1. rn = new Ext.grid.RowNumberer();  

复选框

[javascript]  view plain copy

1. var sm = new Ext.grid.CheckboxSelectionModel({  
2.     //如果只允许用户通过复选框执行选中操作放开下面配置项  
3.     //handleMouseDown : Ext.emptyFn//可复用的空函数  
4.     //true表示只允许选择单行  
5.     //singleSelect : true  
6. });  

列模型

[javascript]  view plain copy

1. var cm = new Ext.grid.ColumnModel([rn,sm,    
2.     {  
3.         header:'编号',  
4.         dataIndex:'id',  
5.         align :'center',  
6.         sortable : true,  
7.         renderer : function(v){  
8.             return "<div align='center'>"+v?v:""+"</div>"  
9.         }  
10.     },{  
11.         header:'查看详细',  
12.         dataIndex:'id',  
13.         align :'center',  
14.         renderer : function(v){  
15.             return "<div align=\"center\"><input type=\"button\" value=\".....\" οnclick=\"alert(1)\"></div>"  
16.         }  
17.     }  
18. ]);  

分页工具
需要导入ProgressBarPager.js

[javascript]  view plain copy

1. var bbar = new Ext.PagingToolbar({  
2.     pageSize : limit,  
3.     store : store,  
4.     displayInfo : true,  
5.     displayMsg : '显示第{0}条到{1}条记录，一共{2}条',  
6.     emptyMsg : '没有记录',  
7.     prevText:'上一页',  
8.     nextText:'下一页',  
9.     refreshText:'刷新',  
10.     lastText:'最后页',  
11.     firstText:'第一页',  
12.     beforePageText:'当前页',  
13.     afterPageText:'共{0}页',  
14.     plugins: [  
15.         new Ext.ux.ProgressBarPager()  
16.     ]  
17. });  

表格显示内容

[javascript]  view plain copy

1. var grid = new Ext.grid.GridPanel({    
2.     region: 'center',  
3.     store : store,    
4.     stripeRows : true,   
5.     sm : sm,    
6.     cm : cm,  
7.     bbar : bbar,  
8.     tbar : [{  
9.         text: '增加',  
10.         pressed:true,  
11.         handler: function(){  
12.           
13.         }    
14.     },'-',{  
15.         text: '删除',  
16.         pressed:true,  
17.         handler: function(){  
18.               
19.         }    
20.     },'-',{  
21.           text: '修改',  
22.           pressed:true,  
23.           handler: function(){  
24.               
25.           }    
26.     }],  
27.     viewConfig : new Ext.grid.GridView({    
28.         forceFit : true    
29.     }),   
30.     listeners : {    
31.         'beforerender' : function(){    
32.             store.load();   
33.         }    
34.     }    
35. });  

项目中使用new Ext.grid.RowExpander 需要导入ux/RowExpander.js

[javascript]  view plain copy

1. var expander = new Ext.grid.RowExpander({   
2.     tpl : new Ext.Template(  
3.         '<div style="border:1px #CCCCCC solid"><br>'+  
4.            '<table background = "#CCCCCC">' +  
5.            '<tr>' +  
6.             '<td width="23%">                      用户名称:  {YH_MC}</td>' +  
7.             '<td width="23%"></td>' +  
8.             '<td width="23%"></td>' +  
9.             '<td rowspan="4" width="5%">照片:</td>' +  
10.             '<td rowspan="4" width="26%">'+  
11.                 '<img src="<%=rootpath%>/image/lwc.jpg" style="height:177;width:150"/>'+  
12.             '</td>' +  
13.            '</tr>' +     
14.            '<tr>' +  
15.             '<td>                      学历:  {XL}</td>' +  
16.             '<td>学校:  {XX}</td>' +  
17.            '</tr>' +  
18.             '<td>                      电话:  {DH}</td>' +  
19.             '<td>家庭住址:  {JTZZ}</td>' +  
20.            '</tr>' +  
21.            '<tr>' +  
22.             '<td>                      入职时间:  {RZSJ}</td>' +  
23.             '<td>离职时间:  {LZSJ}</td>' +                
24.            '</tr>' +  
25.            '</table>' +  
26.           '<br/></div>'  
27.     ),  
28.     beforeExpand : function(record, body, rowIndex){  
29.         record.data.FILENAME=encodeURI(record.data.FILENAME);  
30.         if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){  
31.             if(this.tpl && this.lazyRender){  
32.                 body.innerHTML = this.getBodyContent(record, rowIndex);  
33.             }  
34.             return true;  
35.         }else{  
36.             return false;  
37.         }  
38.     }  
39. });  

放入列模型

[javascript]  view plain copy

1. var cm = new Ext.grid.ColumnModel([rn,sm,expander,  

放入grid

[javascript]  view plain copy

1. plugins: expander,  

1.表格的特性简介

[plain]  view plain copy

1. 表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,xtype为grid  
2. 表格的列信息由类Ext.grid.ColumnModel定义,  
3. 表格的数据存储器由Ext.data.Store定义,根据解析数据不同,数据存储器分为JsonStore,SimpleStore,GroupingStrore等  

2.制作一个表格

[javascript]  view plain copy

1. var grid = new Ext.grid.GridPanel({  
2.     store : store,  
3.     autoHeight : true,//自动高度  
4.     //enableColumnMove : false,//不可拖动列  
5.     //enableColumnResize : false,不可改变列宽度  
6.     //stripeRows : true,//斑马线效果  
7.     //loadMask : true,//笼罩提示信息  
8.     columns : column,  
9.     //列默认为100px,如果要自定义宽度,只需要设置该列的width属性即可  
10.     //每列自动填满表格  
11.     viewConfig : new Ext.grid.GridView({  
12.         forceFit : true  
13.     }),  
14.     listeners : {  
15.         'beforerender' : function(){  
16.             store.load();  
17.         }  
18.     }  
19. });  

3.指定某一列自动延伸填充表格可以使用autoExpandColumn配置项,cm必须设置id

[javascript]  view plain copy

1. var column = [  
2.     {id:'ttt',header:'名称',dataIndex:'name'}  
3. ]  
4. var grid = new Ext.grid.GridPanel({  
5.     autoExpandColumn : 'ttt'  
6. });  

4.格式化数据集日期显示在列模型中

[javascript]  view plain copy

1. <script type="text/javascript" defer>  
2.     Ext.onReady(function(){  
3.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';  
4.         var data = [  
5.             ['1','李文超','李文超的描述','1985-01-15T02:08:04'],  
6.             ['2','范勇','范勇的描述','1986-01-15T02:08:04'],  
7.             ['3','马新军','马新军的描述','1987-01-15T02:08:04'],  
8.             ['4','常高军','常高军的描述','1988-01-15T02:08:04'],  
9.             ['5','何卫国','何卫国的描述','1989-01-15T02:08:04']  
10.         ];  
11.         var store = new Ext.data.Store({  
12.             proxy : new Ext.data.MemoryProxy(data),  
13.             reader : new Ext.data.ArrayReader({},[  
14.                 {name : 'id',mapping:0},  
15.                 {name : 'name',mapping:1},  
16.                 {name : 'descn',mapping:2},  
17.                 /* 
18.                     type告诉reader在解析原始数据时把对应的列做为日期类型处理 
19.                     dateFormat属性把得到的字符串转化为相应的日期格式 
20.                 */  
21.                 {name : 'date',mapping:3,type:'date',dateFormat:'Y-m-dTH:i:s'},  
22.             ])  
23.         });  
24.         var cm = new Ext.grid.ColumnModel([  
25.             {header:'编号',dataIndex:'id'},  
26.             {header:'名称',dataIndex:'name'},  
27.             {header:'描述',dataIndex:'descn'},  
28.             {     
29.                 header:'日期',  
30.                 dataIndex:'date',  
31.                 width:200,  
32.                 //该函数的作用是渲染日期格式  
33.                 renderer: Ext.util.Format.dateRenderer('Y年m月d日')  
34.             }  
35.         ]);  
36.         var grid = new Ext.grid.GridPanel({  
37.             store : store,  
38.             cm : cm,  
39.             listeners : {  
40.                 'beforerender' : function(){  
41.                     store.load();  
42.                 }  
43.             }  
44.               
45.         });  
46.         new Ext.Viewport({  
47.             layout:'fit',  
48.             items: [grid]  
49.         });  
50.           
51.     });  
52. </script>  

 5.表格渲染

公共部分

[javascript]  view plain copy

1. var cm = new Ext.grid.ColumnModel([  
2.     {header:'编号',dataIndex:'id'},  
3.     {header:'名称',dataIndex:'name'},  
4.     {header:'描述',dataIndex:'descn'},  
5.     {header:'性别',dataIndex:'sex',renderer: renderSex}  
6. ]);  

简单渲染:

[javascript]  view plain copy

1. function renderSex(value){  
2.     if('male'==value){  
3.         return "<span style='color:red'>男</span><img src='<%=rootpath%>/image/boy.jpg'/>"  
4.     }else{  
5.         return "<span style='color:green'>女</span><img src='<%=rootpath%>/image/girl.jpg'/>"  
6.     }  
7. }  

复杂渲染:

[javascript]  view plain copy

1. /* 
2.     value : 将要显示的单元格的值 
3.     cellmeta : 单元格的相关属性,主要有id和CSS 
4.     record : 这行数据对象,如果需要获取其他列的值,可以通过record.data['id']的方式获得 
5.     rowIndex : 行号,这里的行号指的是当前页面中所有记录的顺序 
6.     columnIndex : 列号 
7.     store : 构造表格时传递的ds 
8. */  
9. function renderSex(value, cellmeta, record, rowIndex, colIndex, store){  
10.     var str = "<input type ='button' value='详细信息' οnclick='alert(\""+  
11.     "这个单元格的值是: "+value+"\\n"+  
12.     "这个单元格的配置是: {cellId: "+cellmeta.cellId+",id: "+cellmeta.id+",css: "+cellmeta.css+"}\\n"+  
13.     "这个单元格对应的行是: "+record+",一行的数据都在里边\\n"+  
14.     "这是第"+rowIndex+"行\\n"+  
15.     "这是第"+colIndex+"列\\n"+  
16.     "这个表格对应的Ext.data.Store在这里: "+store+",随便用吧"+  
17.     "\")'/>";  
18.     return str;  
19. }  

7.在grid中删除record和增加record

[javascript]  view plain copy

1. var grid = new Ext.grid.GridPanel({  
2.     store : store,  
3.     clicksToEdit: 1,//要转换单元格为编辑状态所需的鼠标点击数  
4.     cm : cm,  
5.     sm : sm,  
6.     tbar : new Ext.Toolbar({  
7.         items : ['-',{  
8.             text: '添加一行',  
9.             handler : function(){  
10.                 var p = new myRecord({  
11.                     id : '',  
12.                     name : '',  
13.                     descn: '',  
14.                     sex : ''  
15.                 });  
16.                 grid.stopEditing();//停止任何激活的行为  
17.                 store.insert(0,p);//触发添加事件时插入records到指定的store位置  
18.                 grid.startEditing(0,0);//指定的行/列，进行单元格内容的编辑  
19.             }  
20.         },'-',{  
21.             text: '删除一行',  
22.             handler : function(){  
23.                 Ext.Msg.confirm('信息','确认删除?',function(btn){  
24.                     if(btn == 'yes'){  
25.                         var record = store.getAt(0);  
26.                         store.remove(record);  
27.                         grid.view.refresh();//刷新表格的视图  
28.                     }  
29.                 });  
30.             }  
31.         }]  
32.     })  
33. });  

8.表格视图Ext.grid.GridView

[plain]  view plain copy

1. Ext的表格控件都遵守MVC模型  
2. Ext.data.Store可以看作Model  
3. Ext.grid.GridPanel可以看作controller  
4. Ext.grid.GridView可以看作view  
5. 通常情况,ext.grid.GridView的实例不需要自行创建,controller会自动生成  
6. 当希望操作Ext.grid.GridView的属性时,可以通过grid.getView()函数来获取当前表格的视图实例  

默认情况下GridView显示为

修改grid

[javascript]  view plain copy

1. viewConfig : {  
2.     columnsText : 'column',  
3.     scrollOffset : 30,//表格右侧为滚动条预留的宽度  
4.     sortAscText : 'asc',  
5.     sortDescText : 'desc'  
6. }  

修改后的

9.可编辑表格 Ext.grid.EditorGridPanel

[javascript]  view plain copy

1. var grid = new Ext.grid.EditorGridPanel({  
2.     store : store,  
3.     //要转换单元格为编辑状态所需的鼠标点击数  
4.     clicksToEdit: 1,  
5.     cm : new Ext.grid.ColumnModel([  
6.         new Ext.grid.RowNumberer(),sm,{  
7.             header:'编号',  
8.             dataIndex:'id',  
9.             editor : new Ext.grid.GridEditor(  
10.                 new Ext.form.TextField({  
11.                     allowBlank : false  
12.                 })  
13.             )  
14.         },{  
15.             header:'名称',  
16.             dataIndex:'name',  
17.             editor : new Ext.grid.GridEditor(  
18.                 new Ext.form.TextField({  
19.                     allowBlank : false  
20.                 })  
21.             )  
22.         }  
23.     ]),  
24.     sm : sm  
25. });  

10.属性表格控件 Ext.grid.PropertyGrid

 根据name获取value

[javascript]  view plain copy

1. var value = grid.store.getById('name').get('value');  

效果图

代码

[javascript]  view plain copy

1. <script type="text/javascript" defer>  
2.     Ext.onReady(function(){  
3.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';  
4.         var grid = new Ext.grid.PropertyGrid({  
5.             title: '属性表格',  
6.             autoHeight: true,  
7.             width: 300,  
8.             renderTo: 'grid',  
9.             viewConfig: {  
10.                 forceFit: true  
11.             },  
12.             source: {  
13.                 "名字": "不告诉你",  
14.                 "创建时间": new Date(Date.parse('12/15/2007')),  
15.                 "是否有效": false,  
16.                 "版本号": .01,  
17.                 "描述": "嗯，估计没啥可说的"  
18.             }  
19.         });  
20.     });  
21. </script>  

10.1禁用Ext.grid.PropertyGrid编辑功能通过监听器来实现

[javascript]  view plain copy

1. grid.on("beforeedit", function(e){  
2.     e.cancel = true;  
3.     return false;  
4. });  

10.2Ext.grid.PropertyGrid自身有两列name和value,默认根据nane排序,我们可以修改配置项initComponent,强制对name列进行排序

[javascript]  view plain copy

1. Ext.MyPropertyGrid = Ext.extend(Ext.grid.PropertyGrid, {  
2.     //自定义配置项  
3.     autoSort:true,  
4.     initComponent : function(){  
5.         this.customRenderers = this.customRenderers || {};  
6.         this.customEditors = this.customEditors || {};  
7.         this.lastEditRow = null;  
8.         var store = new Ext.grid.PropertyStore(this);  
9.         this.propStore = store;  
10.         var cm = new Ext.grid.PropertyColumnModel(this, store);  
11.         //接受参数是否需要默认排序  
12.         if(this.autoSort){  
13.             store.store.sort('name', 'ASC');  
14.         }  
15.         this.addEvents(  
16.             'beforepropertychange',  
17.             'propertychange'  
18.         );  
19.         this.cm = cm;  
20.         this.ds = store.store;  
21.         Ext.grid.PropertyGrid.superclass.initComponent.call(this);  
22.                 this.mon(this.selModel, 'beforecellselect', function(sm, rowIndex, colIndex){  
23.             if(colIndex === 0){  
24.                 this.startEditing.defer(200, this, [rowIndex, 1]);  
25.                 return false;  
26.             }  
27.         }, this);  
28.             }  
29. });  
30.   
31. var grid = new Ext.MyPropertyGrid({  
32.     title : '表格标题',  
33.     autoHeight : true,  
34.     width : 400,  
35.     //这里传参数  
36.     autoSort : false,  
37.     renderTo : 'lwc',  
38.     //JSON指定了一组key和value  
39.     source : {  
40.         '名' : 'tom',  
41.         '姓' : 'cat',  
42.         '性别' : 'boy',  
43.         '年龄' : '18'  
44.     }  
45. });  

10.3自定义编辑器

[javascript]  view plain copy

1. <script type="text/javascript" defer>    
2.     Ext.onReady(function(){    
3.         var grid = new Ext.grid.PropertyGrid({  
4.             title: '属性表格',  
5.             autoHeight: true,  
6.             width: 300,  
7.             renderTo: 'grid',  
8.             customEditors: {  
9.                 'Start Time': new Ext.grid.GridEditor(  
10.                     new Ext.form.TimeField({  
11.                         selectOnFocus:true  
12.                     })  
13.                 )  
14.             },  
15.             source: {  
16.                 'Start Time': '10:00 AM'  
17.             }  
18.         });   
19.     });    
20. </script>  

11.表格右键菜单

[plain]  view plain copy

1. contextmenu (Ext.EventObject e) 全局性右键事件  
2. cellcontextmenu (Grid this,Number rowIndex,Number cellIndex,Ext.EventObject e) 单元格上的右键事件  
3. rowcontextmenu(Grid this,Number rowIndex,Ext.EventObject e) 行上右键事件  
4. headercontextmenu(Grid this,Number columnIndex,Ext.EventObject e) 表头右键事件  

[javascript]  view plain copy

1. var contextmenu = new Ext.menu.Menu({  
2.     items : [{  
3.         text : '查看详细',  
4.         handler : function(){  
5.               
6.         }  
7.     }]  
8.   
9. });  
10.   
11. var grid = new Ext.grid.GridPanel({  
12.     renderTo : 'grid',  
13.     autoHeight : true,  
14.     store : store,  
15.     cm : cm,  
16.     listeners : {  
17.         rowcontextmenu : function(grid,rowIndex,e){  
18.             e.preventDefault();  
19.             //返回grid的SelectionModel  
20.             var rowSelectionModel = grid.getSelectionModel();  
21.             //选取这一行  
22.             rowSelectionModel.selectRow(rowIndex);  
23.             //获取事件的页面坐标  
24.             var array = e.getXY()  
25.             //在指定的位置显示该菜单  
26.             contextmenu.showAt(array);  
27.         }  
28.     }  
29. });  

12.分组表格视图

[plain]  view plain copy

1. 我们可以通过grid.getView()获取Ext.grid.GroupingView的实例,进行对视图的操作  

代码

[javascript]  view plain copy

1. var data = [  
2.     ['1','李文超','李文超的描述','male'],  
3.     ['2','范勇','范勇的描述','female'],  
4.     ['3','马新军','马新军的描述','male'],  
5.     ['4','常高军','常高军的描述','female'],  
6.     ['5','何卫国','何卫国的描述','male']  
7. ];  
8. var store = new Ext.data.GroupingStore({  
9.     proxy : new Ext.data.MemoryProxy(data),  
10.     reader : new Ext.data.ArrayReader({},[  
11.         {name : 'id',mapping:0},  
12.         {name : 'name',mapping:1},  
13.         {name : 'descn',mapping:2},  
14.         {name : 'sex',mapping:3},  
15.     ]),  
16.     groupField : 'sex',  
17.     sortInfo : {  
18.         field : 'id',//排序的属性  
19.         deirection : 'asc' //排序的方式  
20.     }  
21. });  
22. store.load();  
23. var cm = new Ext.grid.ColumnModel([  
24.     {header:'编号',dataIndex:'id'},  
25.     {header:'名称',dataIndex:'name'},  
26.     {header:'描述',dataIndex:'descn'},  
27.     {header:'性别',dataIndex:'sex'}  
28. ]);  
29. var grid = new Ext.grid.GridPanel({  
30.     store : store,  
31.     view : new Ext.grid.GroupingView(),  
32.     cm : cm,  
33.     tbar : [{  
34.         text : 'expand',  
35.         handler : function(btn) {  
36.             var groupingView = grid.getView();  
37.             groupingView.expandAllGroups()//展开所有分组  
38.         }  
39.     },{  
40.         text : 'collapse',  
41.         handler : function(btn) {  
42.             var groupingView = grid.getView();  
43.             groupingView.collapseAllGroups();//折叠所有分组  
44.         }  
45.     },{  
46.         text : 'toggle',  
47.         handler : function(btn) {  
48.             var groupingView = grid.getView();  
49.             //会自动判断分组的状态,展开的时候折叠,折叠的时候展开  
50.             groupingView.toggleAllGroups();  
51.         }  
52.     },{  
53.         text : 'toggle one',  
54.         handler : function(btn) {  
55.             var groupingView = grid.getView();  
56.             //只展开female  
57.             var groupId = groupingView.getGroupId('female');  
58.             groupingView.toggleGroup(groupId);  
59.         }  
60.     }]  
61. });  
62. new Ext.Viewport({  
63.     layout:'fit',  
64.     items: [grid]  
65. });  

13.拖放表格
13.1拖放改变表格的大小Ext.Resizable()
效果图

代码

[javascript]  view plain copy

1. <%@ page language="java"  pageEncoding="UTF-8"%>  
2. <%   String rootpath = request.getContextPath();%>  
3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
4. <html>  
5.   <head>  
6.     <link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/>  
7.     <script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script>  
8.     <script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script>  
9.     <script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script>  
10.     <script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script>  
11.     <script type="text/javascript" defer>  
12.         Ext.onReady(function(){  
13.             Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';  
14.             var data = [  
15.                 ['1','李文超','李文超的描述','male'],  
16.                 ['2','范勇','范勇的描述','female'],  
17.                 ['3','马新军','马新军的描述','male'],  
18.                 ['4','常高军','常高军的描述','female'],  
19.                 ['5','何卫国','何卫国的描述','male']  
20.             ];  
21.             var store = new Ext.data.Store({  
22.                 proxy : new Ext.data.MemoryProxy(data),  
23.                 reader : new Ext.data.ArrayReader({},[  
24.                     {name : 'id',mapping:0},  
25.                     {name : 'name',mapping:1},  
26.                     {name : 'descn',mapping:2},  
27.                     {name : 'sex',mapping:3},  
28.                 ])  
29.             });  
30.             store.load();  
31.             var cm = new Ext.grid.ColumnModel([  
32.                 {header:'编号',dataIndex:'id'},  
33.                 {header:'名称',dataIndex:'name'},  
34.                 {header:'描述',dataIndex:'descn'},  
35.                 {header:'性别',dataIndex:'sex'}  
36.             ]);  
37.             var grid = new Ext.grid.GridPanel({  
38.                 renderTo : 'grid',  
39.                 store : store,  
40.                 cm : cm  
41.             });  
42.             var rz = new Ext.Resizable(grid.getEl(),{  
43.                 wrap : true,//构造Resizable时自动在指定id的外边包裹一层div,这样就不要定义其他附属的div了  
44.                 minHeight : 100,//限制改变大小的高度  
45.                 pinned : true,//控制拖动区域的显示状态,true表示会一直在表格下方,false,只有鼠标悬停在可拖拽区域上方时出现  
46.                 handles : 's' //东 南 西 北  
47.             })  
48.             //注册事件,在拖放完成之后表格会调用syncSize方法修改自己的大小,第三个参数是函数执行的scope  
49.             //syncSize 强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度  
50.             rz.on('resize',grid.syncSize,grid);   
51.         });  
52.     </script>  
53.   </head>  
54.   <body>  
55.     <div id = 'grid'></div>  
56.   </body>  
57. </html>  

13.2在同一个表格里拖放
效果图

代码

[javascript]  view plain copy

1. <%@ page language="java"  pageEncoding="UTF-8"%>  
2. <%   String rootpath = request.getContextPath();%>  
3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
4. <html>  
5.   <head>  
6.     <link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/>  
7.     <script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script>  
8.     <script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script>  
9.     <script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script>  
10.     <script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script>  
11.     <script type="text/javascript" defer>  
12.         Ext.onReady(function(){  
13.             Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';  
14.             var data = [  
15.                 ['1','李文超','李文超的描述','male'],  
16.                 ['2','范勇','范勇的描述','female'],  
17.                 ['3','马新军','马新军的描述','male'],  
18.                 ['4','常高军','常高军的描述','female'],  
19.                 ['5','何卫国','何卫国的描述','male']  
20.             ];  
21.             var store = new Ext.data.Store({  
22.                 proxy : new Ext.data.MemoryProxy(data),  
23.                 reader : new Ext.data.ArrayReader({},[  
24.                     {name : 'id',mapping:0},  
25.                     {name : 'name',mapping:1},  
26.                     {name : 'descn',mapping:2},  
27.                     {name : 'sex',mapping:3},  
28.                 ])  
29.             });  
30.             store.load();  
31.             var cm = new Ext.grid.ColumnModel([  
32.                 {header:'编号',dataIndex:'id'},  
33.                 {header:'名称',dataIndex:'name'},  
34.                 {header:'描述',dataIndex:'descn'},  
35.                 {header:'性别',dataIndex:'sex'}  
36.             ]);  
37.             var grid = new Ext.grid.GridPanel({  
38.                 renderTo : 'grid',  
39.                 autoHeight : true,  
40.                 store : store,  
41.                 cm : cm,  
42.                 enableDragDrop : true //对表格内置拖放支持   
43.             });  
44.             //一个简单的基础类,该实现使得任何元素变成为可落下的目标,以便让拖动的元素放到其身上  
45.             var ddrow = new Ext.dd.DropTarget(grid.container,{  
46.                 ddGroup : 'GridDD',  
47.                 copy : false,//拖放以后是执行裁剪操作还是复制,false拖过去以前数据不见了,true拖过去原来数据不会变化  
48.                 //拖动事件  
49.                 notifyDrop : function(dd,e,data){  
50.                     //选中了多少行  
51.                     var rows = data.selections;  
52.                     //拖动到第几行  
53.                     var index = dd.getDragData(e).rowIndex;  
54.                     if(typeof(index) == 'undefined'){  
55.                         return;  
56.                     }  
57.                     //修改store  
58.                     for(i = 0 ;i <rows.length;i++){  
59.                         var rowData = rows[i];  
60.                         if(!this.copy){  
61.                             store.remove(rowData);  
62.                             store.insert(index,rowData);  
63.                         }  
64.                     }  
65.                 }  
66.             });  
67.         });  
68.     </script>  
69.   </head>  
70.   <body>  
71.     <div id = 'grid'></div>  
72.   </body>  
73. </html>