Position a specific row of a grid as the first row - extjs

Question

How to set a particular row in grid as the first row in the grid I have tried selecting the row as shown below
var grid = interface.down('directorReviewGrid');
store.removeAll();
store.load({
params: {
workflow_stage: workflow_stage
},
callback: function(records, operation, success) {
var rowIndex = this.find('id', id);
/*where 'id': the id field of your model,
record.getId() is the method automatically created by Extjs.
You can replace 'id' with your unique field.. And 'this' is your store.*/
grid.getView().scrollRowIntoView(rowIndex);
grid.getView().select(rowIndex);
}
});

Answer 1

You can implement using store.insert( 0, records ) and for go to particular that, you can use grid.getView().focusRow(rowIdx).
You can check in this working FIDDLE. Hope this will help/guide you to achieve your requirement.
CODE SNIPPET
var char = 'ABCDEFGHJKLIMNOPQRSTUVWXYZ';
function getRandomNumber() {
return Math.floor(Math.random() * 26);
}
function getRandomName() {
let name = '';
for (let i = 0; i < 6; i++) {
name += char.charAt(getRandomNumber());
}
return name;
}
function getData() {
let data = [];
for (let key = 0; key < 100; key++) {
data.push({
id: key,
name: getRandomName()
})
}
return data
}
Ext.create('Ext.data.Store', {
storeId: 'gridstore',
fields: ['id', 'name'],
data: getData()
});
Ext.create('Ext.grid.Panel', {
title: 'Focus to Row',
store: 'gridstore',
columns: [{
text: 'ID',
dataIndex: 'id'
}, {
text: 'Name',
dataIndex: 'name',
flex: 1
}],
height: window.innerHeight,
renderTo: Ext.getBody(),
tbar: ['->', {
text: 'Move Selected Row to First',
handler: function () {
var grid = this.up('grid'),
store = grid.getStore(),
selctionM = grid.getSelectionModel(),
rec = selctionM.getSelection()[0];
//If selected record is available
if (rec) {
store.remove(rec) //First the remove the store
store.insert(0, rec); //Insert into 1st postion
selctionM.select(rec); //Select same record
grid.getView().focusRow(rec); //Focuses a particular row and brings it into view. Will fire the rowfocus event.
} else {
Ext.Msg.alert('Info', 'Please select any row');
}
}
}]
});