Feb 04, 2010, 12:27 PM
ajax linked combobox
I just made some changes to the example given under linked ajax combobox.. i want to get the "Cities" combobox to populate without having to choose a country.. please help
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic"%>
<%@ Import Namespace="System.Xml"%>
<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script runat="server">
protected void CitiesRefresh(object sender, StoreRefreshDataEventArgs e)
{
string path = Server.MapPath("~").ToString() + @"\" + @"\Uploads\";
System.IO.DirectoryInfo m_dir = new System.IO.DirectoryInfo(path);
ArrayList alFolders = new ArrayList();
foreach (System.IO.DirectoryInfo dinfo in m_dir.GetDirectories("*.*"))
{
alFolders.Add(dinfo.Name.ToString());
}
List<object> data = new List<object>();
foreach (string fName in alFolders)
{
string id = fName;
string name = fName;
data.Add(new { Id = id, Name = name });
}
this.CitiesStore.DataSource = data;
this.CitiesStore.DataBind();
}
</script>
<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext:Store runat="server" ID="CitiesStore" AutoLoad="true" OnRefreshData="CitiesRefresh">
<AjaxEventConfig>
<EventMask ShowMask="false" />
</AjaxEventConfig>
<Reader>
<ext:JsonReader ReaderID="id">
<Fields>
<ext:RecordField Name="id" Type="String" Mapping="Id" >
<Convert Handler="" Args="value,record" FormatHandler="False"></Convert>
</ext:RecordField>
<ext:RecordField Name="name" Type="String" Mapping="Name" >
<Convert Handler="" Args="value,record" FormatHandler="False"></Convert>
</ext:RecordField>
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<Load Handler="#{Cities}.setValue(#{Cities}.store.getAt(0).get('id'));" />
</Listeners>
<SortInfo Direction="ASC"></SortInfo>
</ext:Store>
<ext:ComboBox ID="Countries" runat="server"
Editable="false"
TypeAhead="true"
Mode="Local"
ForceSelection="true"
TriggerAction="All"
Selectonfocus="true"
EmptyText="Select a country">
<Listeners>
<Select Handler="#{Cities}.clearValue(); #{CitiesStore}.reload();" />
</Listeners>
<Items>
<ext:ListItem Text="Belgium" Value="BE" />
<ext:ListItem Text="Brazil" Value="BR" />
<ext:ListItem Text="Bulgaria" Value="BG" />
<ext:ListItem Text="Canada" Value="CA" />
<ext:ListItem Text="Chile" Value="CL" />
<ext:ListItem Text="Cyprus" Value="CY" />
<ext:ListItem Text="Finland" Value="FI" />
<ext:ListItem Text="France" Value="FR" />
<ext:ListItem Text="Germany" Value="DE" />
<ext:ListItem Text="Hungary" Value="HU" />
<ext:ListItem Text="Ireland" Value="IE" />
<ext:ListItem Text="Israel" Value="IL" />
<ext:ListItem Text="Italy" Value="IT" />
<ext:ListItem Text="Lithuania" Value="LT" />
<ext:ListItem Text="Mexico" Value="MX" />
<ext:ListItem Text="Netherlands" Value="NL" />
<ext:ListItem Text="New Zealand" Value="NZ" />
<ext:ListItem Text="Norway" Value="NO" />
<ext:ListItem Text="Pakistan" Value="PK" />
<ext:ListItem Text="Poland" Value="PL" />
<ext:ListItem Text="Romania" Value="RO" />
<ext:ListItem Text="Slovakia" Value="SK" />
<ext:ListItem Text="Slovenia" Value="SI" />
<ext:ListItem Text="Spain" Value="ES" />
<ext:ListItem Text="Sweden" Value="SE" />
<ext:ListItem Text="Switzerland" Value="CH" />
<ext:ListItem Text="United Kingdom" Value="GB" />
</Items>
</ext:ComboBox>
<ext:ComboBox ID="Cities" runat="server"
StoreID="CitiesStore"
TypeAhead="true"
Mode="Local"
ForceSelection="true"
TriggerAction="All"
DisplayField="name"
ValueField="id"
EmptyText="Loading..."
ValueNotFoundText="Loading...">
</ext:ComboBox>
</form>
</body>
</html>
