Extjs实现多选下拉框示例：自定义显示与复选样式

在ExtJS中，复选下拉框是一个功能强大的组件，用于提供用户在一组选项中进行多选操作。这个例子展示了如何在ExtJS应用中创建一个带有复选功能的下拉列表，以便用户可以根据需求选择多个选项。 首先，我们需要准备数据，这里使用了一个名为`data`的数组，包含了五个对象，每个对象具有`id`和`name`两个字段，代表了下拉框中的选项。数据被存储在一个`JsonStore`中，这是ExtJS中用于管理和操作数据的类，它会将数据映射到`id`和`name`字段。 ```javascript var data = [ {id: "aaa", name: "小明"}, {id: "bbb", name: "张三"}, {id: "ccc", name: "李四"}, {id: "ddd", name: "多多"}, {id: "eee", name: "袁华"} ]; var testStore = new Ext.data.JsonStore({ fields: ['id', 'name'] }); testStore.loadData(data); ``` 接下来，我们创建了一个`Panel`容器来展示这个复选下拉框，使用了`multicombo`组件，它是`ComboBox`的扩展，具备了复选功能。该组件的属性设置包括`store`（数据源）、`valueField`（值对应的字段）、`displayField`（显示的字段）等。同时，我们设置了`mode`为'local'，表示本地模式，即数据存储在客户端；`forceSelection`为true，确保至少有一个选项被选中；`hiddenName`设置为'test'，用于表单提交时的数据绑定；`editable`属性为true，允许用户编辑；`triggerAction`为'all'，表示当用户点击或按键触发时，所有选项都会响应；并指定了宽度和位置。 ```javascript var panel = new Ext.Panel({ layout: "absolute", title: "测试", width: 300, height: 100, frame: true, items: [ { xtype: "label", x: 10, y: 10, width: 80, text: "" }, { xtype: 'multicombo', store: testStore, valueField: "id", displayField: "name", labelSeparator: '', displaySeparator: ';', // 设置分隔符 valueSeparator: ',', // 设置值的分隔符 mode: 'local', forceSelection: true, hiddenName: 'test', editable: true, triggerAction: 'all', width: 200, x: 90, y: 5 } ] }); panel.render("aaa"); // 渲染组件到页面上 ``` 为了实现复选框样式的切换，如选中和未选中的状态变化，示例代码中还涉及CSS样式处理。具体地，通过设置`.checked`和`.unchecked`的背景图片，可以为选中和未选中的选项分别应用不同的视觉反馈。这里假设`../images/default/menu/checked.gif`和`../images/default/menu/unchecked.gif`是对应的选中和未选中状态的背景图片，需要确保已经包含了这些图片，并且`ext-all.css`文件已包含了组合框所需的样式，以支持这些自定义样式。 总结来说，这段代码演示了如何在ExtJS中创建一个带有多选功能的下拉框组件，用户可以通过这个组件在预设的选项中选择多个，并且还展示了如何定制其外观和行为。通过结合数据管理、组件配置和CSS样式，可以构建出符合需求的交互式界面。