how to move the grid's row up and down?

[enotsl]

I have two button to control the grid's rows, one is move up, and the other is move down,

I want to move the selected row move up/down to the be/next row, when i click the move button,

I find the api document, but no found any methods about that,

pleast give me some help, thanks!

[Condor]

Read the API docs for RowSelectionModel:

grid.getSelectionModel().selectPrevious()/selectNext()

[enotsl]

maybe i am no say the question clear,

I want to move the seleted the row move up/down, let me draw

before move up
--------------------
row1
--------------------
row2 (this selected row)
--------------------

after move

--------------------
row2 (be move up to row1)
--------------------
row1
--------------------

[Condor]

OK, that's something entirely different.

Try:

function moveSelectedRow(grid, direction) {
	var record = grid.getSelectionModel().getSelected();
	if (!record) {
		return;
	}
	var index = grid.getStore().indexOf(record);
	if (direction < 0) {
		index--;
		if (index < 0) {
			return;
		}
	} else {
		index++;
		if (index >= grid.getStore().getCount()) {
			return;
		}
	}
	grid.getStore().remove(record);
	grid.getStore().insert(index, record);
	grid.getSelectionModel().selectRow(index, true);
}

[enotsl]

oh, hoho,

it's working prefect, thanks!

[FunkyDude]

it would be nice to see the code to update the db as well..

In my case, i have a 'position' attribute in db i need to update it each time a user clicks on move up or move down buttons

[jaisonjames]

I think this will help me, but how it will implement in a array grid?

OK, that's something entirely different.

Try:

function moveSelectedRow(grid, direction) {
	var record = grid.getSelectionModel().getSelected();
	if (!record) {
		return;
	}
	var index = grid.getStore().indexOf(record);
	if (direction < 0) {
		index--;
		if (index < 0) {
			return;
		}
	} else {
		index++;
		if (index >= grid.getStore().getCount()) {
			return;
		}
	}
	grid.getStore().remove(record);
	grid.getStore().insert(index, record);
	grid.getSelectionModel().selectRow(index, true);
}

[Condor]

I think this will help me, but how it will implement in a array grid?

Strange question... the code is independent of the reader that is used by the store.

ps. 'direction' should be -1 or +1.

[jaisonjames]

Sorry, I don't have much experience in extjs. Below my code is it possible to integrate that function for move move up and ove down button?

var myData = [
['My Issues Report','Open Issues','1-Extra Small','Filter_open_issues','None','No','','',''],
['My Task Report','Late Task','2-Small','Filter_Late_Tasks','None','No','','',''],
['All Project List','High Priority Projects for BU-ABC','3-Medium','Filter_High_priority','BU_ABC','Yes','','',''],
['Resource Load','DBA Workload','4-Large','Filter_Roal_DBA','None','Daily','1/1/2010','3/31/2010',''],
['Resource Load','Dev Workload','5-Extra Large','Filter_Roal_Dev','None','Weekly','','','this month'],
['','','6-Extra Extra Large','','','','','','']
];



// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'component'},
{name: 'name'},
{name: 'size'},
{name: 'filter'},
{name: 'target'},
{name: 'frequency'},
{name: 'fromDate'},
{name: 'toDate'},
{name: 'relativeDate'}
]
});

// manually load local data
store.loadData(myData);

var componentsconfig = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: '<b>Component</b>', sortable: true},
{header: '<b>Display Name</b>', sortable: true},
{header: '<b>Size</b>', sortable: true},
{header: '<b>Filter</b>', sortable: true},
{header: '<b>Target</b>', sortable: true},
{header: '<b>Frequency</b>', sortable: true},
{header: '<b>From Date</b>', sortable: true},
{header: '<b>To Date</b>', sortable: true},
{header: '<b>Relative Dates</b>', sortable: true}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 370,
width: '100%',
title: 'Component Configuration',
bbar:[
{xtype: 'tbfill'},
{
icon: '../image/reportui/icon-grid-deleteRow.png',
tooltip:'Delete Selected Row',

},
{
icon: '../image/reportui/icon-grid-moveup.png',
tooltip:'Move to Up Selected Row'

},
{
icon: '../image/reportui/icon-grid-movedown.png',
tooltip:'Move to Down Selected Row'

}
]
})

Ext.applyIf(this, {
layout : 'fit',
width: '100%'
,items: [{
region:'west',
width: '100%',
items : [componentsconfig]
// Hbox layout with filter options and available icons
}]
})

Strange question... the code is independent of the reader that is used by the store.

[Condor]

{
  icon: '../image/reportui/icon-grid-moveup.png',
  tooltip:'Move to Up Selected Row',
  handler: function(){
    moveSelectedRow(componentsconfig, -1);
  }
},