ZK----第七章 ZUML页面组件集之下拉列表框

下拉列表框：162
Combobox、comboitem
Combobox：是一个内嵌下拉列表的特殊文本框，可直接输入文本，还可从下拉列表中选择一项

属性：
autodrop=”true”：不用点击下拉按钮或按快捷键，在文本框中输入任何字符，下拉列表自动打开
description：可为每个comboitem添加一个描述
< combobox autodrop=”true”>
<comboitem label=”选项1” image=”/img/coffee.gif” description=”咖啡”/>
<comboitem label=”选项2”/>
<comboitem label=”选项3”/>
</ combobox>
像其他支持图象的组件，可以使用setImageContent方法为comboitem组件指派一个动态生成的图像

事件：
延时创建下拉列表项
使用fulfill属性onOpen：当用户打开下拉列表时，onOpen事件被发送至应用，为延迟comboitem的创建，可使用fulfill属性
< combobox fulfill=”onOpen”>
<comboitem label=”选项1” image=”/img/coffee.gif” description=”咖啡”/>
<comboitem label=”选项2”/>
<comboitem label=”选项3”/>
</ combobox>
或监听onOpen事件，然后在事件监听器中准备下拉列表或动态的改变列表
< combobox id=”combo” onOpen=”prepare()”/>
<zscript>
Void prepare(){
  if(event.isOpen() && combo.getItemCount() ==0{
   Combo.appendItem(“选项1”);
   Combo.appendItem(“选项2”);
   Combo.appendItem(“选项3”);
  }
}
</zscript>
appendItem方法===创建一个comboitem，然后将其父组件指派为comobox

onChanging：添加一个事件监听，可基于用户的输入来填充下拉列表
<combobox id=”combo” autodrop=”true” onChanging=”suggest()”/>
<zscript>
Void suggest(){
  Combo.getItems().clear();
  If(event.value.startsWith(“A”)){
    Combo.appendItem(“A开头的选项1”);
   Combo.appendItem(“A开头的选项2”);
   Combo.appendItem(“A开头的选项3”);
  }else if(event.value.startsWith(“B”)){
   Combo.appendItem(“B开头的选项1”);
   Combo.appendItem(“B开头的选项2”);
  }
}
</zscript>
当接收onChanging事件时，combobox的内容并不会改变，因此不能使用combobox的value属性，要使用事件org.zkoss.zk.ui.event.InputEvent的value属性

ZK----第七章 ZUML页面组件集之下拉列表框

猜你喜欢