PDA

View Full Version : Problem in setting focus on particular row on Grid Panel in Chrome



livinglegends
8 Sep 2010, 1:10 AM
Hi,

I am facing one issue specifically in Chrome browser only. In other browser, it works fine.

In application, there is one Login screen. When user enter valid user name and password it will redirect user to next screen which contains GridPanel with 4-5 rows. Each row depicts some case where user can select that case and go ahead in that case.

Now, When GridPanel loads, I programmatically select first row and set focus on it so user can directly press enter to get into first selected row.

Now, problem is, when user press enter in Mozilla browser, it directly detect Enter key and get user in that selected case but in Chrome when I press enter, nothing happens.

But If I press tab and then enter then it get me into selected case that means focus is not set on first row though I can see first row selected.

Below is the code I used to select and set focus.



gridObj.getSelectionModel().selectFirstRow();
gridObj.getView().focusEl.focus();
gridObj.fireEvent('cellclick', this, 0);Hope, I could clearly explain my problem.

Waiting for reply. Thanks in Advance

LivingLegends

Condor
8 Sep 2010, 1:13 AM
Shouldn't that be:

gridObj.getSelectionModel().selectFirstRow();
gridObj.getView().focusRow(0);

livinglegends
8 Sep 2010, 1:20 AM
I have tried this also but no luck.

Even Up and down arrow key is also not working in Chrome

I found the exact reason which is Chrome browser doesn't detect escape key, left, right, up, down arrow key (using keypress event) in GridPanel.

When I press a to z or any digit then it detect it.

livinglegends
8 Sep 2010, 2:55 AM
Hi Condor,

waiting for your reply

Condor
8 Sep 2010, 2:58 AM
Maybe Chrome needs a longer delay before it is able to focus the focusEl.

Try:

var focusEl = gridObj.getView().focusEl;
focusEl.focus.defer(10, focusEl);

livinglegends
8 Sep 2010, 3:03 AM
I have tried this also without luck.

I have put keypress event on GridPanel and captured enter key event on it.

I have put alert in this to print key value. When I press all arrows key, escape key and enter key, it doesn't show me alert but if I press alpha or digit keys, it shows alert.

It means, Chrome doesn't detect all arrows key and enter key on keypress event of GridPanel.

This could be problem

Condor
8 Sep 2010, 3:15 AM
Key handling is very tricky accross browsers. Some browsers only fire keydown events for certain keys and other browsers only keypress events for certain keys. And some keycodes are also different in various browsers.

I suggest registering an Ext.KeyMap for the grid.getGridEl(). KeyMap will use the correct event handler for the current browser and convert some keycodes to be cross-browser compatible.

livinglegends
8 Sep 2010, 3:37 AM
Key handling is very tricky accross browsers. Some browsers only fire keydown events for certain keys and other browsers only keypress events for certain keys. And some keycodes are also different in various browsers.

I suggest registering an Ext.KeyMap for the grid.getGridEl(). KeyMap will use the correct event handler for the current browser and convert some keycodes to be cross-browser compatible.


Can you give some code hint for KeyMap. I mean how to use keymap with gridpanel.

Condor
8 Sep 2010, 3:41 AM
Sorry, I meant KeyNav and not KeyMap.

grid.on('render', function(g){
new KeyNav(g.getGridEl(), {
enter: function(e){
alert('Enter pressed');
},
scope: g
});
});

livinglegends
8 Sep 2010, 5:31 AM
Thanks a lot condor. It works fine now on Chrome but getting problem in IE.

Now, up and down key in not properly behaving in IE.

There are 4 rows in my Grid panel say R1 to R4. When GridPanel load, default first row will be selected and there is one label in which I display Row 1 as first row is selected.

Now, when I press down key, it moves to Row 2 but label remains Row 1. When I move to Row 3, label change to Row 2. When I move to Row 4, label change to Row 3 and so on. Same is happening for up key.

So, what can be problem with IE?

I think, in IE, it first get selected row and then move to next row. So, it gets value of existing selected row and then move to next row so value mismatch.

Condor
8 Sep 2010, 5:35 AM
Which event are you using to update the label?

livinglegends
8 Sep 2010, 5:38 AM
Below code I am using where labelId is the id of xtype: 'label'


document.getElementById('labelId').innerHTML = json.caseName;

Condor
8 Sep 2010, 5:47 AM
No, I asked on which event you are calling this code.

livinglegends
8 Sep 2010, 5:51 AM
Below is full code.


grid.on('render', function(g){
new Ext.KeyNav(g.getGridEl(), {
enter: function(e){
document.getElementById('home').submit();
},
down: function(e){
this.moveUpDown();
},
up: function(e){
this.moveUpDown();
},
scope: g
});
});

moveUpDown is method where I have written code to update label

Condor
8 Sep 2010, 5:52 AM
You don't need to write code for up and down. The RowSelectionModel already takes care of that.

livinglegends
8 Sep 2010, 5:54 AM
No... Its not working if remove down and up event.

Somewhere I need to write code to update lable. So without this events, how can it recognize row changed.

Condor
8 Sep 2010, 6:00 AM
Maybe this KeyNav conflicts with the existing KeyNav from the RowSelectionModel.

Try:

grid.on('render', function(g){
g.getSelectionModel().rowNav.enter = function(e){
document.getElementById('home').submit();
}
});

livinglegends
8 Sep 2010, 6:06 AM
I have tried above code for enter as well as up and down key as shown below.


this.on('render', function(g){

this.getSelectionModel().rowNav.enter = function(e){
document.getElementById('home').submit();
};
g.getSelectionModel().rowNav.down = function(e){
this.moveUpDown();
};
g.getSelectionModel().rowNav.up = function(e){
this.moveUpDown();
};
});

But only enter works. Up and down not works even it is not selecting next row also.

Condor
8 Sep 2010, 6:13 AM
No! Not up and down! The selectionmodel already has code for up and down!

livinglegends
8 Sep 2010, 6:17 AM
No! Not up and down! The selectionmodel already has code for up and down!

But Condor tell me... where should I write code to change my label according to selection of row?

livinglegends
8 Sep 2010, 6:50 AM
But Condor tell me... where should I write code to change my label according to selection of row?

Waiting for your reply

Condor
8 Sep 2010, 8:33 AM
I would use the selectionmodel selectionchange event.

livinglegends
8 Sep 2010, 10:18 PM
I would use the selectionmodel selectionchange event.

Can you give the code hint of how to you selectionchange event of selectionmodel?

livinglegends
8 Sep 2010, 10:41 PM
Hi condor,

Thanks a ton buddy for your help and time. I have user rowselect event of SelectionModel and problem get resolved and now it works like charm in all browser.

Thanks again.

Condor
9 Sep 2010, 12:11 AM
Be warned: The rowselect event also fires when the store is reloaded or the selected record is updated.

livinglegends
9 Sep 2010, 12:17 AM
I have written following code in rowselect event and it works fine.


this.on('render', function(g) {
this.getSelectionModel().on({
rowselect: function (selModel, rowIndex, r) {
var json = this.getSelectionModel().getSelected().json;
document.getElementById('selectedCaseDisplay').innerHTML = json.caseName;
document.getElementById('selectedCaseId').value = json.caseId;
},
scope: g
});
});But if I write same code in selectionchange event, it throws below error.

this.getSelectionModel().getSelected() is undefined

Thats why I have used rowselect event. So, how to resolve it?

Condor
9 Sep 2010, 12:29 AM
You don't need to set the rowselect event inside the render event, you can simply specify a new selection model, e.g.

var grid = new Ext.grid.GridPanel({
...
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(selModel, rowIndex, r) {
Ext.getDom('selectedCaseDisplay').innerHTML = r.json.caseName;
Ext.getDom('selectedCaseId').value = r.json.caseId;
}
}
}),
...
});

livinglegends
9 Sep 2010, 1:01 AM
You don't need to set the rowselect event inside the render event, you can simply specify a new selection model, e.g.

var grid = new Ext.grid.GridPanel({
...
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(selModel, rowIndex, r) {
Ext.getDom('selectedCaseDisplay').innerHTML = r.json.caseName;
Ext.getDom('selectedCaseId').value = r.json.caseId;
}
}
}),
...
});

Ok...
But you are preferring selectionchange event instead of rowselect. So, how to use it?
because in selectionchange event, r is not available.

Condor
9 Sep 2010, 1:09 AM
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
selectionchange: function(selModel) {
var r = selModel.getSelected();
Ext.getDom('selectedCaseDisplay').innerHTML = r ? r.json.caseName : '';
Ext.getDom('selectedCaseId').value = r ? r.json.caseId : '';
}
}
}),

livinglegends
9 Sep 2010, 1:16 AM
Thanks again condor.

Now, I am using selectionchange instead of rowselect and it works fine in all browser.

Thanks Condor.

brunner
4 Jan 2011, 2:41 PM
Hi, I have this problem, when I try to move between rows using up and down keys, this has no effect on google chrome. On Ie and Mozilla it works fine.

Can someone tell me if there is a patch for this problem?

thanks!