ComboBox Class
Constructor
ComboBox
-
config
Parameters:
-
configObject
Example:
require(['combobox'], function(ComboBox){
var basicComboBox = new ComboBox({
render : '#container',
dataSource : new ComboBox.LocalDataSource({
data : ['a1234', 'b2345', 'c3456', 'd4567']
}),
maxItemCount : 4,
format : function(query, data){ //自定义下拉菜单属性
var ret = [];
for(var i = 0; i < data.length; i++){
ret[i] = {
content:(data[i] + "")
.replace(query, '<strong>' + query + '</strong>'),
disabled:(i % 2 ? true : false)
}
}
return ret;
}
})
})Item Index
Methods
Attributes
- active
- autoHighlightFirst
- collapsed
- content
- created
- dataSource
- disabled
- el
- elAttrs
- elBefore
- elCls
- elStyle
- focused
- format
- hasTrigger
- height
- highlighted
- input
- isControl
- listeners
- matchWidth
- maxItemCount
- menu
- parent
- placeholder
- plugins
- prefixCls
- prefixXClass
- render
- rendered
- srcNode
- updateInputOnDownUp
- visible
- width
- x
- xy
- y
- zIndex
Methods
addAttr
-
name -
attrConfig
给宿主对象增加一个属性
Parameters:
-
nameString属性名
-
attrConfigObject属性配置信息, 支持下面的配置项:
-
valueString | Number属性默认值。注意默认值请不要设置为复杂对象（通过自定义构造器 new 出来的），复杂对象可设置 valueFn 返回.如果配置项中没有设置 value, 会调用 valueFn 函数获取默认值并赋给 value
-
valueFnFunction提供属性默认值的函数，传入对象内部对应的属性值和属性名，取该函数的返回值作为最终值给用户
-
setterFunction写属性时的处理函数，传入从 set() 参数得到的属性值和属性名，如果返回非 undefined 则作为新的属性设置值
-
getterFunction读属性时的处理函数
-
validatorFunction写属性时的验证函数，传入从 set() 参数得到的属性值和属性名，返回 false 则不改变该属性值
-
addAttrs
-
attrConfigs -
values
批量添加属性
addTarget
-
target
添加冒泡事件源对象
Parameters:
-
targetObject事件往上冒泡的事件源
Example:
require(['util', 'event/custom'], function(Util, CustomEvent) {
function Custom(id){
this.id = id;
this.publish("run",{
bubbles:1
});
}
Util.augment(Custom, CustomEvent.Target);
var c1 = new Custom("c1");
var c2 = new Custom("c1");
c1.addTarget(c2);
c2.on("run",function(e){
S.log(e.target.id +" fires event run"); // => c1 fires event run
});
c1.fire("run");
});blur
()
使组件失去焦点
callSuper
()
调用父类的对应方法，如果没有，则返回undefined
Example:
require(['base'], function(Base) {
var A = Base.extend({
m: function (value) {
return 'am:' + value;
},
m2: function (value) {
return 'am2:' + value;
}
});
var B = A.extend({
m: function(value) {
return 'bm:(' + this.callSuper(value) + ')';
},
m2: function(value) {
return 'bm2(' + this.callSuper.apply(this, arguments) + ')';
}
});
var b = new B();
console.log(b.m(1));
console.log(b.m2(2));
});create
()
创建当前组件的DOM结构，control将会代理给render
Returns:
自身
destroy
()
销毁实例
detach
-
eventType -
fn -
[scope]
解除绑定的事件处理器
extend
-
[extensions] -
methodDesc -
staticAttributes -
desc
从当前类上扩展出一个子类
Parameters:
-
[extensions]Function[] optional扩展类数组
-
methodDescObject方法集合键值对
-
staticAttributesObject放到新产生组件类上的静态属性集合键值对，其中 ATTRS 属性特殊对待
-
descObject类元信息
-
nameString类名
-
fire
-
type -
eventData
触发绑定 type 类型的事件处理器, 并给触发的事件处理器的事件对象参数中混入数据 eventData
Returns:
如果其中一个事件处理器返回 false , 则返回 false, 否则返回最后一个事件处理器的返回值
focus
()
使组件获得焦点
get
-
name
获取属性 name 的值
Parameters:
-
nameString属性名.也可以为 “x.y” 形式. 此时要求 x 属性为包含 y 属性的普通 Object.当没有设置属性值时, 会取该属性的默认值
getPlugin
-
id
根据指定的 id 获取对应的plugin实例
Parameters:
-
idStringplugin实例的id
Returns:
对应的plugin实例
Example:
dialog.getPlugin('component/plugin/drag')
.getPlugin('dd/plugin/constrain')
.set('constrain', false);hide
()
隐藏组件
Returns:
自身
on
-
eventType -
fn -
[scope]
为相应事件添加事件处理器
Parameters:
-
eventTypeString | Object- 当为String时 包含一个或多个事件名称的字符串, 多个事件名以空格分开。 事件可以通过加点来表示分组，例如 "click.one" , "click.two"
- 当为Object时，类似这样：
{ 'click':{ fn:function(){ }, filter: '' // delegate, once:true // 绑定一次 }, 'mouseenter':function(){} }
-
fnFunction当事件触发时的回调函数
-
[scope]Object optional回调函数的 this 值. 如果不指定默认为绑定事件的当前元素
plug
-
plugin
安装指定插件
Returns:
自身
Example:
require(['overlay', 'component/plugin/resize'],function(Overlay,Resize){
new Overlay({
content:'test'
}).plug(new Resize({
handlers:['t','t']
}));
});publish
-
type -
cfg
配置自定义事件的一些特有信息
render
()
把当前组件的DOM结构放入 DOM 文档中，并绑定事件，同步属性
Returns:
自身
reset
-
name -
opts
重置属性 name 为初始值. (调用一次 set() )
set
-
name -
value -
opts
设置属性 name 的值为 value
Parameters:
Returns:
该次属性设置是否生效（是否通过了 validator 验证）
show
()
显示组件
Returns:
自身
sync
()
同步属性值.组件基类增加 sync 函数，调用后可调用父类、扩展类、插件对应的 syncUI 方法
unplug
-
plugin
卸载指定插件
Returns:
自身
Example:
require(['overlay','component/plugin/resize'],function(Overlay,Resize){
var o= new Overlay({
content:'test'
}).plug(new Resize({
handlers:['t','t']
}));
o.unplug('component/plugin/resize'); // 卸载 resize 插件
});Attributes
autoHighlightFirst
默认 false. 是否当自动补全菜单出现时高亮第一项
Default: false
Example:
require(['node', 'combobox'], function ($, ComboBox) {
var data = ["a123456", "b12345", "c3464356", "d23434"];
var basicComboBox = new ComboBox({
width:100,
srcNode:$("#combobox"),
// 初始就聚焦
focused:true,
hasTrigger:false,
dataSource:new ComboBox.LocalDataSource({
data:data
})
});
basicComboBox.render();
// 得到焦点时展示全部
basicComboBox.get("input").on("focus", function () {
basicComboBox.sendRequest('');
});
}dataSource
ComboBox.LocalDataSource | ComboBox.RemoteDataSource
数据源配置 例如静态数据源的配置:
{
dataSource : new ComboBox.LocalDataSource({
data:["abc","123"]
})
}format
Function
可选。自定义下拉菜单属性的函数，传入参数 query(自动补全框当前值) , data(匹配数据数组)。 返回对象数组，其中对象的 content 属性表示菜单项显示内容，textContent 表示放入到自动补全框的内容，disabled 表示当前项是否被禁用. 例如高亮的处理:
{
format:function(query, data){
var ret = [];
for (var i = 0; i < data.length; i++) {
ret[i] = {
content:(data[i] + "")
.replace(new RegExp(S.escapeRegExp(query), "g"),
"<b>$&</b>")
};
}
return ret;
}
}listeners
Object
配置组件的事件绑定,例如:
{
listeners:{
customEvent:function(e){
alert(e.type); // => "customEvent"
}
}
}
or
{
listeners:{
customEvent:{
fn:function(e){
// e.type // => customEvent
// this.xx => 1
},
context:{xx:1}
}
}
}plugins
Function[] | Object[]
插件构造器数组或插件对象数组. 例如
{
plugins: [ Plugin1,Plugin2 ]
}
// or
{
plugins: [new Plugin1(cfg),new Plugin2(cfg)]
}prefixCls
String
可选，默认 “ks-” . 组件的 css 样式类前缀 . 例如假设组件为 menu ，则该组件内的样式类名为 {prefixCls}menu，默认为 “ks-menu”.可用于实现自定义皮肤
srcNode
KISSY.Node
可选，组件从页面中已存在的该节点中渲染而来.srcNode 时设置其他属性不起作用，属性通通在 html 标签中指定，并且 html 标签必须包含完整结构，例如 content 节点必须存在
Events
*Change
每调用 set() 一次后就触发一次该事件
afterAttrNameChange
名为 “attrName” 的属性, 在改变它的值之后触发该事件
beforeAttrNameChange
名为 “attrName” 的属性, 在改变它的值之前触发该事件
click
当用户选择自动补全下拉框内的项时触发
Event Payload:
-
e.targetMenuItem选择的下拉菜单项