//定义record
var rec;
Ext.form.MultiComboBox = Ext.extend(Ext.form.TriggerField, {
defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
listClass: '',
selectedClass: 'x-combo-selected',
triggerClass : 'x-form-arrow-trigger',
shadow:'sides',
listAlign: 'tl-bl?',
maxHeight: 300,
triggerAction: 'query',
minChars : 4,
typeAhead: false,
queryDelay: 500,
pageSize: 0,
selectOnFocus:false,
queryParam: 'query',
loadingText: 'Loading...',
resizable: false,
handleHeight : 8,
editable: true,
allQuery: '',
mode: 'remote',
minListWidth : 70,
forceSelection:false,
typeAheadDelay : 250,
displaySeparator:';',
valueSeparator:',',
lazyInit : true,
initComponent : function()
{
Ext.form.ComboBox.superclass.initComponent.call(this);
this.addEvents('expand', 'collapse', 'beforeselect', 'select', 'beforequery');
if (this.transform)
{
this.allowDomMove = false;
var s = Ext.getDom(this.transform);
if (!this.hiddenName)
{
this.hiddenName = s.name;
}
if (!this.store)
{
this.mode = 'local';
var d = [], opts = s.options;
for (var i = 0, len = opts.length; i < len; i++)
{
var o = opts[i];
var value = (Ext.isIE ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value :
o.text;
if (o.selected)
{
this.value = value;
}
d.push([value, o.text]);
}
this.store = new Ext.data.SimpleStore({
'id': 0,
fields: ['value', 'text'],
data : d
});
this.valueField = 'value';
this.displayField = 'text';
}
s.name = Ext.id(); // wipe out the name in case somewhere else they have a reference
if (!this.lazyRender)
{
this.target = true;
this.el = Ext.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
Ext.removeNode(s); // remove it
this.render(this.el.parentNode);
}
else
{
Ext.removeNode(s); // remove it
}
}
this.selectedIndex = -1;
if (this.mode == 'local')
{
if (this.initialConfig.queryDelay === undefined)
{
this.queryDelay = 10;
}
if (this.initialConfig.minChars === undefined)
{
this.minChars = 0;
}
}
},
分享到:
相关推荐
我们需要覆盖这个方法,使得在弹出下拉列表时,列表中的每个项目都带有复选框,并且这些复选框的状态与模型中的状态同步。 5. **处理用户交互**: 当用户在下拉列表中点击一个复选框时,我们需要捕获这个事件,并...
1. **多选**:用户可以通过勾选复选框来选择多个选项。 2. **搜索功能**:在大型选项列表中,用户可以输入关键词进行搜索,快速定位所需选项。 3. **分组**:可以对选项进行分组,使用户更容易理解选项的结构。 4. *...
标题 "WEB页面下拉列表带复选框" 描述了一个常见的网页交互元素设计,它将传统的下拉列表与多选功能结合,用户可以在一个下拉菜单中看到多个可选项,并通过勾选复选框来选择多个值。这种设计在数据过滤、用户偏好...
它结合了传统的下拉列表和复选框的特性,使得在有限的空间内,用户能够方便地筛选和选择多个选项。以下是对这个主题的详细说明: 1. **下拉列表多选框**:传统的HTML `<select>` 元素只支持单选,但通过添加多选...
本主题将深入探讨如何实现一个下拉列表框(ComboBox)控件,该控件带有复选框功能,即"Winform 下拉带Checkbox 功能"。这种控件通常用于让用户在多个选项中进行多选操作。 首先,我们需要理解控件的基本构造。在C#...
在Bootstrap中,"select复选框"通常指的是一个下拉选择列表,其中包含多个可选的选项,用户可以通过勾选这些选项来做出选择。本篇文章将深入探讨如何在Bootstrap中实现带有全选功能的select复选框,以及相关的技术...
在JavaScript的世界里,下拉复选框控件是一种常见的用户界面元素,它结合了下拉菜单的紧凑性与多选框的功能性。这种控件在网页应用中广泛使用,允许用户从一组选项中选择多个项,同时保持界面的整洁。在给定的标题和...
jQuery,作为一款强大的JavaScript库,提供了丰富的插件和方法来增强复选框的功能和用户体验。本篇文章将详细探讨jQuery中的复选框组件,特别是基于jQuery UI的Multiselect插件。 ### jQuery 复选框基础 在HTML中...
4. **Magicsuggest**:从文件名称列表中我们可以推断,`magicsuggest`可能是一个JavaScript库或者插件,专为实现具有搜索功能的下拉复选框而设计。这个库可能提供了丰富的API和配置选项,开发者可以通过它轻松地在...
本篇文章将详细讲解如何在 Laravel-Admin 中使用 "CheckboxTree" 组件,这是一个用于实现树状复选框功能的插件,特别适合处理涉及多级分类或权限分配的问题。 首先,我们需要了解 "CheckboxTree" 的基本概念。在 ...
但在多选模式下,用户可以勾选多个选项,这通常通过添加复选框或者允许用户通过键盘快捷键或拖放操作来实现。在JavaScript中,可以使用数组来存储已选中的项,并通过事件监听来处理选择状态的改变。 其次,搜索功能...
这通常通过添加复选框或允许用户通过按住Ctrl或Shift键来实现。在HTML中,可以使用`<select multiple>`属性来创建一个多选的下拉框。然而,对于多选的搜索下拉框,可能需要自定义更复杂的逻辑来处理搜索结果和选中...