Combo（自定义下拉框）

扩展自$.fn.iValidatebox.defaults。使用$.fn.iCombo.defaults重写默认值对象。

自定义下拉框显示一个可编辑的文本框和下拉面板在html页面。这是构建其他复杂的组合部件（如：combobox,combotree,combogrid等）之前需要构建的最基本的组件。

依赖关系

• textbox
• panel

用法

自定义下拉框使用Javascript创建一个<select>或<input>元素。注意：使用自定义下拉框不能通过标签的方式进行创建。

<input id="cc" value="001">

$('#cc').iCombo({
    required:true,
    multiple:true
});

属性

属性扩展自validatebox(验证框)，自定义下拉框新增的属性如下。

属性名	属性值类型	描述	默认值
width	number	组件的宽度。	auto
height	number	组件的高度。	22
panelWidth	number	下拉面板宽度。	null
panelHeight	number	下拉面板高度。	200
panelMinWidth	number	下拉面板最小宽度。	null
panelMaxWidth	number	下拉面板最大宽度。	null
panelMinHeight	number	下拉面板最小高度。	null
panelMaxHeight	number	下拉面板最大高度。	null
panelAlign	string	面板对齐方式。可用值有：'left','right'。	200
multiple	boolean	定义是否支持多选。	FALSE
multivalue	boolean	定义是否支持多值提交。	TRUE
reversed	boolean	定义在失去焦点的时候是否恢复原始值。	FALSE
selectOnNavigation	boolean	定义是否允许使用键盘导航来选择项目。	TRUE
separator	string	在多选的时候使用何种分隔符进行分割。	,
editable	boolean	定义用户是否可以直接输入文本到字段中。	TRUE
disabled	boolean	设置启用/禁用字段。	FALSE
readonly	boolean	设置该字段为读写/只读模式。	FALSE
hasDownArrow	boolean	定义是否显示向下箭头按钮。	TRUE
value	string	字段的默认值。
delay	number	最后一次输入事件与执行搜索之间的延迟间隔（执行自动完成功能的延迟间隔）	200
keyHandler	object	在用户按下键的时候调用一个函数。见下方代码示例。

属性代码示例

keyHandler属性示例：

该按键处理器被定义为：

keyHandler: {
   up: function(e){},
   down: function(e){},
   left: function(e){},
   right: function(e){},
   enter: function(e){},
   query: function(q,e){}
}

事件

事件名	事件参数	描述
onShowPanel	none	当下拉面板显示的时候触发。
onHidePanel	none	当下拉面板隐藏的时候触发。
onChange	newValue, oldValue	当字段值改变的时候触发。

方法

自定义下拉框的方法扩展自validatebox(验证框)。自定义下拉框新增的方法如下：

方法名	方法参数	描述
options	none	返回属性对象。
panel	none	返回下拉面板对象。
textbox	none	返回文本框对象。
destroy	none	销毁该组件。
resize	width	调整组件宽度。
showPanel	none	显示下拉面板。
hidePanel	none	隐藏下拉面板。
disable	none	禁用组件。
enable	none	启用组件。
readonly	mode	启用/禁用只读模式。见下方代码示例。
validate	none	验证输入的值。
isValid	none	返回验证结果。
clear	none	清除控件的值。
reset	none	重置控件的值。
getText	none	获取输入的文本。
setText	text	设置输入的文本。
getValues	none	获取组件值的数组。
setValues	values	设置组件值的数组。
getValue	none	获取组件的值。
setValue	value	设置组件的值。

方法代码示例

readonly方法示例：

$('#cc').iCombo('readonly');        // 启用只读模式
$('#cc').iCombo('readonly', true);  // 启用只读模式
$('#cc').iCombo('readonly', false); // 禁用只读模式