Sep 26, 2014, 11:53 PM
[CLOSED] Combobox selection issue
Hello:
This is a weird one. I am using Ext.Net 2.5.2.
To reproduce use the code below which represents a modified version of the page for this sample: https://examples2.ext.net/#/Form/Com...Custom_Search/. The page file is is Ext.Net.Examples\Examples\Form\ComboBox\Custom_Sea rch\Default.aspx.
Here are the steps:
1. Run the modified example and type Bloodroot in the top combobox (the one defined using html markup). Select it from the list by clicking on it. An alert message should pop up. Click ok.
2. Without touching anything else, click on the search button (the one with the magnifier). The combobox should return one row. Click on that row. This time the select event is not fired and the alert message box is not displayed. That's the problem.
Now, to make things more interesting do this:
3. Remove the IDProperty from the Model of the combobox defined with html markup and save the page.
4. Refresh the page in the browser. Repeat steps 1 & 2. The alert message box is displayed twice. It is displayed at step 2 as well.
It seems that having an IDProperty affects the behavior of the selection model. When the IDProperty is not added ExtJs generates a surrogate internal id for each row with the pattern ext-record-<unique-number>. Each server request will assign a new row unique identifier even though the selected row is essentially the same but in a way it isn't because it doesn't have the same unique identifier across server requests.
In 4.2.1 it seems that they restore the selections after each server request. When the IDProperty is specified, the row is uniquely identified and found. When the IDProperty is not specified, the surrogate keys are not the same between server requests and the selection is not restored.
I believe this issue is linked the issue I reported a little while ago: http://forums.ext.net/showthread.php...-circumstances. It's the same underlying problem.
Personally I find it scary that they changed this between 4.1.1 and 4.2.1. You could argue about which approach is better. In the combobox case I definitely want to be notified whenever the user clicks to select an item even though theoretically the selection it didn't change. This is because the user could have made other changes on the same form and perhaps they want revert to the original data. I use comboboxes for searching and I depend on the component to notify me on an item has been selected in the combobox.
Any thoughts? I am going to continue looking into it to find a generic solution that clears the selection before the server request is made and this would be applied for all comboboxes in my app.
This is a weird one. I am using Ext.Net 2.5.2.
To reproduce use the code below which represents a modified version of the page for this sample: https://examples2.ext.net/#/Form/Com...Custom_Search/. The page file is is Ext.Net.Examples\Examples\Form\ComboBox\Custom_Sea rch\Default.aspx.
Here are the steps:
1. Run the modified example and type Bloodroot in the top combobox (the one defined using html markup). Select it from the list by clicking on it. An alert message should pop up. Click ok.
2. Without touching anything else, click on the search button (the one with the magnifier). The combobox should return one row. Click on that row. This time the select event is not fired and the alert message box is not displayed. That's the problem.
Now, to make things more interesting do this:
3. Remove the IDProperty from the Model of the combobox defined with html markup and save the page.
4. Refresh the page in the browser. Repeat steps 1 & 2. The alert message box is displayed twice. It is displayed at step 2 as well.
It seems that having an IDProperty affects the behavior of the selection model. When the IDProperty is not added ExtJs generates a surrogate internal id for each row with the pattern ext-record-<unique-number>. Each server request will assign a new row unique identifier even though the selected row is essentially the same but in a way it isn't because it doesn't have the same unique identifier across server requests.
In 4.2.1 it seems that they restore the selections after each server request. When the IDProperty is specified, the row is uniquely identified and found. When the IDProperty is not specified, the surrogate keys are not the same between server requests and the selection is not restored.
I believe this issue is linked the issue I reported a little while ago: http://forums.ext.net/showthread.php...-circumstances. It's the same underlying problem.
Personally I find it scary that they changed this between 4.1.1 and 4.2.1. You could argue about which approach is better. In the combobox case I definitely want to be notified whenever the user clicks to select an item even though theoretically the selection it didn't change. This is because the user could have made other changes on the same form and perhaps they want revert to the original data. I use comboboxes for searching and I depend on the component to notify me on an item has been selected in the combobox.
Any thoughts? I am going to continue looking into it to find a generic solution that clears the selection before the server request is made and this would be applied for all comboboxes in my app.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
// Create Reader
JsonReader reader = new JsonReader
{
Root = "plants",
TotalProperty = "total"
};
// Create Proxy
AjaxProxy proxy = new AjaxProxy
{
Url = "Plants.ashx",
Reader = { reader },
ActionMethods =
{
Read = HttpMethod.POST
}
};
Model model = new Model()
{
Fields = {
new ModelField("Common"),
new ModelField("Botanical"),
new ModelField("Light"),
new ModelField("Price", ModelFieldType.Float),
new ModelField("Indoor", ModelFieldType.Boolean)
}
};
// Add Proxy and Reader to Store
Store store = new Store {
Proxy = { proxy },
Model = { model },
AutoLoad = false
};
// Create ComboBox
ComboBox combobox = new ComboBox
{
DisplayField = "Common",
ValueField = "Common",
TypeAhead = false,
Width = 570,
PageSize = 10,
HideBaseTrigger = true,
ListConfig = new BoundList
{
LoadingText = "Searching..."
},
MinChars = 0,
TriggerAction = Ext.Net.TriggerAction.Query,
Store = { store }
};
combobox.ListConfig = new BoundList
{
ItemTpl = new XTemplate {
Html = @"
<div class=""search-item"">
<h3><span>${Price}</span>{Common}</h3>
{Botanical}
</div>"
}
};
// Add ComboBox to Controls Collection
this.Placeholder1.Controls.Add(combobox);
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>ComboBox with Templates and AJAX - Ext.NET Examples</title>
<style>
.search-item {
font : normal 11px tahoma, arial, helvetica, sans-serif;
padding : 3px 10px 3px 10px;
border : 1px solid #fff;
border-bottom : 1px solid #eeeeee;
white-space : normal;
color : #555;
}
.search-item h3 {
display : block;
font : inherit;
font-weight : bold;
color : #222;
margin :0px;
}
.search-item h3 span {
float : right;
font-weight : normal;
margin : 0 0 5px 5px;
width : 100px;
display : block;
clear : none;
}
p { width: 650px; }
.ext-ie .x-form-text { position : static !important; }
</style>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" ScriptMode="Development" SourceFormatting="True"/>
<h1>ComboBox with Templates and AJAX - 2.5.2</h1>
<p>This is a more advanced example demonstrating how to combine Store Paging and a Template to create "live search" functionality.</p>
<div style="width:600px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<h3 style="margin-bottom:5px;">Search the plants</h3>
<ext:ComboBox
runat="server"
DisplayField="Common"
ValueField="Botanical"
TypeAhead="false"
Width="570"
PageSize="10"
HideBaseTrigger="false"
MinChars="3"
TriggerAction="Query"
QueryCaching="False"
TriggerIcon="Search"
QueryMode="Remote"
MatchFieldWidth="False"
SelectOnFocus="True"
>
<Triggers>
<ext:FieldTrigger Icon="Clear" Qtip="Remove selected" />
</Triggers>
<ListConfig LoadingText="Searching..." Width="500" Cls="x-combo-list-small" ItemSelector="div.search-item">
<ItemTpl runat="server">
<Html>
<div class="search-item">
<h3><span>${Price}</span>{Common}</h3>
{Botanical}
</div>
</Html>
</ItemTpl>
</ListConfig>
<Store>
<ext:Store runat="server" AutoLoad="false">
<Proxy>
<ext:AjaxProxy Url="Plants.ashx">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader Root="plants" TotalProperty="total" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server" IDProperty="Botanical">
<Fields>
<ext:ModelField Name="Common" />
<ext:ModelField Name="Botanical" />
<ext:ModelField Name="Light" />
<ext:ModelField Name="Price" Type="Float" />
<ext:ModelField Name="Indoor" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<Select Handler="alert('Item selected');"></Select>
</Listeners>
</ext:ComboBox>
<div style="padding-top:4px;">
Plants search (type '*' (asterisk) for showing all)
</div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
<br />
<br />
<br />
<div style="width:600px;">
<div class="x-box-tl">
<div class="x-box-tr">
<div class="x-box-tc"></div>
</div>
</div>
<div class="x-box-ml">
<div class="x-box-mr">
<div class="x-box-mc">
<h3 style="margin-bottom:5px;">Search the plants (controls dynamically created)</h3>
<asp:PlaceHolder ID="Placeholder1" runat="server" />
<div style="padding-top:4px;">
Plants search (type '*' (asterisk) for showing all)
</div>
</div>
</div>
</div>
<div class="x-box-bl">
<div class="x-box-br">
<div class="x-box-bc"></div>
</div>
</div>
</div>
</form>
</body>
</html>
Last edited by Daniil; Oct 03, 2014 at 1:41 PM.
Reason: [CLOSED]
