PDA

View Full Version : Editing Editor Grid cell with a special key stroke



millernegro
16 Aug 2010, 9:05 AM
Hello I have a small question.

I have an editor grid and a store working OK.

Now what i want is to:
select cell with the mouse but editting shouldnt be activated
navigating cell with arrow keys
enable editing on a cell selected only by select that cell and press F2 key
after editing finished on that cell, refresh db info

my grid is:


var grid = new Ext.grid.EditorGridPanel({
title:'CRUD',
store: datos,
columns: [
{header: 'id', dataIndex: 'id', hidden: true, sortable: true},
{header: 'descripcion', dataIndex: 'descripcion', width: 700, sortable: true, editor: new Ext.form.TextField({allowBlank: false})}
],
renderTo: Ext.getBody(),
width: 750,
height: 500,
columnLines: true,
loadMask: true,
sm: new Ext.grid.CellSelectionModel({singleSelect: true})
//clicksToEdit: '1',
});


I get correctly the pressing of the F2 key on a cell and get that cell, but i dont know how to connect that info to the startEditing method (i get some weird error c is not defined in the framework files)

any help appreciated

fay
16 Aug 2010, 9:52 AM
Use ext-all-debug.js while developing to get a verbose error message. And post your code for how you're handling the F2 keypress - you might have to defer (delay) the start of the startEditing method.

P.S.: You mention that editing shouldn't be "activated" when the mouse selects the cell, yet you have singleSelect as true...??

millernegro
16 Aug 2010, 11:40 AM
Thanks for the swift answer fay.

Im using the ext debug.js , yet im a newbie with extjs maybe im trying too hard too quick.

What I do to get the F2 key:



grid.on('keydown',keydown, this);

function keydown(a)
{
//alert(a + a.getKey() + a.getCharCode());

if(a.getCharCode() == 113)//113 code for F2 key
{
var c = new Ext.data.Record;

var sm = grid.getSelectionModel();
var seleccionado = sm.getSelectedCell();
grid.startEditing(seleccionado,this,c); //This is where im stuck, what parameters do i need here?
//alert(seleccionado);
}
}


its ok when i click the cell i dont get the editor

when i press F2

millernegro
16 Aug 2010, 11:44 AM
thanks for the swift answer fay.

I use the ext debug.js file.

the clicked cell not being activated to edit with the click of the mouse its OK and working.

what have now its when i click a cell, and press F2 i get an error

the code i use is, for the F2 key:


grid.on('afteredit',afterEdit, this);//got this from an example in the API

function keydown(a)
{
//alert(a + a.getKey() + a.getCharCode());

if(a.getCharCode() == 113)//113 code for F2 key
{
var c = new Ext.data.Record;

var sm = grid.getSelectionModel();
var seleccionado = sm.getSelectedCell();
grid.startEditing(seleccionado,this,c);//here is where i dont know what parameters do i need of if this is totally wrong
//alert(seleccionado);
}
}


the error i get in firebug is:


Error: c is undefined
Archivo Fuente: http://localhost/extjs/extjs/ext-all-debug-w-comments.js
Línea: 70745

fay
17 Aug 2010, 3:06 AM
If you look at the docs for EditorPanelGrid | startEditing() you'll see that it takes only 2 params: rowIndex and colIndex - I've no idea where you got that example from. To fix your problem, remove your on('keydown') and add the code in red to your EditorGridPanel's config:



var grid = new Ext.grid.EditorGridPanel({
title:'CRUD',
store: datos,
columns: [
{header: 'id', dataIndex: 'id', hidden: true, sortable: true},
{header: 'descripcion', dataIndex: 'descripcion', width: 700, sortable: true, editor: new Ext.form.TextField({allowBlank: false})}
],
renderTo: Ext.getBody(),
width: 750,
height: 500,
columnLines: true,
loadMask: true,
sm: new Ext.grid.CellSelectionModel({singleSelect: true}),
listeners: {
keypress: function(e)
{
if (e.getKey() === e.F2) {
var cell = this.getSelectionModel().getSelectedCell();
if (cell) {
this.startEditing(cell[0], cell[1]);
}
}
}
}
});

millernegro
17 Aug 2010, 7:52 AM
excellent thanks fay you are a good samaritan :D

I will search for how to disable editing when user clicks the mouse or press enter, but believe shouldnt be so hard now when i finish i will post the code hopefully will help somebody in the future

abhilashca
26 Apr 2011, 1:17 AM
excellent thanks fay you are a good samaritan :D

I will search for how to disable editing when user clicks the mouse or press enter, but believe shouldnt be so hard now when i finish i will post the code hopefully will help somebody in the future

Hello,
Is the code

this.getSelectionModel().getSelectedCell();
depricated in ExtJs v3.x and later?

when I tried to use the same, I got a js error: "Object doesn't support this property or method"

Is there any alternate way by which we can get the currently selected column index?

Right now, I'm using

grid.getSelectionModel().lastActive

to get the selected row index. But, I'm stuck with getting the specific column index.

Any help will be appreciated!
Thanks

abhilashca
26 Apr 2011, 2:44 AM
Hello,
Is the code

depricated in ExtJs v3.x and later?

when I tried to use the same, I got a js error: "Object doesn't support this property or method"

Is there any alternate way by which we can get the currently selected column index?

Right now, I'm using

grid.getSelectionModel().lastActive

to get the selected row index. But, I'm stuck with getting the specific column index.

Any help will be appreciated!
Thanks

Hello,
I got the solution.

1. Declare 2 global variables for storing the RowIndex and ColIndex
2. attach "cellclick" event to the editor grid. The event has 4 parameters, out of which 2 will provide the RowIndex and ColIndex.

Thanks :)