简介

DropDown是继承Trigger的一个控件对象，因此其具有Trigger的各种特性，详情请参考：Trigger(DCUG)

在定义Trigger的时候我们经常需要定义其icon，而DropDown提供了默认的icon实现，即如图：

这样看起来它就是一个下拉框元素。

使用简介

ListDropDown提供items属性定义下拉框的数据：

之后我们只要与支持trigger属性的控件的关联即可：

浏览器中就能看到这个控件包含下列框，打开后就能看到items中配置的下拉数据：

详细属性说明

items

items属性定义的方式有多种：

方式一：利用逗号分割符定义

前面范例中的items用了一个带逗号的字符串定义，其中逗号默认为分割符号。ListDropDown根据这个字符串自动生成下拉数据。

或者JS赋值：

dropdown.set("items", "a,b,c,d");

方式二：利用IDE的向导工具定义

当然我们也可以利用IDE提供的向导定义对象类型的下拉数据：

单击上图中的Edit按钮打开向导窗口：

在向导窗口中添加一个含Entity的集合对象Collection,其中的Entity可以根据需要定义不同的属性。

这样就也可以定义下拉框，执行效果如：

当然上面的显示效果并不好，我们可以通过ListDropDown的displayProperty属性设置加以改善，本例我们定义了Entity中的两个属性:code和label，则我们将displayProperty设置为label:

则最终显示的效果如：

方式三：利用JSON定义

除了上述方式定义下拉框数据之外我们还可以通过JSON定义：

// @Bind #dropdown1.onCreate
!function(self, arg) {
	self.set("items",[{
		code:1,
		label:"a"
	},{
		code:2,
		label:"b"	
	},{
		code:3,
		label:"c"	
	},{
		code:4,
		label:"d"	
	}]);
}

方式四：通过DataProvider提供数据

利用EL表达式：${dorado.getDataProvider("").getResult()}直接读取DataProvider的数据作为下拉数据，如下范例：

其中getDataProvider的参数即对于Dorado中的DataProvider方法：

范例1：返回String组成的Collection集合

@DataProvider
public Collection<String> getTitlesOfCourtesy() {
	List<String> titles = new ArrayList<String>();
	titles.add("Mister");
	titles.add("Mistress");
	titles.add("Miss");
	titles.add("Doctor");
	return titles;
}

范例2：返回Map集合

@DataProvider
public Map<String, String> getTitlesOfCourtesy() {
	Map<String, String> mapValue = new LinkedHashMap<String, String>();
	mapValue.put("Mr.", "Mister");
	mapValue.put("Mrs.", "Mistress");
	mapValue.put("Ms.", "Miss");
	mapValue.put("Dr.", "Doctor");
	return mapValue;
}

范例3：返回POJO组成的Collection集合

@DataProvider
public Collection<Category> getAll() {
	return categoryDao.getAll();
}

需要注意的是ListDropDown中的items数据是静态的，一般在初始化后就不再发生变化。因此与filter相关的几个属性默认都是对客户端已有数据的过滤操作，如果想利用ajax技术从服务器端过滤，则应该采用DataSetDropDown。

displayProperty

对于上述items生成的数据，如果是对象类型的数据，则需要通过displayProperty定义下拉数据默认显示对象中那个属性。

如上面方式三：利用JSON定义，

如果设置displayProperty为label,则下拉框显示效果为：

如果displayProperty设置为code,则显示效果为：

如上方式四：通过DataProvider提供数据

已知Category.java的结构如：

如果设置displayProperty为categoryName,则下拉框显示效果为：

如果设置displayProperty为id,则下拉框显示效果为：

添加DataColumn功能

通过displayProperty只能显示JSON或Entity对象中的一个属性，如果我们希望以表格的形式展现多个属性的时候，就需要利用ListDropDown的DataColumn子元素。

如下图中在ListDropDown中添加了不同的DataColumn：

DataColumn通过property与对应的下拉框行数据对象的某一个属性绑定：

最终页面的执行效果如下：

有关DataColumn的各种用法请参考：Grid(DCUG)#基本使用中的各种DataColumn的使用说明

autoOpen

是否启用自动打开的功能。即当相应的编辑框获得输入焦点时自动打开此下拉框。

否则我们就需要通过鼠标单击打开，或通过F7快捷键才能打开下拉框。

buttonVisible

其在对应编辑框上的触发按钮是否可见。

如果将buttonVisible设置为false,则编辑框中的下拉按钮将不可见，但是我们能通过ListDropDown的autoOpen或F7快捷键打开下拉框，效果如：

dynaFilter

是否启用动态数据过滤的功能。如果设置为true,则打开下拉框的时候可以看到过滤按钮：

如果在编辑框中输入"C",并单击过滤按钮，就会自动过滤数据：

当然这儿的数据过滤只是针对ListDropDown中已有items中的数据做过滤，如果希望在服务器端过滤数据建议使用DataSetDropDown实现。

editable

是否允许用在相应的编辑框中进行文本输入。同：TextEditor(DCUG)#editable

editable为true情况下，下拉框还可以使用，除非我们使编辑框的readOnly为true,才可以屏蔽下拉框的操作。

filterOnOpen

是否要在下拉框打开时自动根据编辑框中的内容执行一次数据过滤。

当然这儿的数据过滤只是针对ListDropDown中已有items中的数据做过滤，如果希望在服务器端过滤数据建议使用DataSetDropDown实现。

filterOnTyping

是否随着用户在编辑框中的输入动作自动的对下拉列表中的数据进行过滤。

如果将ListDropDown中的filterOnTyping设置为true,则下图中的过滤和刷新按钮将不可见：

在下拉框打开的情况下，编辑框中输入内容就会自动过滤：

minWidth和maxWidth

下拉框默认情况下会根据所关联的编辑框的宽度作为自身的宽度，但在有些情况下，这种效果会不太友好，如下的两个效果：

下拉框宽度太小：

下拉框宽度太大(内容很少，宽度很宽）：

上面这种情况我们可以通过ListDropDown的minWidth和maxWidth改进：

效果如：编辑框宽度较小时，可以保证DropDown内容的完整性

编辑框宽度较大时，可以保证下拉框中留白区域较少：

minHeight和maxHeight

minHeight与maxHeight的功能与minWidth和maxWidth类似。不再重述。

minFilterInterval

该属性是针对filterOnTyping为true情况下的一个辅助属性，在业务并发量比较大情况下，filterOnTyping是一把双刃剑，方便用户操作的同时也给服务器带来巨大的ajax请求的压力(针对DataSetDropDown而言)，该属性给你一个优化性能的机会，通过调整该参数从而找到一个最优解。