initList : function()
{
if (!this.list)
{
var cls = 'x-combo-list';
this.list = new Ext.Layer({
shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
});
var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
this.list.setWidth(lw);
this.list.swallowEvent('mousewheel');
this.assetHeight = 0;
if (this.title)
{
this.header = this.list.createChild({cls:cls + '-hd', html: this.title});
this.assetHeight += this.header.getHeight();
}
this.innerList = this.list.createChild({cls:cls + '-inner'});
this.innerList.on('mouseover', this.onViewOver, this);
this.innerList.on('mousemove', this.onViewMove, this);
this.innerList.setWidth(lw - this.list.getFrameWidth('lr'))
if (this.pageSize)
{
this.footer = this.list.createChild({cls:cls + '-ft'});
this.pageTb = new Ext.PagingToolbar({
store:this.store,
pageSize: this.pageSize,
renderTo:this.footer
});
this.assetHeight += this.footer.getHeight();
}
if (!this.tpl)
{
//alert(cls);
//x-combo-list-item
this.tpl = '<tpl for="."><div class="' + cls + '-item"><span class="unchecked" id="checkBox_{' + this
.displayField + '}"+ width="20"> </span>{' + this.displayField
+ '}</div></tpl>';
}
this.view = new Ext.DataView({
applyTo: this.innerList,
tpl: this.tpl,
singleSelect: true,
selectedClass: this.selectedClass,
itemSelector: this.itemSelector || '.' + cls + '-item'
});
this.view.on('click', this.onViewClick, this);
this.bindStore(this.store, true);
if (this.resizable)
{
this.resizer = new Ext.Resizable(this.list, {
pinned:true, handles:'se'
});
this.resizer.on('resize', function(r, w, h)
{
this.maxHeight = h - this.handleHeight - this.list.getFrameWidth('tb') - this.assetHeight;
this.listWidth = w;
this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
this.restrictHeight();
}, this);
this[this.pageSize ? 'footer' : 'innerList'].setStyle('margin-bottom', this.handleHeight + 'px');
}
}
},
bindStore : function(store, initial)
{
if (this.store && !initial)
{
this.store.un('beforeload', this.onBeforeLoad, this);
this.store.un('load', this.onLoad, this);
this.store.un('loadexception', this.collapse, this);
if (!store)
{
this.store = null;
if (this.view)
{
this.view.setStore(null);
}
}
}
if (store)
{
this.store = Ext.StoreMgr.lookup(store);
this.store.on('beforeload', this.onBeforeLoad, this);
this.store.on('load', this.onLoad, this);
this.store.on('loadexception', this.collapse, this);
if (this.view)
{
this.view.setStore(store);
}
}
},
分享到:
相关推荐
标题中的“带复选框且支持搜索功能的下拉列表1(1--14)”指的是一个具有特定功能的用户界面组件。在Web开发中,这样的组件通常用于提供一个多选项选择的功能,用户可以通过复选框来选取多个选项,并通过搜索框快速...
我们需要覆盖这个方法,使得在弹出下拉列表时,列表中的每个项目都带有复选框,并且这些复选框的状态与模型中的状态同步。 5. **处理用户交互**: 当用户在下拉列表中点击一个复选框时,我们需要捕获这个事件,并...
标题 "WEB页面下拉列表带复选框" 描述了一个常见的网页交互元素设计,它将传统的下拉列表与多选功能结合,用户可以在一个下拉菜单中看到多个可选项,并通过勾选复选框来选择多个值。这种设计在数据过滤、用户偏好...
它结合了传统的下拉列表和复选框的特性,使得在有限的空间内,用户能够方便地筛选和选择多个选项。以下是对这个主题的详细说明: 1. **下拉列表多选框**:传统的HTML `<select>` 元素只支持单选,但通过添加多选...
4. **Magicsuggest**:从文件名称列表中我们可以推断,`magicsuggest`可能是一个JavaScript库或者插件,专为实现具有搜索功能的下拉复选框而设计。这个库可能提供了丰富的API和配置选项,开发者可以通过它轻松地在...
1. **多选**:用户可以通过勾选复选框来选择多个选项。 2. **搜索功能**:在大型选项列表中,用户可以输入关键词进行搜索,快速定位所需选项。 3. **分组**:可以对选项进行分组,使用户更容易理解选项的结构。 4. *...
在JavaScript的世界里,下拉复选框控件是一种常见的用户界面元素,它结合了下拉菜单的紧凑性与多选框的功能性。这种控件在网页应用中广泛使用,允许用户从一组选项中选择多个项,同时保持界面的整洁。在给定的标题和...
jQuery,作为一款强大的JavaScript库,提供了丰富的插件和方法来增强复选框的功能和用户体验。本篇文章将详细探讨jQuery中的复选框组件,特别是基于jQuery UI的Multiselect插件。 ### jQuery 复选框基础 在HTML中...
在Bootstrap中,"select复选框"通常指的是一个下拉选择列表,其中包含多个可选的选项,用户可以通过勾选这些选项来做出选择。本篇文章将深入探讨如何在Bootstrap中实现带有全选功能的select复选框,以及相关的技术...
本主题将深入探讨如何实现一个下拉列表框(ComboBox)控件,该控件带有复选框功能,即"Winform 下拉带Checkbox 功能"。这种控件通常用于让用户在多个选项中进行多选操作。 首先,我们需要理解控件的基本构造。在C#...
但在多选模式下,用户可以勾选多个选项,这通常通过添加复选框或者允许用户通过键盘快捷键或拖放操作来实现。在JavaScript中,可以使用数组来存储已选中的项,并通过事件监听来处理选择状态的改变。 其次,搜索功能...
这通常通过添加复选框或允许用户通过按住Ctrl或Shift键来实现。在HTML中,可以使用`<select multiple>`属性来创建一个多选的下拉框。然而,对于多选的搜索下拉框,可能需要自定义更复杂的逻辑来处理搜索结果和选中...
通过上述步骤,我们成功地创建了一个带有滚动条的多选下拉列表框。这个组件不仅可以帮助用户方便地选择多个选项,还提供了简洁的操作方式,极大地提高了用户体验。在实际开发中,可以根据需求进一步定制这个组件,...