Coolite 中的ComboBox控件示例,这里写出几个常用方法:
一、基本用法:
<ext:ComboBox ID="cboSelectCol" runat="server" AllowBlank="false" Editable="false"
FieldLabel="检索条件" EmptyText="请选择检索条件" >
<Items>
<ext:ListItem Text="按标题检索" Value="Title" />
<ext:ListItem Text="按编码检索" Value="Coding" />
<ext:ListItem Text="按关键字检索" Value="Keyword" />
<ext:ListItem Text="按描述检索" Value="Describe" />
<ext:ListItem Text="按全文检索" Value="Body" />
<ext:ListItem Text="按作者检索" Value="Author" />
</Items>
</ext:ComboBox>
说明:
1.AllowBlank 是否允许空白,可用于表单验证。
2.Editable 是否可编辑,为false是只可选择。
3.FieldLabel 控件显示标签的文本。
4.EmptyText 下拉菜单初始为空时显示的文本。
5.Items 下拉菜单中的项目集合。
6.Text 项目显示的文本。
7.Value 项目的值,不显示。
二、动态数据绑定:
<ext:Store ID="Store1" runat="server" AutoLoad="false" >
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="id" />
<ext:RecordField Name="name" />
</Fields>
</ext:JsonReader>
</Reader>
<ext:ComboBox ID="cboSortNode" runat="server"
DisplayField="name" ValueField="id" StoreID="Store1" />
后台代码:
this.Store1.DataSource = DataTable1;//DataTable绑定,DataTable中应有 id , name 两列。
this.Store1.DataBind();
说明:
1.DisplayField 绑定的项目文本
2.ValueField 绑定的项目值
3.StoreID 数据据源Store控件ID
三、后台取值:
this.ComboBox1.SelectedItem.Text //选中项的文本
this.ComboBox1.SelectedItem.Value //选中项的值
四、赋值:
前台
<Listeners>
<Click Handler="#{cboSortNode}.setValue('6');" />
</Listeners>
后台
this.cboSortNode.SelectedItem.Value = "3";
说明:"3"为绑定值中已有的数据,如果设置的值绑定数据中没有则显示设置的值,且Value和Text均为设置的值。
五、事件:
事件用法与Coolite标准用法基本相同这里不多赘述,可详见Coolite事件详解这篇文章,这里仅列出几个特殊事件。
AjaxEvent,选择后触发。
<AjaxEvents>
<Select OnEvent="cboRoleName_Change">
<EventMask ShowMask="true" Msg="正在读取中,请稍后..." MinDelay="200" />
</Select>
</AjaxEvents>