PDA

View Full Version : Arrow key navigation in edit Grid



ust
21 Apr 2010, 1:38 PM
Hi,

We have a requirement on cell navigation which should support navigation in the grid using arrow keys (while in edit mode). This requirement can be broken down into:

1) Edit values in cell without pressing Enter key or click
2) Press arrow keys to navigate in the grid while in edit mode .

I am referring to the example of edit-grid (http://www.extjs.com/deploy/dev/examples/grid/edit-grid.html) which does not provide these functionalities. Is there any other example which supports this? If not, would we be able to achieve this in some way?

I am a beginner for Ext JS and would appreciate if someone can shed some light on this.

Thanks in advance.

issameddine
22 Apr 2010, 1:00 AM
Hello
1. You retrieves the coordinates of the current cell (and coldex rowIndex)
2. You test the type of the button and you call the function startEditing


var rowSelected = grid.activeEditor.row;
var colSelected = grid.activeEditor.col;
if (rowSelected > 0)
{
if (code == "38")
grid.startEditing (rowSelected-1, colSelected);
}
if (rowSelected < maxRowIndex)
{
if (code == "40")
grid.startEditing (rowSelected+1, colSelected);
}

shanewatson
22 Apr 2010, 1:29 AM
Hi All,
i am new member of this forum and hope to learn a lot and enjoy discussion with you.

ust
22 Apr 2010, 4:15 AM
Hi issameddine,

Thanks for the reply. I apologize for my ignorance, but can you please clarify on the following:
- On what event would the code that you gave be fired? I tried using the keydown event of the grid, but once we get into edit mode, the keydown function does not get called (I wanted to put your code in the function, but since it doesnt get called, there is something else wrong with it). Please help.



grid.on('keydown', handleKeyDown);

function handleKeyDown(e)
{
code = e.keyCode;
alert(code);
}
Thanks.

issameddine
22 Apr 2010, 4:41 AM
Hello
I am sorry, I forgot to mention it
add the 'specialkey' event of TextField editor



listeners :{specialkey:specialkeyfunction}

specialkeyfunction=function(/* object */obj, /* Ext.EventObject */ e)
{
//Le code de l'Úvennement.
var code = e.getCharCode ();
var rowSelected = grid.activeEditor.row;
var colSelected = grid.activeEditor.col;
if (rowSelected > 0)
{
if (code == "38")
grid.startEditing (rowSelected-1, colSelected);
}
if (rowSelected < maxRowIndex)
{
if (code == "40")
grid.startEditing (rowSelected+1, colSelected);
}
}

ust
23 Apr 2010, 5:17 AM
Hi,

This does not seem to work for me. Maybe there is some syntax error?



var cm = new Ext.grid.ColumnModel({
// specify any defaults for each column
defaults: {
sortable: true // columns are not sortable by default

},
columns: [
{
id: 'common',
header: 'Common Name',
dataIndex: 'common',
width: 220,
// use shorthand alias defined above
editor: new fm.TextField({
allowBlank: false,
listener: {specialkey: specialkeyfunction}
})
}, {
header: 'Light',
dataIndex: 'light',
width: 130,
editor: new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
// transform the data already specified in html
transform: 'light',
lazyRender: true,
listClass: 'x-combo-list-small'
})
}, {
header: 'Price',
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})
}, {
header: 'Available',
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
editor: new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
})
},
checkColumn // the plugin instance
]
});

function specialkeyfunction(e)
{
alert("function specialKeyfn");
}

// grid is then created using above cm
I have added listener to the textfield column. However when I press keys on the text field, it does not give me the alert message. Is there some silly mistake I am making? Please help.

Thanks.

ust
23 Apr 2010, 5:24 AM
Hi issameddine,

I am not able to make it work. Maybe there is some sytax error?



var cm = new Ext.grid.ColumnModel({
// specify any defaults for each column
defaults: {
sortable: true // columns are not sortable by default

},
columns: [
{
id: 'common',
header: 'Common Name',
dataIndex: 'common',
width: 220,
// use shorthand alias defined above
editor: new fm.TextField({
allowBlank: false,
listener: {specialkey: specialkeyfunction}
})
}, {
header: 'Light',
dataIndex: 'light',
width: 130,
editor: new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
// transform the data already specified in html
transform: 'light',
lazyRender: true,
listClass: 'x-combo-list-small'
})
}, {
header: 'Price',
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})
}, {
header: 'Available',
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
editor: new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
})
},
checkColumn // the plugin instance
]
});

function specialkeyfunction(e)
{
alert("function called");
}

//grid is created using above cm
Can you please check? Thanks.

issameddine
23 Apr 2010, 8:33 AM
u must replace "listener" with "listeners"

Hi issameddine,

I am not able to make it work. Maybe there is some sytax error?



var cm = new Ext.grid.ColumnModel({
// specify any defaults for each column
defaults: {
sortable: true // columns are not sortable by default

},
columns: [
{
id: 'common',
header: 'Common Name',
dataIndex: 'common',
width: 220,
// use shorthand alias defined above
editor: new fm.TextField({
allowBlank: false,
listener: {specialkey: specialkeyfunction} // ==> listeners
})
}, {
header: 'Light',
dataIndex: 'light',
width: 130,
editor: new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
// transform the data already specified in html
transform: 'light',
lazyRender: true,
listClass: 'x-combo-list-small'
})
}, {
header: 'Price',
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})
}, {
header: 'Available',
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
editor: new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
})
},
checkColumn // the plugin instance
]
});

function specialkeyfunction(e)
{
alert("function called");
}

//grid is created using above cm
Can you please check? Thanks.

ust
23 Apr 2010, 9:14 AM
Hi issameddine,

That worked! :)
Thank you very much...

bizcatalyst
28 Dec 2012, 10:09 AM
Hi issameddine,
I was able to successfully implement your function to make the up arrow work, but I'm having trouble figuring out how to get the value of maxRowIndex so the down arrow will work. Do you know how to gain access to this from within the specialkeyfunction? I'm returning a totalProperty called totalCount in my datastore object which has the value I need but I'm not sure how to access it from within the colum model where the specialkeyfunction is defined.
Thank you,
Robert

bizcatalyst
28 Dec 2012, 10:21 AM
I figured it out by reviewing http://www.sencha.com/forum/showthread.php?61590-Solved-How-to-get-totalProperty-value-from-JsonReader, the code is this:

var maxRowIndex = grid.store.reader.jsonData.totalCount;
where totalCount is the totalPropery name I defined in my reader.

mitchellsimoens
28 Dec 2012, 10:23 AM
I figured it out by reviewing http://www.sencha.com/forum/showthread.php?61590-Solved-How-to-get-totalProperty-value-from-JsonReader, the code is this:

var maxRowIndex = grid.store.reader.jsonData.totalCount;
where totalCount is the totalPropery name I defined in my reader.

No, store.getTotalCount()

bizcatalyst
28 Dec 2012, 10:29 AM
Thanks Mitchell, apparently this does the same thing:

var maxRowIndex = grid.store.getTotalCount()-1;
I added the -1 at the end because the index starts at 0 but the count starts at 1.