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

最新推荐文章于 2023-06-17 15:02:54 发布
最新推荐文章于 2023-06-17 15:02:54 发布
阅读量8.4k 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： 130-Web语言 Ext JS开发大全
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/oscar999/article/details/41864505
本文介绍了如何在Ext JS 4中扩展多选下拉框，添加全选（ALL）选项。文章详细阐述了两种实现思路，包括在store中添加数据和在下拉单中添加独立的ALL选项，并通过配置BoundList和监听itemSelect、itemDeselect事件来实现全选和反选的联动效果。同时，针对用户反馈，讨论了显示全选所有选项和单独显示已选选项的改进方案。

前言

在

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

这一篇中有介绍如何开发带有checkbox 的多选菜单。

但是实际项目开发过程中， 用户的需求也是不断精进的。

使用淘宝或是其他网站购物车功能的用户对全选就特别习惯， 所以他们也希望在下拉单中也能有  "ALL" 这样的选项。

但是Extjs 本身提供的多选下拉单，功能比较有限。

之前有扩充过带 checkbox, 现在又要多扩充一个 "ALL" 选项了。

要求是：

1. 选中"ALL", 其他选项要自动勾选

2. 反选"ALL", 其他选项要自动反选

3. 所有非"ALL"选项都选了， 要自动把 "ALL"勾选

3.

了解本专栏 订阅专栏 解锁全文 超级会员免费看
[Ext JS 4] 实战之多选下拉单 (带checkbox)
oscar999的专栏
09-26 1万+
Ext js 创建一个多选下拉单的方式很简单， 使用Ext.form.ComboBox， 设置 multiSelect 为true 就可以了。 但是如果要在每个下拉之前加上一个checkbox， 如何实现呢？ ComboBox本身没有这样的配置， 有一个 “Ext.ux.form.MultiSelect” 这样一个扩展， 效果的话，是把选项全部显示出来。 没办法只能自己扩展一个这样的组件了。
Extjs下拉多选框
weixin_30902251的博客
03-09 246
var stateCombo = new Ext.form.ComboBox({ store : new Ext.data.SimpleStore({ fields : ["value", "text"], data : [['0','有效'],['1','无效']] }), displayField:'text', //store也可以动...
extjs下拉框实现全选
hardplay123的博客
11-26 1046
extjs下拉框实现全选 下拉框中选项太多，为了提高易用性，实现全选功能。 通过别的博主的博客实现了该功能： https://blog.youkuaiyun.com/baidu_31134013/article/details/82839261#commentsedit 我使用的是extjs的4.x版本，在数据源加了以下属性： fields : ['name','code'] 还有就是数据仓库需要有全选这条...
ExtJs5.1多选下拉框CheckComb
yishengreai的专栏
08-06 4346
ExtJs这么多个版本了，可就是不提供多选下拉框，老外不用这个玩意吗？ 5都出来这么久了，新写的项目就用5吧，把以前Extjs4.2的时搜到前人的CheckComb改巴改巴，能用了就赶紧贴上来，没有仔细测试各种情况。 Ext.define('Ext.ux.CheckCombo', { extend : 'Ext.form.field.ComboBox', alias : 'widg
EXT.JS下拉框实现多选联动功能
qq_46336933的博客
06-17 953
【代码】EXT.JS下拉框实现多选联动功能。
extjs获取多选框_Extjs之多选下拉框（MultiSelect）
weixin_34239718的博客
12-24 689
扩展js类库，在项目中建立一个 js文件，命名为:xxx.js 其代码为：if ('function' !== typeof RegExp.escape){RegExp.escape = function (s){if ('string' !== typeof s){return s;}return s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1')...
CheckBoxList_WinForm多选下拉框_下拉多选_
10-01
这个场景下，我们可以自定义一个控件来实现“CheckBoxList”效果，即用户可以在下拉框中选择多个选项。下面我们将深入探讨如何实现这样一个功能。 首先，我们需要了解Windows Forms中的基本控件。在WinForm中，`...
gitTest_checkbox_list-JS:基本组件-多选列表框JS实现 ------- （搜索）未完成
04-30
本项目“gitTest_checkbox_list-JS”显然关注的是使用JavaScript来实现一个基本的多选列表框功能，尤其是涉及到搜索功能的实现，尽管根据标题，这部分可能还未完成。 在Web开发中，多选列表框（Checkbox List）常...
Winform 下拉带Checkbox 功能
06-16
本主题将深入探讨如何实现一个下拉列表框（ComboBox）控件，该控件带有复选框功能，即"Winform 下拉带Checkbox 功能"。这种控件通常用于让用户在多个选项中进行多选操作。 首先，我们需要理解控件的基本构造。在C#...
Extjs 封装多选下拉列表
qq_27618231的博客
07-25 258
封装的extjs多选下拉列表 getValue:function(){               var value= this.callParent();  if(value===text) { //               value = allValueArray;   value = '';               }               if (E
Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选
08-30
Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选， 附源码。 修复不能多选问题，代码仅供参考
ext多选下拉列表的全选功能实现
03-17
NULL 博文链接：https://leonel.iteye.com/blog/454174
extjs获取多选框_ExtJS表单之复选框
weixin_35958783的博客
12-24 776
1.复选框的值都是直接指定。Ext.onReady(function(){varmyCheckboxGroup=newExt.form.CheckboxGroup({id:'myGroup',xtype:'checkboxgroup',renderTo:'form-cb',fieldLabel:'SingleColumn',itemCls:'x-check-group-alt',...
extjs 之 list checkbox
测试开发这些事
09-02 2372
本例完成在一个listview中放入checkbox列表，设计知识：Ext.XTemplate和Ext.DataView 源码如下 function casereport_init() { function oncheck(str) { if (Ext.fly('box
ExtJS表格——行号、复选框、选择模型
奋斗
09-30 258
一、 设置行号   行号的设置主要问题在于删除某一行后需要重新计算行号  Ext.onReady(function() {         var cm = new Ext.grid.ColumnModel([                     new Ext.grid.RowNumberer(),           --在这里设置行号                    { heade...
[Ext JS] Grid 的复选框行选择之——某些行不能选取
oscar999的专栏
10-29 994
Grid的选择功能的实现要求如下： 使用复选框（Checkbox） 对Grid进行选择。 某些行根据改行的数据的条件进行是否可以选取。 需要有全选和全部反选的功能。 实现后的效果如下： 实现方案 Grid的第一列定义成 checkcolumn 类型 { xtype:'checkcolumn', width:40, dataIndex: 'selected', headerCheckbox:true, /
Extjs4---Checkbox,多选，全选
u011203602的专栏
08-26 959
为了方便对多条数据进行修改，多选，全选功能是不可少的，本文是在我发表的Extjs4---grid添加搜索功能上进行修改的 html代码： 同Extjs4---grid添加搜索功能上的html代码 只需修改引用即可 gridCheck.js代码： [javascript] view plaincopy //下面两
解决Extjs当中复选框全选后，取消选中某一项，全选框仍是选中状态的问题
zyjustin9的专栏
12-11 985
解决Extjs当中复选框全选后，取消选中某一项，全选框仍是选中状态的问题   方法： 写一个js文件，在js文件中重写复选框的显示代码，在其他地方引入该js文件   js文件重写代码如下： //清除 checkbox 表头全选 Ext.override(Ext.grid.GridView,{ onRowSelect : function(row){ t...
Extjs5实现带复选框的多选下拉选，复选框用extjs提供的checkbox样式
昨日情书
09-18 3201
因为网上现有的代码只是实现了复选框效果，在我把窗口关闭后，再打开，复选框还保留着上次的选中状态，因为有这个bug，所以自己把网上的代码给改进了下，加入了未选中事件和用extjs的样式，先上效果图 看着不错吧，这种复选框用的就是extjs的样式，下面大家看一下源代码，首先新创建个MultiSelect.js文件，代码如下Ext.define('Ext.form.MultiSelect', {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

oscar999

送以玫瑰，手留余香

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

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

打赏作者

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

抵扣说明：

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

余额充值