PDA

View Full Version : [FIXED] [V0.7.0] ComboBox Bug



Timothy
Oct 10, 2008, 1:57 PM
Hello,

If you run the below example, you will notice a minor error in the SelectedIndex property.

Example.aspx:


<%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = String.Format("{0} is index: {1}", ComboBox2.SelectedItem.Text, ComboBox2.SelectedIndex);
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Example</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" />
<ext:ScriptManager ID="ScriptManager2" runat="server" ScriptMode="Debug" />
<ext:ComboBox ID="ComboBox1"
runat="server"
EmptyText="----"
Width="255">
<Items>
<ext:ListItem Text="Canada" Value="CA" />
<ext:ListItem Text="United States" Value="USA" />
</Items>
<Listeners>
<Select Handler="#{ComboBox2}.clearValue();" />
</Listeners>
</ext:ComboBox>
<ext:ComboBox ID="ComboBox2"
runat="server"
EmptyText="----"
Width="255">
<Items>
<ext:ListItem Text="Ontario" Value="ON" />
<ext:ListItem Text="Quebec" Value="QC" />
</Items>
</ext:ComboBox>
<ext:Button ID="Button1" runat="server" AutoPostBack="True" &#111;nclick="Button1_Click" Text="Submit">
<Listeners>
<Click Handler="#{ComboBox2}.setValue('QC');" />
</Listeners>
</ext:Button>
<ext:Label ID="Label1" runat="server" Text="Waiting ..." />
</form>
</body>
</html>


Replication steps:

1. Load page
2. Select 'Canada' from ComboBox1
3. Select 'Ontario' from ComboBox2
4. Click 'Submit', notice it changed to 'Quebec' on ComboBox2? (on purpose)
5. Notice the result says index = 0 (Ontario) when Quebec is selected (wrong)

Cheers,
Timothy

Vladimir
Oct 10, 2008, 2:13 PM
Hi Timothy,

Please note that setValue function of ComboBox doesn't fire Select event, so the hidden field for index doesn't updated.
If you replace #{ComboBox2}.setValue('QC');

By
#{ComboBox2}.setValueEx('QC');

then this example should works properly (setValueEx firing Select event)

Timothy
Oct 10, 2008, 2:49 PM
Why not make the .setValue function run the select ? What possible scenario would someone want to set the value of the ComboBox without selecting if it's in local mode?

Cheers,
Timothy

Vladimir
Oct 10, 2008, 2:56 PM
It is original ExtJS behaviour. Especially for such cases we added setValueEx. May be there is a reason why ExtJS Team did so, not otherwise

We can override setValue code but it can get unexpected result (may be)

Timothy
Oct 10, 2008, 3:00 PM
Thanks vlad, I appreciate that you guys put the extra throught into developing the setValueEx() function, it is useful indeed.

Would be great if it could override the default function, would be one less thing for developers to think about.

Thanks for your solution to the original question, and your response times (like always)

Cheers,
Timothy

Timothy
Oct 10, 2008, 3:18 PM
#{ComboBox2}.setValueEx('QC')

The following example demonstrates that the selectedIndex is not updated after setValueEx()

Example.aspx:


<%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = String.Format("{0} is index: {1}", ComboBox2.SelectedItem.Text, ComboBox2.SelectedIndex);
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Example</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" />
<ext:ScriptManager ID="ScriptManager2" runat="server" ScriptMode="Debug" />
<ext:ComboBox ID="ComboBox1"
runat="server"
EmptyText="----"
Width="255">
<Items>
<ext:ListItem Text="Canada" Value="CA" />
<ext:ListItem Text="United States" Value="USA" />
</Items>
<Listeners>
<Select Handler="#{ComboBox2}.clearValue();" />
</Listeners>
</ext:ComboBox>
<ext:ComboBox ID="ComboBox2"
runat="server"
EmptyText="----"
Width="255">
<Items>
<ext:ListItem Text="Ontario" Value="ON" />
<ext:ListItem Text="Quebec" Value="QC" />
</Items>
</ext:ComboBox>
<ext:Button ID="Button2" runat="server" Text="Change to Quebec">
<Listeners>
<Click Handler="#{ComboBox2}.setValueEx('QC');" />
</Listeners>
</ext:Button>
<ext:Button ID="Button1" runat="server" AutoPostBack="True" &#111;nclick="Button1_Click" Text="Submit">
<Listeners>
<Click Handler="alert(#{ComboBox2}.selectedIndex);" />
</Listeners>
</ext:Button>
<ext:Label ID="Label1" runat="server" Text="Waiting ..." />
</form>
</body>
</html>


Replication steps:

1. Load page
2. Select 'Canada' from ComboBox1
3. Click 'Change to Quebec'
4. Click 'Submit' - notice the alert says -1 which should read 1

Cheers,
Timothy

Vladimir
Oct 10, 2008, 3:43 PM
The selectedIndex is private variable of ComboBox class (this variable updated only when you use select function). You should not use this variable directly.

If you need to get selected index of combo then you can use next code


var r = combo.findRecord(combo.valueField, combo.getValue());
var index = combo.store.indexOf(r);

Timothy
Oct 10, 2008, 3:44 PM
Vlad, you just said that the .setValueEx() fires the select function? I'm confused now.

Cheers,
Timothy

Vladimir
Oct 10, 2008, 3:52 PM
Yes, it fires the Select event but I didn't say that it updates private selectedIndex variable (the standart setValue doesn't update this field also). We must forget about selectedIndex variable, it used internally by Combobox JavaScript class only. The js ComboBox class doesn't allow to using this variable (by logic because the javascript don't have ability to forbidden access to some functions or variables like high-level languages with private, public and etc access modifiers)

geoffrey.mcgill
Oct 10, 2008, 4:13 PM
Hi Timothy,

I need some time to review this thread. As mentioned in a previous thread, I'm not really happy with the current functionality of the <ext:ComboBox>, so we're going to be making some changes.

Timothy
Oct 10, 2008, 4:15 PM
Here is another example.

Example.aspx:


<%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = String.Format("{0} is index: {1}", ComboBox2.SelectedItem.Text, ComboBox2.SelectedIndex);
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Example</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" />
<ext:ScriptManager ID="ScriptManager2" runat="server" ScriptMode="Debug" />
<ext:ComboBox ID="ComboBox1"
runat="server"
EmptyText="----"
FireSelect&#111;nload="True"
Width="255">
<Items>
<ext:ListItem Text="Create new Country..." Value="" />
<ext:ListItem Text="Canada" Value="CA" />
<ext:ListItem Text="United States" Value="USA" />
</Items>
<Listeners>
<Select Handler="#{ComboBox2}.clearValue();" />
</Listeners>
</ext:ComboBox>
<ext:ComboBox ID="ComboBox2"
runat="server"
EmptyText="----"
FireSelect&#111;nload="True"
Width="255">
<Items>
<ext:ListItem Text="Create new Province ..." Value="" />
<ext:ListItem Text="Ontario" Value="ON" />
<ext:ListItem Text="Quebec" Value="QC" />
</Items>
<Listeners>
<Select Handler="#{ComboBox3}.clearValue();" />
</Listeners>
</ext:ComboBox>
<ext:ComboBox ID="ComboBox3"
runat="server"
EmptyText="-----"
FireSelect&#111;nload="True"
Width="255">
<Items>
<ext:ListItem Text="Create new City ..." Value="" />
<ext:ListItem Text="Ottawa" Value="OT" />
<ext:ListItem Text="Toronto" Value="TO" />
</Items>
</ext:ComboBox>
<ext:Button ID="Button1" runat="server" AutoPostBack="True" &#111;nclick="Button1_Click" Text="Submit">
<Listeners>
<Click Handler="
alert('ComboBox1.selectedIndex=' + #{ComboBox1}.selectedIndex + ' ' + 'ComboBox2.selectedIndex=' + #{ComboBox2}.selectedIndex + ' ' + 'ComboBox3.selectedIndex=' + #{ComboBox3}.selectedIndex);
if (#{ComboBox3}.selectedIndex &amp;gt; 0) #{ComboBox3}.clearValue();
else if (#{ComboBox2}.selectedIndex &amp;gt; 0) #{ComboBox2}.clearValue();
else #{ComboBox1}.clearValue();
"/>
</Listeners>
</ext:Button>
<ext:Label ID="Label1" runat="server" Text="Waiting ..." />
</form>
</body>
</html>


Replication steps:

1. Load page
2. Select 'Canada', 'Ontario', 'Ottawa'
3. Hit 'Submit' (works)
4. Hit 'Submit' again (fails) ?

Cheers,
Timothy

Timothy
Oct 10, 2008, 4:16 PM
Geoffrey,

When are you expecting changes to the control? I've got broken things on our solution because we are using this control to use the HttpProxy in the store for a dropdown.

Please advise.

Timothy

geoffrey.mcgill
Oct 12, 2008, 10:24 PM
Hi Timothy,

We added a new client-side property/function to the <ext:ComboBox> called .getSelectedIndex().

The following code sample demonstrates your last example but using .getSelectedIndex().

Example


<%@ Page Language="C#" %>


<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = String.Format("{0} is index: {1}", ComboBox2.SelectedItem.Text, ComboBox2.SelectedIndex);
}
</script>


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Example</title>
</head>
<body>
<p><a href="LinkedComboBoxes.aspx">Reload</a></p>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<ext:ScriptManager ID="ScriptManager2" runat="server" ScriptMode="Debug" />

<ext:ComboBox ID="ComboBox1"
runat="server"
EmptyText="----"
FireSelect&#111;nload="True"
Width="255">
<Items>
<ext:ListItem Text="Create new Country..." Value="" />
<ext:ListItem Text="Canada" Value="CA" />
<ext:ListItem Text="United States" Value="USA" />
</Items>
<Listeners>
<Select Handler="console.log('ComboBox1_Select');#{ComboBox2}.clear Value();" />
<Change Handler="console.log('ComboBox1_Change');" />
</Listeners>
</ext:ComboBox>

<ext:ComboBox
ID="ComboBox2"
runat="server"
EmptyText="----"
FireSelect&#111;nload="True"
Width="255">
<Items>
<ext:ListItem Text="Create new Province ..." Value="" />
<ext:ListItem Text="Ontario" Value="ON" />
<ext:ListItem Text="Quebec" Value="QC" />
</Items>
<Listeners>
<Select Handler="console.log('ComboBox2_Select');#{ComboBox3}.clear Value();" />
</Listeners>
</ext:ComboBox>

<ext:ComboBox ID="ComboBox3"
runat="server"
EmptyText="-----"
FireSelect&#111;nload="True"
Width="255">
<Items>
<ext:ListItem Text="Create new City ..." Value="" />
<ext:ListItem Text="Ottawa" Value="OT" />
<ext:ListItem Text="Toronto" Value="TO" />
</Items>
<Listeners>
<Select Handler="console.log('ComboBox3_Select');" />
</Listeners>
</ext:ComboBox>

<ext:Button ID="Button1" runat="server" AutoPostBack="True" &#111;nclick="Button1_Click" Text="Submit">
<Listeners>
<Click Handler="
alert('ComboBox1.getSelectedIndex() = '
+ #{ComboBox1}.getSelectedIndex() + '\n'
+ 'ComboBox2.getSelectedIndex() = '
+ #{ComboBox2}.getSelectedIndex() + '\n'
+ 'ComboBox3.getSelectedIndex() = '
+ #{ComboBox3}.getSelectedIndex());

if (#{ComboBox3}.getSelectedIndex() &amp;gt; 0) {
#{ComboBox3}.clearValue();
} else if (#{ComboBox2}.getSelectedIndex() &amp;gt; 0) {
#{ComboBox2}.clearValue();
} else {
#{ComboBox1}.clearValue();
}"/>
</Listeners>
</ext:Button>

<ext:Label ID="Label1" runat="server" Text="Waiting ..." />
</form>
</body>
</html>

Hope this helps.

geoffrey.mcgill
Oct 12, 2008, 10:28 PM
FYI: The .setValueEx() function has been renamed to .setValueAndFireSelect().

Timothy
Oct 13, 2008, 11:48 AM
Geoffrey,

Great! I'm going to give this a go today and I'll get back to you :)

Sincerely,
Timothy Grant Vogelsang

Timothy
Oct 13, 2008, 1:09 PM
Awesome works very well Geoffrey, thanks for the effort!

Cheers,
Timothy