Jan 12, 2015, 10:54 AM
[CLOSED] SelectBox selectFirst() difference between 1/2.x and 3.x
Hi,
I noticed a subtle change in the selectFirst() method for the SelectBox control in 3.x compared to earlier versions that I was relying on:
Example:
1) Click the button to select the first item programmatically.
2) Notice that the console.log is reached for the select handler and the arguments are written to the console
B) Run the same code in 3.x
Notice that the select event is not fired.
Looking at the selectFirst implementation I see select calls focusAndSelect():
In many ways, I think this makes sense.
I was originally writing this post to say I need to support a scenario where I need this select event to fire but I realized I can remove the selecteditem configuration in my particular scenario.
However, as it is not listed as a breaking change, I wanted to still post to ensure it is intended different behaviour and also provide a couple of alternatives for anyone who needs it:
1) Ext.NET team could add an optional boolean parameter to selectFirst(), and to focusAndSelect(). This optional parameter indicates whether to fire the select event, so something like this (not tested)
2) Programmatically fire the select event myself:
I actually went for option 3) in my real production code while migrating from 1.x to 3.x while typing up this thread question, realising that in my particular case I do not need both SelectedItem from the start and the select event to fire for selectFirst.
So, for the Ext.NET team, do you think suggestion 1) is worth doing? I am not convinced myself (as in some ways what I was trying seems illogical - to pre-select that item and still to have the select event fired), so I leave it to you to decide. For everyone else, hope option 2) or 3) is useful if option 1) is decided as not needed.
Thanks!
I noticed a subtle change in the selectFirst() method for the SelectBox control in 3.x compared to earlier versions that I was relying on:
Example:
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Select First Programmatically</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:SelectBox runat="server" ID="SelectBox1">
<Items>
<ext:ListItem Text="1" />
<ext:ListItem Text="2" />
<ext:ListItem Text="3" />
<ext:ListItem Text="4" />
<ext:ListItem Text="5" />
</Items>
<SelectedItem Text="1" />
<Listeners>
<Select Handler="console.log(arguments);" />
</Listeners>
</ext:SelectBox>
<ext:Button runat="server" Text="Select First">
<Listeners>
<Click Handler="App.SelectBox1.selectFirst();" />
</Listeners>
</ext:Button>
</body>
</html>1) Click the button to select the first item programmatically.
2) Notice that the console.log is reached for the select handler and the arguments are written to the console
B) Run the same code in 3.x
Notice that the select event is not fired.
Looking at the selectFirst implementation I see select calls focusAndSelect():
focusAndSelect: function (record) {
var picker = this.getPicker();
record = Ext.isNumber(record) ? this.store.getAt(record) : record;
this.ignoreSelection++;
picker.clearHighlight();
picker.select(record);
picker.getNavigationModel().setPosition(record);
this.ignoreSelection--;
if (this.getValue() !== record.data[this.valueField]) {
this.setValue([record], false);
this.fireEvent('select', this, [record]);
}
this.inputEl.focus();
},In many ways, I think this makes sense.
I was originally writing this post to say I need to support a scenario where I need this select event to fire but I realized I can remove the selecteditem configuration in my particular scenario.
However, as it is not listed as a breaking change, I wanted to still post to ensure it is intended different behaviour and also provide a couple of alternatives for anyone who needs it:
1) Ext.NET team could add an optional boolean parameter to selectFirst(), and to focusAndSelect(). This optional parameter indicates whether to fire the select event, so something like this (not tested)
selectFirst : function (forceSelectEvent) {
this.focusAndSelect(this.store.data.first(), forceSelectEvent);
}, focusAndSelect: function (record, forceSelectEvent) {
var picker = this.getPicker();
record = Ext.isNumber(record) ? this.store.getAt(record) : record;
this.ignoreSelection++;
picker.clearHighlight();
picker.select(record);
picker.getNavigationModel().setPosition(record);
this.ignoreSelection--;
if (forceSelectEvent === true || this.getValue() !== record.data[this.valueField]) {
this.setValue([record], false);
this.fireEvent('select', this, [record]);
}
this.inputEl.focus();
},2) Programmatically fire the select event myself:
<ext:Button runat="server" Text="Select First">
<Listeners>
<Click Handler="
App.SelectBox1.selectFirst();
App.SelectBox1.fireEvent('select', App.SelectBox1, [App.SelectBox1.getSelectedRecord()]);
" />
</Listeners>
</ext:Button>I actually went for option 3) in my real production code while migrating from 1.x to 3.x while typing up this thread question, realising that in my particular case I do not need both SelectedItem from the start and the select event to fire for selectFirst.
So, for the Ext.NET team, do you think suggestion 1) is worth doing? I am not convinced myself (as in some ways what I was trying seems illogical - to pre-select that item and still to have the select event fired), so I leave it to you to decide. For everyone else, hope option 2) or 3) is useful if option 1) is decided as not needed.
Thanks!
Last edited by Daniil; Jan 14, 2015 at 4:33 AM.
Reason: [CLOSED]
