在Ext里面经常会用到多选的组件: multiselect
我这里给出的是Ext 3.1.1的例子。里面有些地方需要注意,我会在下面进行说明
下面是HTML
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>MultiSelect & ItemSelector</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="../ux/css/MultiSelect.css"/> <link rel="stylesheet" type="text/css" href="../shared/examples.css" /> <script type="text/javascript" src="../../adapter/ext/ext-base.js"> </script> <script type="text/javascript" src="../../ext-all.js"> </script> <script type="text/javascript" src="../ux/MultiSelect.js"></script> <script type="text/javascript" src="../ux/ItemSelector.js"></script> <script type="text/javascript" src="multiselect-demo.js"></script> <script type="text/javascript" src="../shared/examples.js"></script> </head> <body> <h1>MultiSelect & ItemSelector</h1> <p>The js is not minified so it is readable. See <a href="multiselect-demo.js">multiselect-demo.js</a>.</p> <b>MultiSelect</b><br /> <p>Press Save with no items selected to see an example of validation applied.</p> <div id="multiselect" class="demo-ct" style="margin-bottom:15px;"></div> <b>ItemSelector</b><br /> <p>Supports drag and drop, double-click, button move/reorder, etc. <div id="itemselector" class="demo-ct"></div> </body> </html>
下面是JS
/*! * Ext JS Library 3.1.1 * Copyright(c) 2006-2010 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ Ext.onReady(function(){ Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; /* * Ext.ux.form.MultiSelect Example Code */ var msForm = new Ext.form.FormPanel({ title: 'MultiSelect Test', width: 700, bodyStyle: 'padding:10px;', renderTo: 'multiselect', items:[{ xtype: 'multiselect', fieldLabel: 'Multiselect<br />(Required)', name: 'multiselect', width: 250, height: 200, allowBlank:false, store: [[123,'One Hundred Twenty Three'], ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'], ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']], tbar:[{ text: 'clear', handler: function(){ msForm.getForm().findField('multiselect').reset(); } }], ddReorder: true }], tbar:[{ text: 'Options', menu: [{ text: 'Set Value (2,3)', handler: function(){ msForm.getForm().findField('multiselect').setValue('2,3'); } },{ text: 'Toggle Enabled', handler: function(){ var m = msForm.getForm().findField('multiselect'); if (!m.disabled) { m.disable(); } else { m.enable(); } } }] }], buttons: [{ text: 'Save', handler: function(){ if(msForm.getForm().isValid()){ Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+ msForm.getForm().getValues(true)); } } }] }); var ds = new Ext.data.ArrayStore({ data: [[123,'One Hundred Twenty Three'], ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'], ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']], fields: ['value','text'], sortInfo: { field: 'value', direction: 'ASC' } }); /* * Ext.ux.form.ItemSelector Example Code */ var isForm = new Ext.form.FormPanel({ title: 'ItemSelector Test', width:700, bodyStyle: 'padding:10px;', renderTo: 'itemselector', items:[{ xtype: 'itemselector', name: 'itemselector', fieldLabel: 'ItemSelector', imagePath: '../ux/images/', multiselects: [{ width: 250, height: 200, store: ds, displayField: 'text', valueField: 'value' },{ width: 250, height: 200, store: [['10','Ten']], tbar:[{ text: 'clear', handler:function(){ isForm.getForm().findField('itemselector').reset(); } }] }] }], buttons: [{ text: 'Save', handler: function(){ if(isForm.getForm().isValid()){ Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+ isForm.getForm().getValues(true)); } } }] }); });
【注意:】这里要说明的是,如何取得多选框中的数值的问题。
在Ext给出的例子中, msForm.getForm().getValues(true) 取值之后,
打印出来是: multiselect=1%2C2%2C3%2C4
这个结果是被decode之后的,可以顺利的放在url里面传给后台。
但是:如果我们需要在前台处理我们的选项,或者我们不想用上面给出的decode之后的结果传递给后台,该如何处理呢?
其实很简单,需要注意2个地方。
1、在 xtype: 'multiselect', 下面有表单的name的配置:name: 'multiselect',
这里的name,就是你取得数据的关键。
2、例子中取出数据的是这条语句:
msForm.getForm().getValues(true)
我们也需要对它进行改造。如下:
var selectItems = msForm.getForm().getValues().multiselect;
这个 selectItems 就是我们要的数值。通过 alert(selectItems.constructor); 我们可以知道,selectItems 是一个字符串,里面的数值用逗号,进行了串联。我们来处理这个逗号,分割的字符串就可以得到一个数组。就是我们要的数值
相关推荐
在给定的标题“Ext ComboBox 下拉多选框带搜索功能”中,我们关注的是一个特别的ComboBox实现,它不仅允许用户从下拉列表中选择多个选项,还具备搜索功能,使得用户可以更高效地找到他们想要的选择项。 ComboBox在...
在Java EXT项目中,下拉列表多选框(LovCombo)是一种常见的用户界面元素,它允许用户在下拉菜单中选择一个或多个选项。EXT框架是Sencha公司开发的一个JavaScript库,专门用于构建富客户端Web应用程序,其组件丰富,...
这类组件提供了复选框的视图,用户可以勾选多个选项,这些选择会被隐藏的文本字段记录下来,以便于服务器端处理。 要创建一个EXT3.2的多选下拉框,首先你需要导入所需的库和CSS样式,确保页面加载EXT JS库。然后,...
在本项目中,我们探讨的是如何使用纯JavaScript实现一个功能丰富的下拉多选框,而不是依赖于像jQuery这样的库,尤其是jQuery的multiselect插件。 首先,让我们了解下拉多选框(Dropdown)和复选框(Checkbox)的...
在EXT2.2中,下拉复选框是一种特殊的组件,它结合了下拉列表和复选框的功能,用户可以从一个可滚动的列表中选择一个或多个选项。 "基于EXT2.2的下拉复选框"这个项目可能是对EXT2.2原生组件的扩展或优化,以满足特定...
在描述中提到的"动态下拉框"(Dropdown)和"checkbox",是指在Ext JS中实现的一种具有选择功能的下拉列表,用户可以选择多个选项,每个选项前都有一个复选框。这种组件通常被称为Checkbox Combo或Checkbox Select。 ...
默认情况下,ComboBox只允许用户选择一个值,而MultiComboBox则允许用户选择多个值,这些值通常以复选框的形式展示。 要实现全选功能,我们需要考虑以下关键步骤: 1. **配置MultiComboBox**:在创建MultiComboBox...
此外,为了提高用户体验,你可能希望添加清除已选值的功能。为此,可以添加一个清除按钮,并监听其点击事件: ```javascript var clearButton = Ext.create('Ext.button.Button', { text: '清除', handler: ...
这个功能增强了标准的单选下拉框,允许用户同时选择多个条目,通常通过复选框实现。在描述中提到的“全选/全不选”功能,是多选下拉框的一种高级特性,它提供了快速选择或取消所有选项的便利。 首先,我们来看看`...
此外,我们可以定制下拉列表的显示样式,例如添加复选框,通过设置`listConfig`属性。下面的示例展示了如何添加复选框并改变列表的宽度: ```javascript listConfig: { getInnerTpl: function() { return '...
"下拉多选框"是指一个可让用户选择多个选项的下拉菜单。在ExtJS中,这可以通过`Ext.form.field.CheckboxGroup`或者`Ext.form.field.MultiSelect`实现,这些组件允许用户通过复选框或类似下拉列表的形式进行多选操作...
5. **渲染选中项**:可能需要覆盖默认的模板(template),以在输入框中以某种形式(如复选框或分隔符)显示选定的多个值。 6. **用户交互**:可能需要自定义键盘和鼠标交互,例如通过Ctrl或Shift键进行多选。 7. ...
这可能涉及到在组件内部维护一个日期数组,以及与用户交互的UI元素,如复选框或按钮。 3. **UI交互**:为了让用户直观地看到和操作多选日期,UI界面需要相应地进行调整。可能需要显示一个可滚动的日历面板,用户...
1. **多选功能**:与传统的单选下拉框不同,LovCombo允许用户同时选择多个选项,通过检查框或复选标记实现。 2. **动态加载**:数据通常从服务器异步加载,根据用户的输入过滤结果,这样可以减少页面的加载时间,并...
这些规则通过`checked`和`unchecked`类名应用到元素上,从而实现了复选框的样式。 此外,代码中还包括了一个自定义的`CustomCancelDropdownComboBox`类,继承自`Ext.form.ComboBox`。这个类添加了额外的功能,例如...
在这个例子中,`multiSelect: true`使列表支持多选,而`selectionModel`配置了基于复选框的多选模式。如果希望显示复选框,可以保留`useSimpleItems: true`,如果不希望显示复选框,可以将其设置为`false`。 最后,...
- 如果需要在下拉列表中显示复选框,可以使用`checkboxSelectionModel`作为列表的`selModel`,并根据需要配置相关属性,如`showHeader`(是否显示列头,列头中包含复选框)。 5. **值的管理**: - `value`:多选...