Ext Js之ComboBox详解（第一部分）-------译

　一：Combobox介绍　

一个ComboBox的核心就是一个被美化的文本框，在文本框的右侧有一个箭头triger。在文本框内进行输入或者单击trigger都会显示一个下拉列表。然后就可以选择一个值并更新文本框内的值

下面先看一下最简单的combobox，我们去掉了所有的可选配置：

Ext.create('Ext.form.field.ComboBox', { 
store: ['Red', 'Yellow', 'Green', 'Brown', 'Blue', 'Pink', 'Black'] 
});

 

　　对于这个最为简单的配置，这里还有一些重要的特性需要提到。
　　1：你可以输入任何你喜欢的值，即使他并不在列表当中。
　　2：当你键入数据的时候显示的数据是被过滤后的。
　　3：单击trigger会显示所有的没有被过滤的选项。

 

二：配置禁止输入 Disabling typing
把配置选项editable设置为false将会禁止用户在combobox中进行输入。这会强制用户选择下拉列表中已经存在的选项。

Ext.create('Ext.form.field.ComboBox', { 
editable: false, 
store: ['Red', 'Yellow', 'Green', 'Brown', 'Blue', 'Pink', 'Black'] 
});

 

这样的话还会有一些额外的连锁反应：
1：单击combobox的文本框域也会触发一个下拉列表框。
2：这样就没办法显示一个被过滤的列表，列表总会显示所有的数据。当需要显示的选项的书目比较小而且所有可能的值都可以事先知道的话。这种配置方式还是相当有意义的。而且还有一个额外的选择就是radiobuttons  。combobox会占用比较少的地方。但是radio buttons会允许用户在没有单击trigger 之前就立刻看到所有的可选项。

三：强制选择

当设置editable为false而且没有那些缺陷的时候会很有吸引力。对于一个很列表。在里面要找到一个值是相当困难的。允许输入会提供一个快捷的方式来过滤选项。过滤就是根据前面少量的字符来确定的。在一些情况下一些选项还要根据用户键入的内容动态的从服务器端获取。

把配置选项forceSelection为true就会提供一个相对于editable一个较少的限制的选择。这限制了用户必须选择一个列表中存在的值而且不用限制用户的输入。

Ext.create('Ext.form.field.ComboBox', { 
forceSelection: true, 
store: ['Red', 'Yellow', 'Green', 'Brown', 'Blue', 'Pink', 'Black'] 
});

 

四：隐藏箭头
在输入未被禁用的情况下，隐藏trigger是非常理想的。这对于一个自动补全风格的combobox是非常有利的。

Ext.create('Ext.form.field.ComboBox', { 
hideTrigger: true, 
store: ['Red', 'Yellow', 'Green', 'Brown', 'Blue', 'Pink', 'Black'] 
});

 

五：type Ahead
另一项比对自动补全的combobox比较有用的选项是typeahead，当用户输入的时候combobox中的文字会自动扩展到列表中的匹配的选项中去。

六：Trigger Action
默认的情况下单击trigger将会显示在下拉列表中所有的选项。设置trigger action为query将会使列表根据当前文本框中的值进行过滤。

Ext.create('Ext.form.field.ComboBox', { 
store: ['Red', 'Yellow', 'Green', 'Brown', 'Blue', 'Pink', 'Black'], 
triggerAction: 'query' 
});

 

query这个名字看起来似乎有点违反直觉。当列表中的选项来自于远程服务器的时候这个选项是相当有意义的。在这种情况下文本框中的文字被用来检索服务器端被匹配的值。对于一个远程的查询，被查询的值需要以文本框中查询的值开始是毫无疑问的。这完全可以被当做一次查询而不是一次过滤。把这个配置选项应用到本地查询中实际上是有点惹人厌的。如果你对上面的例子多试验一会儿你就会清楚的明白，一旦一个选项被选中。单击鼠标就会显示出那个被选择的值。当这是为一个匹配文本框中输入的数据的选项的时候，这么做是很有意义的但是仅仅是符合逻辑意义并不是宗能安慰我们疑惑的用户。这些操作需要更加符合用户的直觉。这些缺点可以用一些补充的选项来进行有限程度的弥补。

Ext.create('Ext.form.field.ComboBox', { 
hideTrigger: true, 
store: ['Red', 'Yellow', 'Green', 'Brown', 'Blue', 'Pink', 'Black'], 
triggerAction: 'query', 
typeAhead: true 
});

 

在箭头选项被隐藏的时候设置triggerAction是有些怪异的。但是请你记住下拉列表也可以被按钮下来激活。在这个配置中下拉列表始终如一的展现被过滤的数据，无论他们是如何被激活的。

七：标签

所有的ExtJs域都可以有一个标签。

Ext.create('Ext.form.field.ComboBox', { 
fieldLabel: 'Colour', 
store: ['Red', 'Yellow', 'Green', 'Brown', 'Blue', 'Pink', 'Black'] 
});

 

把这些信息展示在一个空的文本框中。这就比一个标签占用了更少的区域但是这样的话描述信息就只能在文本框为空的时候显示了。（所以我门在这里就经常填充“请您选择”）。

Ext.create('Ext.form.field.ComboBox', { 
emptyText: 'Colour', 
store: ['Red', 'Yellow', 'Green', 'Brown', 'Blue', 'Pink', 'Black'] 
});

 

八：多选

Ext Js 提供了对多选的内置支持。

 

Ext.create('Ext.form.field.ComboBox', { 
editable: false, 
multiSelect: true, 
store: ['Red', 'Yellow', 'Green', 'Brown', 'Blue', 'Pink', 'Black'] 
});

 

这个例子也将editable设置为false。但是这不是严格要求的，这样做只是为了让用户少一点疑惑而已。

 

另外还有delimiter（定界符）配置选项。它被用来指定分离选项的字符。

Ext.create('Ext.form.field.ComboBox', { 
delimiter: ' OR ', 
editable: false, 
multiSelect: true, 
store: ['Red', 'Yellow', 'Green', 'Brown', 'Blue', 'Pink', 'Black'] 
});

 

九：设置初始化值。

从表面上看，设置初始化的值是相当的直观的。

Ext.create('Ext.form.field.ComboBox', { 
store: ['Red', 'Yellow', 'Green', 'Brown', 'Blue', 'Pink', 'Black'], 
value: 'Blue' 
});

 

一些combobox的配置还让初始化的值并不是列表里面会显示出来的值得其中之一。

 

Ext.create('Ext.form.field.ComboBox', { 
store: ['Red', 'Yellow', 'Green', 'Brown', 'Blue', 'Pink', 'Black'], 
value: 'White' 
});

 

对于一个多选的combobox 它的值就是被选中的项的数组。

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/herrmaulbeer/p/3633670.html