onSelect doesn't work properly when using Tab and enter instead of mouse click select

[akhalil]

onSelect doesn't work properly when using filtering (type a few letters and press enter) instead of mouse clicking selection!!!!!!!!!!!

Hi all,

I createad an EditorGrid, in this grid I attached a comboBox to one fo the columns,


function MyGSTSelection(combo, record, index)
{
alert("index: " + index);
}

1) This alert will show the right index if selection is made via mouse clicking BUTTTT
2) index is always 0 if selection is made via autocomplete/filtering and then pressing enter

[akhalil]

the onSelect on a ComboBox doesn't work properly if you type a few letters to autocomplete and then press enter instead of clicking on the the option that you want with the mouse,

So when using filtering to select, the index is not correct in the following function


function MyGSTSelection(combo, record, index)
{
alert("index: " + index);
}

1) When clicking with the mouse on an option - the index is good
2) if you auto complete (type of a few letters) and then press enter - the index is corrupt????

This is so frustrating - I just spent all day stuffing around with it - nothing that I could to make it work or even go oround it.

Can someone please help - thank you all.

[akhalil]

I create the combo box like this:


var card_combo = new Ext.form.ComboBox({
store: ds1,
displayField:'card_id',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a customer...',
selectOnFocus:true,
resizable:true
});

card_combo.on('select',MyGSTSelection);
cust_list_form.render('add-new-customer-form');



and this is the onSelect function ......


function MyGSTSelection(combo, record, index)
{
alert("index: " + index);
}


index is always 0 if I use autocomplete (filtering) and press enter instead of clicking on an item in the combo box ....

Thanks you all - I'd love some help on this - cheers and have a nice day.

[mystix]

[ moved duplicate thread(s) from Open Discussion. ]

please refer to 8887 before posting in Bugs. thanks.

p.s. please refrain from double triple posting too.

[Nullity]

This has been discussed a few times before, see here:

http://extjs.com/forum/showthread.php?t=5883

I also feel that this should be considered a bug, but unfortunately it is not. That thread also has a work-around.

[akhalil]

Thank you for replying Nullity - I appreciate that, but the fixes provided in your link doesn't solve my problem ....

In the onSelect, I need to be able to get the index of the selected comboBox record - I need to store this index somewhere so later on, I can use it to get the rest of the data of that record from the Store bound to the combo.

So in the onSelect I store the index in a holding column of the grid and that's fine but the index is always 0 unless you click witth the mouse to select something from the combo - if you do start typing and then press enter when your desired option is higlighted, then the index is 0.

This is a bug - I agree with you - but unfortunately the developers at EXT don't see it this way.

Thanks for trying to help anyway mate.

[akhalil]

Thanks for your reply Mystix,

Yes I tripled posted this issue - but this my first time and I didnt' know where exactly I should post it and whether all the areas a linked under the same search - I'm desperate and so I thought I'd try all of them and learn from it which one is which,

Sorry to affend you by multi-posting it -but I'm still the customer here and I need some help please.

I'm sorry that you don't see it as a bug but it is.

The ComboBox provides two ways (more than two) to select an option from it,

a) By using the mouse and clicking on an option
b) By Autocomplete and when an option is highlighted - you just press enter


in the onSelect - the index parameter is only correct when using a) - and it is incorrect (always 0) when using b).

How can this not be a bug - I respect your opinion but I'm stuck here and I need to solve this issue - so please if you can help finding a work around then I'd appreciate it.

I'm using the combo as part of a grid - so I need to store this index of the combo for a particular cell - so later I can get the rest of the data from that record represented by the index - this is the only way that I can do this - is there another way?

Thanks

[akhalil]

Hi Mystix,
I've attached a txt file containing all the code - you just have to rename it to a .htm and it'll work - you just have to place it in the examples/form directory as it includes some library files.

I've also copied and pasted all the content of the file here in this email,

As you can see, I've made a very simple version of it to make sure that the issue is isolated and there is nothing else that's affecting it.

So if you run it and then type "7405" then press enter - the index is 0 - which is wrong - it should be 2. if you on the other hand, click on the trigger and select with the mouse the same option i.e. 74053 - then the index is correct (2).

Thankyou for time and I appreciate any support.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Custom Fields</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<!-- <script type="text/javascript" src="custom_anwar.js"></script> -->

<link rel="stylesheet" type="text/css" href="../examples.css" />

<script>
function setupPage()
{
var ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-remote.php'
}),
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'post_id'
}, [
{name: 'postId', mapping: 'post_id'},
{name: 'title', mapping: 'topic_title'},
{name: 'topicId', mapping: 'topic_id'},
{name: 'author', mapping: 'author'},
{name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
{name: 'excerpt', mapping: 'post_text'}

]),

baseParams: {limit:20, forumId: 4}
});


ds.load({params:{start:0, limit:20, forumId: 4}});

var cust_list_form = new Ext.form.Form(
{
id: 'add-new-customer-form',
labelAlign: 'right',
labelWidth: 130,
buttonAlign: 'center',
errorReader: new Ext.data.XmlReader({
success: 'Success',
record: 'Error'
}, [
'id',
'msg'
])
});


var article_combo = new Ext.form.ComboBox({
store: ds,
displayField:'postId',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
resizable:true
});


article_combo.on('select', MyGSTSelection);

cust_list_form.add(article_combo);
cust_list_form.end();


cust_list_form.render('add-new-customer-form');
}



function MyGSTSelection(combo, record, index)
{
alert("index: " + index);
}


</script>
</head>

<body>
<script type="text/javascript" src="../examples.js"></script>
<div id="add-new-customer-form"></div>
</body>

<script>setupPage();</script>

</html>

[mystix]

sorry this took so long. this thread got buried amidst many others. :">

try this override


Ext.override(Ext.form.ComboBox, {
onSelect : function(record, index){
if(this.fireEvent('beforeselect', this, record, index) !== false){
this.setValue(record.data[this.valueField || this.displayField]);
this.selectedIndex = index; // set selectedIndex on keyboard selection
this.collapse();
this.fireEvent('select', this, record, index);
}
}
});


i'd suggest putting this up as a feature request in the premium forum as well (for inclusion in the official build), if it isn't in there already. ;)

[edit]
this thread i started some time back might also come in handy for you:
8737

[Animal]

I think it must be fixed in SVN. This example works for me on my Ext 2.0b2



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Custom Fields</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<!-- <script type="text/javascript" src="custom_anwar.js"></script> -->

<link rel="stylesheet" type="text/css" href="../examples.css" />

<script>
Ext.onReady(function() {
var ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-remote.php'
}),
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'post_id'
}, [
{name: 'postId', mapping: 'post_id'},
{name: 'title', mapping: 'topic_title'},
{name: 'topicId', mapping: 'topic_id'},
{name: 'author', mapping: 'author'},
{name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
{name: 'excerpt', mapping: 'post_text'}

]),

baseParams: {limit:20, forumId: 4}
});
ds.load({params:{start:0, limit:20, forumId: 4}});

var cust_list_form = new Ext.form.FormPanel(
{
renderTo: Ext.getBody(),
title: 'Test',
frame: true,
labelWidth: 130,
items: new Ext.form.ComboBox({
store: ds,
displayField:'postId',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a post...',
selectOnFocus:true,
fieldLabel: 'Select Post',
resizable:true,
listeners: {
select: function (combo, record, index) {
alert("index: " + index);
}
}
})
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../examples.js"></script>
</body>
</html>


But typing into the input area, and then pressing return always actually does select index zero - it narrows as you type, and item zero is what is present in the input area.

If you down-arrow, and press return, you get the index of the item that you arrow in to.