Extjs3.x is a GridPanel sorting row. Drag the row data to move the row data down.

To sort the row data of gridPanel, the idea is to delete the data of the selected row and insert new data into the moving row, forming the illusion of moving.

[Javascript]
Var Menu = new Ext. menu. Menu ({
Items :[{
Text: 'move up ',
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: 'move downward ',
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, // enables row dragging.
DdGroup: 'griddd ',
DropConfig: {appendOnly: false },
Store :{},
Columns :[
New Ext. grid. RowNumberer (),
{Header: 'number', dataIndex: 'id', width: 200, hidden: true },
{Header: 'name', dataIndex: 'name', width: 200, sortable: true },
{Header: 'type', dataIndex: 'type', width: 100 },
{Header: 'note', dataIndex: 'remark', 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 );
}
}
});

[Javascript]
// Execute this section after GridPanel is rendered
Var ddrow = new Ext. dd. DropTarget (grid. getEl (),{
DdGroup: 'griddd ',
Copy: false,
Yydrop: function (dd, e, data ){
// Select a row
Var rows = grid. getSelectionModel (). getSelections ();
// Select the number of rows
Var count = rows. length;
// Drag to several rows
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 ();
}
});

Author: zdb330906531