PDA

View Full Version : [CLOSED] ComboBox and HttpProxy



Timothy
Oct 01, 2008, 7:43 PM
Hello,

If you could run the following 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 btnSubmit_Click(object sender, EventArgs e)
{

}
</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 runat="server" EnablePartialRendering="True" />
<ext:ScriptManager runat="server" StateProvider="PostBack" />

<ext:ComboBox ID="drpCountry"
runat="server"
Width="255">
<Items>
<ext:ListItem Text="Canada" Value="1" />
<ext:ListItem Text="United Kingdom" Value="2" />
<ext:ListItem Text="United States" Value="3" />
</Items>
<Listeners>
<Select Handler="#{Provinces}.reload();" />
</Listeners>
</ext:ComboBox>
<ext:Store ID="Provinces"
runat="server"
AutoLoad="True">
<Proxy>
<ext:HttpProxy Url="Example-Province.ashx" />
</Proxy>
<Reader>
<ext:JsonReader Root="Province">
<Fields>
<ext:RecordField Name="Text" />
<ext:RecordField Name="Value" DefaultValue="" />
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:Parameter Name="CountryId" Value="#{drpCountry}.getValue()" Mode="Raw" />
</BaseParams>
<SortInfo Field="Text" Direction="ASC" />
</ext:Store>
<ExtJS:ComboBox ID="drpProvince"
runat="server"
StoreID="Provinces"
DisplayField="Text"
Editable="True"
EmptyText="----"
ForceSelection="True"
Mode="Local"
Select&#111;nfocus="True"
TriggerAction="All"
TypeAhead="True"
ValueField="Value"
Width="255">
<Listeners>
<Select Handler="#{Cities}.reload();" />
</Listeners>
</ExtJS:ComboBox>
<ext:Store ID="Cities"
runat="server"
AutoLoad="True">
<Proxy>
<ext:HttpProxy Url="Example-City.ashx" />
</Proxy>
<Reader>
<ext:JsonReader Root="City">
<Fields>
<ext:RecordField Name="Text" />
<ext:RecordField Name="Value" DefaultValue="" />
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:Parameter Name="ProvinceId" Value="#{drpProvince}.getValue()" Mode="Raw" />
</BaseParams>
<SortInfo Field="Text" Direction="ASC" />
</ext:Store>
<ExtJS:ComboBox ID="drpCity"
runat="server"
StoreID="Cities"
DisplayField="Text"
Editable="True"
EmptyText="----"
ForceSelection="True"
Mode="Local"
Select&#111;nfocus="True"
TriggerAction="All"
TypeAhead="True"
ValueField="Value"
Width="255" />

<ext:Button ID="btnSubmit" runat="server" AutoPostBack="True" &#111;nclick="btnSubmit_Click" Text="Submit" />

</form>
</body>
</html>


Example-Province.ashx:


<%@ WebHandler Language="C#" Class="Example_Handler" %>

using System;
using System.Collections.Generic;
using System.Web;
using Coolite.Ext.Web;

public class Example_Handler : IHttpHandler
{
public void ProcessRequest (HttpContext Context)
{
if (!String.IsNullOrEmpty(Context.Request["CountryId"]))
{
IList<Dictionary<string, string>> result = new List<Dictionary<string, string>>();

Dictionary<string, string> item1 = new Dictionary<string, string>();

item1.Add("Text", "Ontario");
item1.Add("Value", "ON");

Dictionary<string, string> item2 = new Dictionary<string, string>();

item2.Add("Text", "Quebec");
item2.Add("Value", "QC");

result.Add(item1);
result.Add(item2);

Context.Response.ContentType = "text/json";

Context.Response.Write(String.Format("{{ 'Province' : {0} }}", JSON.Serialize(result)));
}
}

public bool IsReusable
{
get
{
return false;
}
}
}


Example-City.ashx:


<%@ WebHandler Language="C#" Class="Example_Handler" %>

using System;
using System.Collections.Generic;
using System.Web;
using Coolite.Ext.Web;

public class Example_Handler : IHttpHandler
{
public void ProcessRequest (HttpContext Context)
{
if (!String.IsNullOrEmpty(Context.Request["ProvinceId"]))
{
IList<Dictionary<string, string>> result = new List<Dictionary<string, string>>();

Dictionary<string, string> item1 = new Dictionary<string, string>();

item1.Add("Text", "Toronto");
item1.Add("Value", "TO");

Dictionary<string, string> item2 = new Dictionary<string, string>();

item2.Add("Text", "Ottawa");
item2.Add("Value", "OT");

result.Add(item1);
result.Add(item2);

Context.Response.ContentType = "text/json";

Context.Response.Write(String.Format("{{ 'City' : {0} }}", JSON.Serialize(result)));
}
}

public bool IsReusable
{
get
{
return false;
}
}
}


Replication steps:

1. Load page
2. Select "Canada" from first ComboBox
3. Select "Ontario" from second ComboBox
4. Select "Toronto" from forth ComboBox
5. Hit submit

Notice it loaded Canada, and Ontario. How can I make it reload the Toronto?

Need help as soon as possible! :)

Cheers,
Timothy

Vladimir
Oct 01, 2008, 8:03 PM
Hi Timothy,

please add next listener to Province (second) store



<Listeners>
<Load Handler="#{Cities}.reload();" Single="true" Delay="100" />
</Listeners>


It is not ideal, not so good solution but you want a quick answer :)

Timothy
Oct 01, 2008, 8:17 PM
Very nasty indeed :)

Timothy
Oct 01, 2008, 8:17 PM
Timothy (10/1/2008)Very nasty indeed :)


Oh, is this a bug or me not using the ComboBox properly?

Vladimir
Oct 01, 2008, 8:32 PM
The reason why the value for third combo does not reloaded after postback: we use setValue for set combo value after postback. But in ExtJS the setValue does not fire Select event (Select event fired only if user manually select value).

You can ask why second combo reloaded. Because for first combo you use inline items and first combo with values on page load. The second store have AutoLoad property (after page load it auto load own values and using value in BaseParams from first combo which is with values)

Timothy
Oct 01, 2008, 8:41 PM
OK, fair enough. So this is a design problem on my behalf, can you please provide me with a proper solution to achieve the following? I would like to know how to do it the proper way :)

Cheers,
Timothy

Vladimir
Oct 01, 2008, 9:06 PM
hmmm... good question Timothy.

I think the good solution would be if setValue will be fire select event. But for it need to change js code of Ext.form.ComboBox

For example we can add bool property to Coolite combo - SelectEventOnSetValue (or other name) and if this property set then fire select event in js code in setValue function

Timothy
Oct 01, 2008, 9:09 PM
If you could add it and it wouldn't cause any trouble, I would be extremely greatful :)

Of course, I will leave that decision to you.

Timothy
Oct 01, 2008, 11:53 PM
Timothy (10/1/2008)If you could add it and it wouldn't cause any trouble, I would be extremely greatful :)

Of course, I will leave that decision to you.


You guys think this is something that can be implemented easily? I would like to use my original example in numerous places, but I don't think that original suggestion (work-around) is working properly in all scenarios :s

Cheers,
Timothy

Vladimir
Oct 02, 2008, 6:52 AM
Hi Timothy,

I'll try to implement and check this solution today/tomorrow. I let you know about results soon

Timothy
Oct 02, 2008, 8:16 AM
Thanks vlad :)

Vladimir
Oct 02, 2008, 5:19 PM
Hi Timothy,

I have added FireSelectOnLoad property for ComboBox which fire select event when the ?????is initialized predefined value

For your example I setted FireSelect&#111;nload=true for first and second combos, and set AutoLoad=false for second and third Stores (for first need AutoLoad=true, by the way now AutoLoad=true is default value)



<%@ 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 btnSubmit_Click(object sender, EventArgs e)
{

}
</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="drpCountry" runat="server" FireSelect&#111;nload="true" Width="255">
<Items>
<ext:ListItem Text="Canada" Value="1" />
<ext:ListItem Text="United Kingdom" Value="2" />
<ext:ListItem Text="United States" Value="3" />
</Items>
<Listeners>
<Select Handler="#{Provinces}.reload();" />
</Listeners>
</ext:ComboBox>
<ext:Store ID="Provinces" runat="server" AutoLoad="false">
<Proxy>
<ext:HttpProxy Url="Example-Province.ashx" />
</Proxy>
<Reader>
<ext:JsonReader Root="Province">
<Fields>
<ext:RecordField Name="Text" />
<ext:RecordField Name="Value" DefaultValue="" />
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:Parameter Name="CountryId" Value="#{drpCountry}.getValue()" Mode="Raw" />
</BaseParams>
<SortInfo Field="Text" Direction="ASC" />
</ext:Store>
<ext:ComboBox ID="drpProvince" runat="server" StoreID="Provinces" DisplayField="Text"
Editable="True" EmptyText="----" ForceSelection="True" Mode="Local" Select&#111;nfocus="True"
TriggerAction="All" TypeAhead="True" ValueField="Value" FireSelect&#111;nload="true"
Width="255">
<Listeners>
<Select Handler="#{Cities}.reload();" />
</Listeners>
</ext:ComboBox>
<ext:Store ID="Cities" runat="server" AutoLoad="false">
<Proxy>
<ext:HttpProxy Url="Example-City.ashx" />
</Proxy>
<Reader>
<ext:JsonReader Root="City">
<Fields>
<ext:RecordField Name="Text" />
<ext:RecordField Name="Value" DefaultValue="" />
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:Parameter Name="ProvinceId" Value="#{drpProvince}.getValue()" Mode="Raw" />
</BaseParams>
<SortInfo Field="Text" Direction="ASC" />
</ext:Store>
<ext:ComboBox ID="drpCity" runat="server" StoreID="Cities" DisplayField="Text" Editable="True"
EmptyText="----" ForceSelection="True" Mode="Local" Select&#111;nfocus="True" TriggerAction="All"
TypeAhead="True" ValueField="Value" Width="255" />
<ext:Button ID="btnSubmit" runat="server" AutoPostBack="True" &#111;nclick="btnSubmit_Click"
Text="Submit" />
</form>
</body>
</html>

Timothy
Oct 02, 2008, 5:27 PM
Vlad, you're proper brilliant!

Cheers,
Timothy