ExtJs4 ComboBox详解与实例

"这篇资源是关于ExtJS4中ComboBox组件的实例教程，主要讲解了如何创建和配置一个ComboBox，包括其各个重要的参数设置。" 在ExtJS4中，ComboBox是一种常用的下拉选择框组件，它提供了丰富的功能和灵活的配置选项。在给出的示例中，我们首先定义了一个数据模型`addcommodel`，该模型包含两个字段：`stbId`和`mac`。数据模型是ExtJS中用于描述数据结构的关键部分，这里的`mapping`属性用于指定数据源中的对应字段。 接着，创建了一个名为`addstore`的数据存储（Store）实例，它基于`addcommodel`模型。数据存储是ExtJS中管理数据的主要对象，它可以连接到不同的数据源，如Ajax请求。在本例中，数据源是一个Ajax请求，指向'site.action?otype=getstb'，返回JSON格式的数据，其根节点为'root'。同时，设置`autoLoad`为`true`，使得数据在加载时自动获取。 然后，创建了ComboBox实例`addcombo`，并对其进行了详细的配置。`store`属性指定了关联的数据存储，`emptyText`设置了无选择时显示的文本，`fieldLabel`定义了字段标签，`typeAhead`和`triggerAction`分别启用了自动完成和全触发动作。`typeAheadDelay`设定了自动完成的延迟时间，`displayField`用于显示的字段，这里是'mac'。`name`属性用于表单提交时的标识，`valueField`则指定了选择项对应的值字段，这里为'VNodeId'。`forceSelection`确保用户只能选择列表中的值，不能输入不在列表中的值，`width`设置了控件宽度，`selectOnFocus`则表示当字段获得焦点时自动选择第一个匹配项。 最后，通过`Ext.getCmp('nodecom')`获取了ID为'nodecom'的组件的值，这可能是在页面上另一个ComboBox的值，用于某些业务逻辑或者初始化操作。 通过这个实例，我们可以了解到ExtJS4中创建和配置ComboBox的基本步骤以及一些常用参数的含义，这对于理解和使用ExtJS开发复杂的Web应用是非常有帮助的。