var app = {}; Ext.onReady(function(){ Ext.QuickTips.init(); Ext.Msg.minWidth =300; var myData = [ {id:1,'projectId': 100, 'project': 'Ext Forms: Field Anchoring', 'taskId': 112, 'description': 'Integrate 2.0 Forms with 2.0 Layouts', 'estimate': 6, 'rate': 150, 'due':'06/24/2007'}, {id:2,'projectId': 100, 'project': 'Ext Forms: Field Anchoring', 'taskId': 113, 'description': 'Implement AnchorLayout', 'estimate': 4, 'rate': 150, 'due':'06/25/2007'}, {id:3,projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 114, description: 'Add support for multiple types of anchors', estimate: 4, rate: 150, due:'06/27/2007'}, {id:4,projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due:'06/29/2007'}, {id:5,projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 101, description: 'Add required rendering "hooks" to GridView', estimate: 6, rate: 100, due:'07/01/2007'}, {id:6,projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 102, description: 'Extend GridView and override rendering functions', estimate: 6, rate: 100, due:'07/03/2007'}, {id:7,projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due:'07/04/2007'}, {id:8,projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due:'07/05/2007'}, {id:9,projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 104, description: 'Testing and debugging', estimate: 6, rate: 100, due:'07/06/2007'}, {id:10,projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 105, description: 'Ext Grid plugin integration', estimate: 4, rate: 125, due:'07/01/2007'}, {id:11,projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 106, description: 'Summary creation during rendering phase', estimate: 4, rate: 125, due:'07/02/2007'}, {id:12,projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 107, description: 'Dynamic summary updates in editor grids', estimate: 6, rate: 125, due:'07/05/2007'}, {id:13,projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due:'07/05/2007'}, {id:14,projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 109, description: 'Summary renderers and calculators', estimate: 4, rate: 125, due:'07/06/2007'}, {id:15,projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due:'07/11/2007'}, {id:16,projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due:'07/15/2007'} ]; var store = new Ext.data.Store({ reader : new Ext.data.JsonReader({ fields : [ {name :'id', type:'int'}, {name: 'projectId', type: 'int'}, {name: 'project', type: 'string'}, {name: 'taskId', type: 'int'}, {name: 'description', type: 'string'}, {name: 'estimate', type: 'float'}, {name: 'rate', type: 'float'}, {name: 'cost', type: 'float'}, {name: 'due', type: 'date', dateFormat:'m/d/Y'} ] }), listeners :{ scope : this, load : function(){ if(grid){ grid.getSelectionModel().selectFirstRow(); } } } }); store.loadData(myData); var grid = new Ext.grid.GridPanel({ height : 350, width : 800, enableDragDrop : true, store : store, title : '行拖动', frame : true, enableDrag : true, columns: [ { header : 'id', dataIndex : 'id' },{ id: 'description', header: 'Task', sortable: true, dataIndex: 'description' },{ header: 'Project', sortable: true, dataIndex: 'project' },{ header: 'Due Date', sortable: true, dataIndex: 'due', renderer: Ext.util.Format.dateRenderer('m/d/Y') },{ header: 'Estimate', sortable: true, dataIndex: 'estimate', renderer : function(v){ return v +' hours'; } },{ header: 'Rate', sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'rate' },{ id: 'cost', header: 'Cost', sortable: false, groupable: false, renderer: function(v, params, record){ return Ext.util.Format.usMoney(record.data.estimate * record.data.rate); }, dataIndex: 'cost', Renderer: Ext.util.Format.usMoney } ], stripeRows : true, tbar : [{ text : '上移', scope : this, handler : function(){ buttonMove(-1); } },{ text : '下移', scope : this, handler : function(){ buttonMove(1); } },'-'] }); function buttonMove(toward){ var sm = grid.getSelectionModel(); var data = sm.getSelections(); if(sm.hasSelection()){ var rec = sm.getSelected(); var ds = grid.getStore(); var rowIndex = ds.indexOfId(rec.id) + toward; var ri=[]; for(var i=1;i<data.length;i++){ var index = ds.indexOfId(data[i].id); ri.push(index); } if(toward==1){ ri.sort(function(x,y){ if(parseInt(x)>parseInt(y)) return 1; else return -1; }) } else{ ri.sort(function(x,y){ if(parseInt(x)>parseInt(y)) return -1; else return 1; }) } for(var i=0;i<ri.length;++i){ if(rowIndex == ri[i]) rowIndex += toward; } if(rowIndex < 0){ Ext.Msg.alert('提示','记录已在顶部!'); } else if(rowIndex >= ds.getCount()){ Ext.Msg.alert('提示','记录已在底部!'); } else{ move(rowIndex,data); } } else{ Ext.Msg.alert('提示','请选择记录!'); } } function move(rindex,data){ var ds = grid.getStore(); var rdata = ds.getAt(rindex); var toward = 0; var index = ds.indexOfId(data[0].id); if(rindex > index) toward = 1; for(var i=0;i<data.length;i++){ ds.remove(ds.getById(data[i].id)); } rindex = ds.indexOfId(rdata.id) + toward; for(var i=0;i<data.length;i++){ ds.insert(rindex,data[i]); rindex++; } var sm = grid.getSelectionModel(); if(sm) sm.selectRecords(data); } var mainPanel = new Ext.Panel({ renderTo : 'panel1', layout : 'fit', items : [grid] }); }); 显示效果: