PDA

View Full Version : How to call editor on any cell in grid?



biohazardo
13 Feb 2012, 6:00 AM
Hello. I have RecordIndex, and I know column name. How can I call editor on the cell with focused cursor? Thanks.

mitchellsimoens
13 Feb 2012, 6:04 AM
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.plugin.CellEditing-method-startEdit

biohazardo
13 Feb 2012, 10:31 PM
But how can I start edit from listener of editor. I have listener on "Enter" key:

listeners:{ specialkey: function(field, e){


if (e.getKey() == e.ENTER) {
var grid = Ext.getCmp('sheetproductionrestin');
var store = Ext.getCmp('sheetproductionrestin').store;
var selModel = grid.getSelectionModel();
var selectedRecord = selModel.getLastSelected();


var recordIndex = store.indexOf(selectedRecord);
var nextRecord = store.getAt(recordIndex + 1);
selModel.select(nextRecord);
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing');



cellEditing.startEdit(nextRecord,field.name)


}
}
}
This cellEditing drops error "Uncaught TypeError: Cannot read property 'store' of undefined".
Maybe I need to do it by another path?

And how can I access grid not by ID, but relatively.

vietits
13 Feb 2012, 11:18 PM
You should post the code of defining your grid for reference then someone can help to find the solution.

biohazardo
13 Feb 2012, 11:39 PM
I could select Editing from grid by grid.plugins[0];

Now I can't give parameters in StartEdit. I don't know how to take column or row from grid, to give if to Editing.startEdit(nextRecord,field);

In console i have: Uncaught TypeError: Object [object Object] has no method 'getIndex'
I don't understand, what is Ext.data.Model (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Model) and how to take it. I know recordIndex and columnName. How I can call StartEdit correct?

vietits
14 Feb 2012, 12:26 AM
1. What do you mean with 'columnName'?
2. With Ext.grid.plugin.CellEditing you have some ways to start edit a cell:

If you know the position of the cell (rowIndex, columnIndex) you can use <editor>.startEditByPosition({row: rowIndex, column: columnIndex}).
If you know the record and columnHeader object that defines the column (not column name), you can use <editor>.startEdit(record, columnHeader)

biohazardo
14 Feb 2012, 12:29 AM
This code helped to get Column Model and open editor at cell: var column = grid.getView().getHeaderCt().getHeaderAtIndex(5);
But how can I select column index here (I entered 5 here for test). I have only field, that gives listener event: specialkey: function(field, e){..}

But I want to take index from given field, because I have several different editors. How to take index? How to take that "columnHeader"?

biohazardo
14 Feb 2012, 12:52 AM
1. What do you mean with 'columnName'?

When the listener gives me field, I can take it's name in table by field.name.

vietits
14 Feb 2012, 1:24 AM
You can get information from the current editing context of the editor plugin:


listeners: {
specialKey: function(){
var editor = grid.getPlugin('Your plugin id here'); // or grid.plugins[0] if you know the index of editor plugin
var context = editor.context;
console.log(context);
.....
}
}

biohazardo
14 Feb 2012, 1:38 AM
You can get information from the current editing context of the editor plugin:


listeners: {
specialKey: function(){
var editor = grid.getPlugin('Your plugin id here'); // or grid.plugins[0] if you know the index of editor plugin
var context = editor.context;
console.log(context);
.....
}
}


Thanks. It works. Now it can create new Editor in same field, but new Editor hides in short. I see it for milliseconds. But sometimes it doesn't hide. It seems like bug, but I don't know. Where I need to look for that?

And how I can to take parent grid of Editor without ID. Relativity. How to access it?

vietits
14 Feb 2012, 1:42 AM
I wonder what you create new editor for?

biohazardo
14 Feb 2012, 2:27 AM
I wonder what you create new editor for?
When I filled one cell, I will fill another cell in next row. I need opened and focused editor at once. There will be too much data.

vietits
14 Feb 2012, 2:48 AM
Just use the current editor to edit next cell. For example:


var editor = grid.plugins[0];
var context = editor.context;
editor.startEditByPosition(context.rowIdx + 1, context.colIdx); // edit cell on the next row of the same column

biohazardo
14 Feb 2012, 2:54 AM
Just use the current editor to edit next cell. For example:


var editor = grid.plugins[0];
var context = editor.context;
editor.startEditByPosition(context.rowIdx + 1, context.colIdx); // edit cell on the next row of the same column

After if an error in console: Uncaught TypeError: Cannot read property 'dataIndex' of undefined
How I think, startEditByPosition() can't work with simple integers. It need something strange like this "Object (http://docs.sencha.com/ext-js/4-0/#!/api/Object) position".

vietits
14 Feb 2012, 4:17 AM
Sorry, I made a mistake, the correct one is follow:


var editor = grid.plugins[0];
var context = editor.context;
editor.startEditByPosition({row: context.rowIdx + 1, column: context.colIdx});

biohazardo
14 Feb 2012, 5:03 AM
Sorry, I made a mistake, the correct one is follow:


var editor = grid.plugins[0];
var context = editor.context;
editor.startEditByPosition({row: context.rowIdx + 1, column: context.colIdx});


It doesn't working too. I stopped at real working version. Here is it:


listeners:{
specialkey: function(field, e){


if (e.getKey() == e.ENTER) {



var grid = this.parentGrid;



var store = grid.store;
var selModel = grid.getSelectionModel();
var selectedRecord = selModel.getLastSelected();


var recordIndex = store.indexOf(selectedRecord);
var nextRecord = store.getAt(recordIndex + 1);
selModel.select(nextRecord);
if (nextRecord){
Editing = grid.getPlugin('cellediting');
var context = Editing.context;


col = grid.getView().getHeaderCt().getHeaderAtIndex(context.colIdx);
Editing.startEdit(nextRecord,col);
return false;
}


}
}
}


One of the biggest problem, that I can't access grid inside Editor. I have many grids and only one editor function declaration. And for many grids I need to update every of them. That parameter

var grid = this.parentGrid; gives every grid here. How to access the grid from inside editor? Is it possible?

vietits
14 Feb 2012, 5:57 AM
1. This code works well for me.


var editor = grid.plugins[0];
var context = editor.context;
editor.startEditByPosition({row: context.rowIdx + 1, column: context.colIdx});


2. About your problem, you should post your codes (code of defining your grids, code of handling events, etc) then someone could help you. It's difficult to say when we don't have enough information.

biohazardo
14 Feb 2012, 11:26 PM
Solution:

This code must be added not in Editor code. It need to be in EditingPlugin code on edit listener. In that case we can take grid relativity and do something with it. Here is plugin code (like method):



getEditingPlugin:function (handler) {
return Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit:1,
pluginId:'cellediting',
listeners:{
edit:function (editor, e) {
var store = e.record.store;
var grid = e.grid;
var nextRecord = store.getAt(store.indexOf(e.record) + 1);
if (nextRecord) {
var column = grid.view.getHeaderCt().getHeaderAtIndex(e.colIdx);
this.startEdit(nextRecord, column);
return false;
}
}
}
});
}

Thanks everybody...:)