extjs中select用法

extjs中select用法
【原创版】
目录
1.Extjs 简介
2.Extjs 中的 select 元素
3.Select 的常用属性
4.Select 的常用方法
5.Select 的事件处理
6.实例代码演示
正文
【1.Extjs 简介】
Extjs 是一个基于 JavaScript 的 UI 组件库，可以用来快速开发富客户端应用。

它提供了大量可复用的 UI 组件，如表单、表格、树形菜单等，极大地简化了开发过程。

【2.Extjs 中的 select 元素】
在 Extjs 中，select 元素是一个下拉选择框，允许用户从一组可选项中选择一个值。

它可以用于表单控件，也可以用于其他场景，如数据绑定和远程数据获取。

【3.Select 的常用属性】
以下是一些常用的 select 属性：
- id：select 元素的 ID，用于标识和选取元素。

- name：select 元素的名称，用于数据绑定和提交表单。

- style：select 元素的样式，可以通过 CSS 进行设置。

- store：select 元素的数据源，用于填充下拉列表。

- displayField：select 元素的下拉列表项的显示字段。

- valueField：select 元素的下拉列表项的值字段。

- emptyText：select 元素在下拉列表为空时的提示文本。

- trigger：select 元素的触发方式，可选值有"all"、"manual"、"mouseover"和"mouseout"。

【4.Select 的常用方法】
以下是一些常用的 select 方法：
- getValue()：返回 select 元素当前选中的值。

- setValue(value)：设置 select 元素的选中值。

- getStore()：返回 select 元素的数据源。

- setStore(store)：设置 select 元素的数据源。

- clearValue()：清空 select 元素的选中值。

【5.Select 的事件处理】
select 元素支持以下事件：
- focus：当 select 元素获得焦点时触发。

- blur：当 select 元素失去焦点时触发。

- change：当 select 元素的选中值发生变化时触发。

- click：当 select 元素被点击时触发。

【6.实例代码演示】
以下是一个简单的 select 元素实例：
```javascript
Ext.create("Ext.form.Panel", {
title: "选择你喜欢的水果",
width: 200,
height: 100,
renderTo: Ext.getBody(),
tbar: [
{
xtype: "combo",
id: "fruitCombo",
name: "fruit",
store:
Ext.data.TreeStoreManager.lookup("fruitStore"),
displayField: "name",
valueField: "id",
emptyText: "请选择一个水果",
trigger: "all"
}
]
});
```
在这个例子中，我们创建了一个包含下拉选择框的表单。

选择框的数据源是一个名为"fruitStore"的树形数据存储，下拉列表项的显示字段是"name"，值字段是"id"。