Ext学习札记09 - ComboBox，Store

2012-10-24

Ext学习笔记09 - ComboBox，StoreComboBox ComboBox是指下拉菜单，在API中找到ComboBox对应的xtype是 combo

Ext学习笔记09 - ComboBox，Store
ComboBox

ComboBox是指下拉菜单，在API中找到ComboBox对应的xtype是 combo
Ext学习札记09 - ComboBox，Store

应用?Window 布局的笔记中的窗体，其中性别 Gender 这一项选项只有两个(male, female)，可以使用 ComboBox 控件，为Gender 一项加上 xtype，值为 combo

? 看，已经是一个下拉框的样子了，但是这时Photo中的图片又显示不出来了，还是那个原因，textfield少了一个，需要调整索引位置。

ComboBox使用的过程中是很复杂的，就像Dojo中的ComboBox 和 FilteringSelect，在实际应用中的根据不同的需求，应用起来非常灵活。

接下来要为下拉框中赋值，Ext 对于数据存取都封装在了data 中，存储数据分为 GroupingStore，JsonStore 和SimpleStore，在这里使用SimpleStore，它是负责解析数据的数据存储器，通常用来存储数组数据，通过ArrayReader来解析读取数组，看一下ArrayReader在API中的定义
Ext学习札记09 - ComboBox，Store

在API提供的示例中给出了ArrayReader存储数组数据的方式，了解了这一点，再来看SimpleStore

SimpleStore中有两个重要的也是最常用的构造参数，Fields 和 Data
Ext学习札记09 - ComboBox，Store

data：用来存放SimpleStore目标数据，以数组形式存在 fields：field对象定义的数组，也可以是field名字的字符串

SimpleStore中定义的数组都是用ArrayReader来读取的，ArrayReader是封装的一个基础工具类，将读取数组这个常用的操作抽取了出来。?

ComboBox中两个常用的构造参数 displayField 和 mode：?

displayField：
Ext学习札记09 - ComboBox，Store

绑定到当前ComboBox中的基础数据的field名字，未定义的默认值为 mode='text' 或 mode='remote'

mode：
Ext学习札记09 - ComboBox，Store

ComboBox 加载数据的方式，默认从远程服务器加载，如果ComboBox加载本地数据，需要设置 mode='local'。

在Gender一项中，只要从本地加载数据就可以了，它的值是确定的，并且不需要修改（如果是需要配置的值或者经常变动的值需要从服务器端加载，但是只有当点击ComboBox向下箭头的时候才会从服务器端发出加载数据请求，这样会产生用户体验的延迟）

来看代码：

?同样需要设置 readOnly 这个参数，避免用户的误操作。但是这样又出现了一个问题，Ext中的ComboBox提供了一种自动匹配的功能，比如下拉菜单中有一系列数据，我们想找到javaeye这样的选项，当输入字母 j 的时候，下拉列表中会查询出所有以 j 开头的字符串，其他的选项不会显示，也就是说，Gender中只有两项male和female，当选择其中之一之后，另外的选项就不会显示了，而且是readOnly，如果第一次操作用户选错了，希望重选就没有办法操作了，除非刷新页面，这样是不合理的。

这种情况下，有另外一个构造参数可以解决这个问题：
Ext学习札记09 - ComboBox，Store

当触发下拉动作被激活时执行这一操作。默认的参数是“query” 即执行查询来匹配用户输入结果，使用参数“all” 会显示所有的结果。需要在ComboBox定义中加上这一句：

???

成功！

把 depart 这一项内容加载的事件放到当窗口show的时候默认显示下拉菜单中的第一个选项：

这里面用到的布局和显示的一些参数，参考Ext学习笔记07 - Window及Window中的布局就可以了，都是一样一样一样地。

这篇有点儿长了，下篇继续吧。?

这部分的代码：

function

var

new

true

new

true

function

var

new

false

function

true

var

function

this

热点排行

编程

Ext学习札记09 - ComboBox，Store