Coolite一个下拉列表控件无刷新的控制另外一个下拉列表控件

先说明一下，本例子实现的是控制一个WEBGIS系统地图的资源与图层的选择控制。效果如下图：



1、加入两个ComboBox控件，并设置他们的监听事件，其中Layer_ComboBox中的StoreID是指存放它数据的容器-Store控件的ID,如下所示：

<ext:ComboBox ID="Res_ComboBox" runat="server" Editable="false" TypeAhead="true" TriggerAction="All" SelectOnFocus="true" Mode="Local" ForceSelection="true" Width="150">

<Listeners> <SelectHandler="Coolite.AjaxMethods.Resource_SelectedIndexChanged();" />

</Listeners> </ext:ComboBox>

<ext:ComboBox ID="Layer_ComboBox" runat="server" DisplayField="Text" ValueField="Value" Editable="false" TypeAhead="true" TriggerAction="All" SelectOnFocus="true" Mode="Local" ForceSelection="true" StoreID="LayersStore" Width="150" >

<Listeners>

<Select Handler="Coolite.AjaxMethods.Layer_changed();" />

</Listeners>

</ext:ComboBox>

2、加入一个Store控件，用来存放Layer_ComboBox的数据，同样设置监听事件。

<ext:Store runat="server" ID="LayersStore" >

<Reader>

<ext:JsonReader ReaderID="Id">

<Fields>

<ext:RecordField Name="Value" Type="String" />

<ext:RecordField Name="Text" Type="String" />

</Fields>

</ext:JsonReader>

</Reader>

<Listeners>

<Load Handler="#{Layer_ComboBox}.setValue(#{Layer_ComboBox}

.store.getAt(0).get('Value'));" /> </Listeners>

</ext:Store>

3、 再转到后台，首先是资源列表初始化和图层列表默认值初始化，如下：

protected void initMapResource()

{

string str = String.Empty;

foreach (ESRI.ArcGIS.ADF.Web.UI.WebControls.MapResourceItem mapResourceItem in MapResourceManager1.ResourceItems)

{

if (mapResourceItem.Resource.Name != "影像图" && mapResourceItem.Resource.Name !="TempEle")

{

this.Res_ComboBox.Items.Add(new Coolite.Ext.Web.ListItem(mapResourceItem.Resource.Name,mapResourceItem.Resource.Name));

if (str == String.Empty)

str = mapResourceItem.Resource.Name;

}

}

this.Res_ComboBox.SelectedItem.Value = str;

Session["ResName"] = str;//此语句再次可屏蔽是用作矩形选择查询用的

Resource_Changed(str);

}

4、然后是获得一个资源的所有图层的实现。如下

/// <param name="resourceName">资源名</param>

private string[] GetQueryableLayerNames(string resourceName)

{

ESRI.ArcGIS.ADF.Web.DataSources.IMapFunctionality commonMapFunctionality =Map1.GetFunctionality(resourceName);

ESRI.ArcGIS.ADF.Web.DataSources.IGISResource gisResource = commonMapFunctionality.Resource;

ESRI.ArcGIS.ADF.Web.DataSources.IQueryFunctionality commonQueryFunctionality =(ESRI.ArcGIS.ADF.Web.DataSources.

IQueryFunctionality)gisResource.CreateFunctionality(Typeof

(ESRI.ArcGIS.ADF.Web.DataSources.IQueryFunctionality), null);

// Get the resource's queryable layers

string[] layerIDs = null;

string[] layerNames = null;

commonQueryFunctionality.GetQueryableLayers(null, out layerIDs, out layerNames);

return layerNames;

}

5、最后是两个ComboBox控件的选择项变化的处理（其中在此只需要Res_ComboBox的选择项变化处理就行了，Layer_ComboBox的选择项变化的处理用于矩形选择查询）

// 资源列表选择值变化处理

public void Resource_Changed(string resourceName)

{

this.Layer_ComboBox.Items.Clear();

string[] layerNames = GetQueryableLayerNames(resourceName);

DataTable dt = new DataTable();

DataColumn value = new DataColumn("Value");

dt.Columns.Add(value);

DataColumn text = new DataColumn("Text");

dt.Columns.Add(text);

for (int i = 0; i < layerNames.Length; i++)

{

DataRow row = dt.NewRow();

row["Value"] = layerNames[i];

row["Text"] = layerNames[i];

dt.Rows.Add(row);

}

Session["LayerName"] = dt.Rows[0][0].ToString();

this.LayersStore.DataSource = dt;

this.LayersStore.DataBind();

//将datatable绑定到store控件

}

[AjaxMethod]

public void Resource_SelectedIndexChanged()

{

if (this.Res_ComboBox.SelectedItem.Value != String.Empty)

{

Resource_Changed(this.Res_ComboBox.SelectedItem.Value);

Session["ResName"] = this.Res_ComboBox.SelectedItem.Value;

}

}

[AjaxMethod]

public void Layer_changed()

{

if (this.Layer_ComboBox.SelectedItem.Value != String.Empty)

{

Session["LayerName"] = this.Layer_ComboBox.SelectedItem.Value;

}

}

6、好了，就是这些了，自己运行下看下最后的效果吧。