PDA

View Full Version : Combo/Grid problem



ExtMore
24 Aug 2009, 7:40 AM
Hi,

I am having problems with a ComboBox grid editor. I need to use the valueField/displayField properties, and I have a renderer setup as per API documentation.

The problem is that sometimes when tabbing into the ComboBox editor, the valueField is displayed instead of the displayField.

Below is a complete example. To recreate the problem, run the example in IE, since other browsers have grid keyboard navigation issues.

Click once in the 'Text' column of the first row. Then tab on to the 'Color' column. It shows the value 'Red' correctly. Hit 'G' to complete 'Green', and then hit tab 2 times to move to the 'Color' column in the next row. It will now display '3' instead of the expected value 'Blue'.

So, is this a bug, or am I doing something wrong here?

TIA :)



<html>
<head>
<title>Combo/Grid problem</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.0.0/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.0.0/ext-all-debug.js"></script>
</head>
<body>
<script type="text/javascript">

var comboStore = new Ext.data.ArrayStore({
fields: [{name:'id', type: 'int'}, {name: 'color', type: 'string'}],
data: [[1, 'Red'], [2, 'Green'], [3, 'Blue'], [4, 'Yellow']]
});

var gridStore = new Ext.data.ArrayStore({
fields: [{name: 'text', type: 'string'}, {name: 'color', type: 'int'}],
data: [['ASDFSF', 1],['QWERTY', 3],['ZXCVBN', 2]]
});

var colorCombo = new Ext.form.ComboBox({
store: comboStore,
mode: 'local',
typeAhead: true,
selectOnFocus:true,
valueField: 'id',
displayField: 'color'
});

Ext.util.Format.comboRenderer = function(combo){
return function(value){
var cbo = combo;
var record = cbo.findRecord(cbo.valueField, value);
var res = (record ? record.get(cbo.displayField) : "hmm, not found:" + value)
return res;
}
}

Ext.onReady(function() {
new Ext.Viewport({
layout: "fit",
items: [
{
xtype: "editorgrid", store: gridStore, clicksToEdit: 1,
columns: [
{
header: 'Text', dataIndex: 'text',
editor: {xtype: 'textfield', selectOnFocus: true}
},
{
header: 'Color', dataIndex: 'color',
editor: colorCombo,
renderer: Ext.util.Format.comboRenderer(colorCombo)
}
]
}
]
});
});
</script>
</body>
</html>

ExtMore
25 Aug 2009, 5:59 AM
[...]To recreate the problem, run the example in IE, since other browsers have grid keyboard navigation issues. [...]


Note that the problem can also be recreated in other browsers, such as FireFox. You just need to make a small addition to the recipe given above, to overcome a grid keyboard navigation bug. Here's the steps for FireFox, Safari etc.:

Click once in the 'Text' column of the first row. Then tab on to the 'Color' column. It shows the value 'Red' correctly. Hit 'G' to complete 'Green' and hit ENTER, and then hit tab 2 times to move to the 'Color' column in the next row. It will now display '3' instead of the expected value 'Blue'.

I hope someone will look over my code to see if I am doing anything wrong. If the code is OK, then I will submit a proper bug report.

Thanks.

jarlau
25 Aug 2009, 6:12 AM
add triggerAction: 'all' can do the trick.

ExtMore
25 Aug 2009, 7:15 AM
add triggerAction: 'all' can do the trick.

I tried that, and it changes nothing?

I read about triggerAction in the API. The description is a bit terse for a newbie, but as far as I can tell it deals with how the data for the combo is queried.

But thanks for the suggestion anyway. :)

ExtMore
26 Aug 2009, 11:35 AM
Here's a new observation: If I select the value 'Green' in the first row with the mouse and then tab on to the 'Color' column of the next row, the combo editor in row 2 shows the correct value?!

So the problem seems to be related to pure keyboard navigation. I think it's time to submit a bug report. Even if I made some mistake/omission in my example code, then it should behave consistently, whether using keyboard or mouse to select from the combo.

I would still really appreciate a verdict from an experienced Ext'er, saying I have a bug in my code -- or that it is correct..

Thanks!

ExtMore
27 Aug 2009, 3:26 AM
For those interested:

I have now submitted a bug report (http://extjs.com/forum/showthread.php?p=379607) against 3.x for this.

It turns out that this issue was already raised for Ext 2.1 (http://extjs.com/forum/showthread.php?t=39546), and it is apparently still open, both in 2.x and 3.x.