[Ext JS 4] 实战之多选下拉单 (带checkbox)

最新推荐文章于 2025-08-12 16:12:34 发布
最新推荐文章于 2025-08-12 16:12:34 发布
阅读量1.7w 收藏 4
点赞数
CC 4.0 BY-SA版权
分类专栏： 130-Web语言 Ext JS开发大全
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oscar999/article/details/12050345
本文介绍了在Ext JS 4中如何实现一个带有复选框的多选下拉框。通过设置ComboBox的multiSelect属性和自定义listConfig的itemTpl来显示每个选项前的复选框。同时，文章详细讲解了功能联动，即选中或反选选项时对应的复选框状态改变的实现方法，并针对动态store的情况，通过覆盖onItemSelect方法解决了问题。

前言

Ext js 创建一个多选下拉单的方式很简单， 使用Ext.form.ComboBox， 设置 multiSelect 为true 就可以了。

但是如果要在每个下拉之前加上一个checkbox， 如何实现呢？

ComboBox本身没有这样的配置，

有一个 “Ext.ux.form.MultiSelect” 这样一个扩展， 效果的话，是把选项全部显示出来。

没办法只能自己扩展一个这样的组件了。


界面实现

要实现这样的显示，可以使用ComboBox 的listConfig 这个配置。

可以配置listConfig的itemTpl来显示每个选项的显示效果， 

	    	  itemTpl : Ext.create('Ext.XTemplate',
了解本专栏 订阅专栏 解锁全文 超级会员免费看
[Ext JS 4] 实战之多选下拉单 (带checkbox) 续 - 带ALL 选项
oscar999的专栏
12-12 8472
在 [Ext JS 4] 实战之多选下拉单 (带checkbox) 这一篇中有介绍如何开发带有checkbox 的多选菜单。 但是实际项目开发过程中， 用户的需求也是不断精进的。 使用淘宝或是其他网站购物车功能的用户对全选就特别习惯， 所以他们也希望在下拉单中也能有 "ALL" 这样的选项。 但是Extjs 本身提供的多选下拉单，功能比较有限。 之前有扩充过带 checkbox, 现在又要多扩充一个 "ALL" 选项了。
Extjs之多选下拉框（MultiSelect）
sdfsdfytre的博客
11-10 1302
Extjs之多选下拉框（MultiSelect）
Extjs4 下拉多选（Multiple Selection）
03-07
在Extjs4中，下拉多选得以支持，只需要设置Combobox的multiSelect值为true就可以了。但是有一些问题，就是下拉框选值、去除值友好性不高，必须点击下拉框中同样的项，才能选取或去除。 在官网论坛中，发现了一个插件，这个插件是扩展了Combobox多选功能，使得下拉多选更美观、好用。 更多Extjs4信息，请移步 http://www.mhzg.net
extjs多选下拉框
02-23
extjs多选下拉框，支持单选，多选，全选和全不选，ext3.*适用，文章的例子下载。
ExtJS实现多选下拉框的三种代码方案
最新发布
weixin_35732273的博客
08-12 572
本章将详细介绍如何在ExtJS框架中实现多选下拉框。我们将从使用内置的ComboBox开始，逐步深入了解其配置选项、数据绑定、事件处理等核心功能，并在之后的章节中探讨更高级的应用和自定义插件开发。// 示例代码：创建一个ExtJS的MultiSelect ComboBoxstore: store, // store定义了下拉选项的数据valueField: 'id', // 数据中的唯一标识符字段displayField: 'name', // 显示给用户的字段。
基于ext3.3的可多选下拉框js
03-19
基于ext3.3的可多选下拉框js，可以从前台或者后台获取下拉框中数据
Extjs 下拉框多选
kfcman的专栏
11-16 315
1、效果图：  2、扩展js类库，在项目中建立一个 js文件，命名为：MultiSelect.js  其代码为： if ('function' !== typeof RegExp.escape) {    RegExp.escape = function (s) {        if ('string' !== typeof s) {            return s;    ...
Extjs 实现下拉框多选
Sucker的小笔记
11-14 3085
{     fieldLabel:'多选下拉框',     triggerAction:'all',     id:'multiselect',     name:'multiselect',     xtype: 'combo',     width:100,     emptyText:'请选择',     store:manStore,     mode:'local',     value...
ExtJS常用控件实战：Table Layout表单设计
4. **ComboBox**: ComboBox是一个下拉选择框，其中可以包含一个可搜索的列表，用户可以从列表中选择一个或者输入自己的值。 5. **NumberField**: 用于输入数值的文本框。 6. **DateField**: 用于选择日期的控件，...
【JavaFX：从入门到精通】：掌握高级界面设计的20个实战技巧
!...# 1. JavaFX概述及环境搭建 ## 1.1 JavaFX简介 JavaFX是一个用于构建富客户端应用程序的开源框架，它提供了丰富的图形和媒体接口，以创建具有现代视觉效果的桌面应用。从Java SE 8开始，JavaFX便成为标准库的一...
简单的EXTJS多选下拉框
chinawomen的专栏
07-06 568
看了下网上的下拉框多选扩展示例都太复杂了。本来很简单的东西却搞的那么复杂。 贴贴我的代码 很简单 var store = new Ext.data.SimpleStore({ fields: ['abbr', 'state', 'nick'], data : Ext.exampledata.states // from states.js }...
Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选
08-30
Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选， 附源码。 修复不能多选问题，代码仅供参考
Extjs3 多选下拉框LovCombo
08-29
Extjs3 多选下拉框LovCombo，Extjs3 多选下拉框LovCombo
extjs实现下拉框多选
03-18
extjs实现下拉框多选，很实用哦！
Extjs下拉多选树
07-22
Extjs 下拉树 下拉多选树 支持多选 全选/全不选 下拉多选框
EXT3.2 多选下拉框
04-06
extjs3.2 多选下拉框 复选下拉框
Extjs Checkbox
weixin_34150224的博客
04-17 329
ExtJs checkbox radiobox 问题 汇总 文章分类:Web前端 这个帖子主要记录我在使用ExtJs 中遇到的一些问题。 1、checkbox 和radiobox在IE下呈纵向显示的问题 添加如下css解决: Css代码 .x-form-check-wrap,.x-form-radio-wrap{paddi...
ExtJS 下拉框多选实现指南
weixin_26850469的博客
05-10 1175
ExtJS是基于JavaScript的一个框架，它用于开发富交互的Web应用程序。该框架具有高度的模块化，允许开发人员创建高性能和跨浏览器的界面，通过拖放组件和丰富的数据管理功能，使得开发复杂、美观的用户界面变得简单快捷。ExtJS框架中的ComboBox组件是一个非常强大的控件，它结合了文本框和下拉列表的功能。用户可以在文本框中输入内容，而ComboBox则会根据输入提供一个过滤后的下拉列表供用户选择。在ExtJS中，ComboBox可以用于数据的检索、显示以及用户输入的管理。
实现多选下拉效果的CheckBoxList技术解析
### 多选下拉的CheckBoxList知识点概述 在Web开发过程中，常会遇到需要用户从一组选项中选择多个项目的情况。传统的下拉选择框（`<select>`）默认只允许用户选择一个选项，但通过结合`CheckBoxList`控件，我们可以...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

oscar999

送以玫瑰，手留余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值