Coolite中的ComboBox控件示例

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>

 

 

你可能感兴趣的:(combobox)