日期:2014-05-16  浏览次数:20335 次

Extjs3.x 为GridPanel 排序 行拖拽 行数据上移 行数据下移

需要实现gridPanel行数据排序,思路是:删除选中行的数据,在移动行插入新数据,形成移动的假象。

var Menu = new Ext.menu.Menu({
        items: [{
            text: '上移',
			iconCls: 'arrow-upon-icon', 
            handler: function(){
				if(rowIndex == 0) {
					return;
				}
				var data = grid.store.data.items[rowIndex].data;
				var record = new Ext.data.Record({
					Id:data.Id,
					name: data.name,
					type: data.type,
					remarks:data.remarks
				});
				grid.getStore().removeAt(rowIndex); 
				grid.getStore().insert(rowIndex - 1, record); 
				grid.getSelectionModel().selectRow(rowIndex - 1); 
				grid.getView().refresh();		
			},
            scope: this
        },
        {
            text: '下移',
			iconCls: 'arrow-downward-icon', 
            handler: function(){
				if(rowIndex < grid.getStore().getCount() - 1){
					var data = grid.store.data.items[rowIndex].data;
					var record = new Ext.data.Record({
						Id:data.Id,
						name: data.name,
						type: data.type,
						remarks:data.remarks
					});
					grid.getStore().removeAt(rowIndex); 
					grid.getStore().insert(rowIndex + 1, record); 
					grid.getSelectionModel().selectRow(rowIndex + 1); 
					grid.getView().refresh();		
				}
			},
            scope: this
        }]
    });
	var grid = new Ext.grid.GridPanel({
		autoScroll: true,
		border: false,
		loadMask: true,
		enableDragDrop:true,//激活行拖动
		ddGroup: 'gridDD',
		dropConfig: {appendOnly:false},
		store: {},
		columns: [
		    new Ext.grid.RowNumberer(),
			{ header: '编号', dataIndex: 'Id', width: 200,hidden:true},
			{ header: '名称', dataIndex: 'name', width: 200, sortable: true},
		    { header: '类型', dataIndex: 'type', width: 100},
		    { header: '备注', dataIndex: 'remarks', width: 300}
		],
		listeners: {
			rowdblclick: function(grid, rowIndex, event) {
				
			},
			contextmenu:function(e){
				var target = e.getTarget(); 
				e.stopEvent() ;
				Menu.showAt(e.getXY());
				var view = grid.getView();
				rowIndex = view.findRowIndex(target);
				grid.getSelectionModel().selectRow(rowIndex);
			}
		}
	});

//GridPanel已渲染后才执行这段
	var ddrow = new Ext.dd.DropTarget(grid.getEl(), {
        ddGroup: 'gridDD',
		copy    : false,
        notifyDrop : function(dd, e, data){
			//选择行
            var rows = grid.getSelectionModel().getSelections();
			//选择行数
            var count = rows.length;
			//拖动到几行
            var dropIndex = dd.getDragData(e).rowIndex;
            var array=[];
            for(var i=0;i<count;i++){
                var index = dropIndex+i;
                array.push(index);
            }
            grid.getStore().remove(grid.getStore().getById(data.selections[0].Id));
            grid.getStore().insert(dropIndex,data.selections); 
            grid.getSelectionModel().selectRows(array); 
			grid.getView().refresh(); 	
        }
    });