Extjs 4 带checkbox框的下拉多选选框

最新推荐文章于 2023-06-17 22:16:18 发布

原创

最新推荐文章于 2023-06-17 22:16:18 发布 · 1.7k 阅读

收录于

本文介绍了如何在ExtJS 4中创建一个带有Checkbox的多选下拉框组件，利用Ext.form.field.ComboBox和Ext.XTemplate实现。通过设置multiSelect为true实现多选功能，并通过添加方法确保点击Checkbox与下拉内容时选中状态的一致性。文章还提到了组件封装的重要性，提供了一个网络来源的组件代码示例。

Extjs 有着丰富的组件，但是在API里面却没有直接写好的checkbox下拉框组件，这个时候对于新手来说可能有点蒙了，但是在好好看看Extjs的API后我们不难发现，我们可以通过自己设计拼装出checkbox下拉框主键（所有组件都一样的，都是在基本组件的基础上拼装而成的）。

我们通过两个组件得到我们想要的checkbox下拉框：

1. Ext.form.field.ComboBox 下拉框组件

2. Ext.XTemplate 模板组件

其实，在combo组件的配置项中我们就可以看到，combo是支持使用XTemplate的，所以下拉框我们就可以用combo而checkbox则用XTemplate自己写就可以了。

{
   xtype: 'combo',
   name: 'status',
   id: 'statusId',
   multiSelect: true,
   editable: false,
   emptyText: justsyLang.strategyExecutionStatus, //'策