看了下网上的下拉框多选扩展示例都太复杂了。本来很简单的东西却搞的那么复杂。
贴贴我的代码 很简单
var store = new Ext.data.SimpleStore({
fields: ['abbr', 'state', 'nick'],
data : Ext.exampledata.states // from states.js
});
var combo = new Ext.form.ComboBox({
store: store,
displayField:'state',
valueField:'abbr',
typeAhead: true,
mode: 'local',
//tpl:'<tpl for="."><div ><span><input type="checkbox" onclick="myclick(this)" value="{state}" /></span><span class="x-combo-list-item">{state}</span></div></tpl>',
tpl:'<tpl for="."><div class="x-combo-list-item"><span><input type="checkbox" {[values.check?"checked":""]} value="{[values.state]}" /></span><span >{state}</span></div></tpl>',
triggerAction: 'all',
emptyText:'select...',
// xtype:'button',
selectOnFocus:true,
applyTo: 'local-states',
onSelect : function(record, index){
if(this.fireEvent('beforeselect', this, record, index) !== false){
record.set('check',!record.get('check'));
var str=[];//页面显示的值
var strvalue=[];//传入后台的值
this.store.each(function(rc){
if(rc.get('check')){
str.push(rc.get('state'));
strvalue.push(rc.get('abbr'));
}
});
this.setValue(str.join());
this.value=strvalue.join();
//this.collapse();
this.fireEvent('select', this, record, index);
}
}
});
分享到:
相关推荐
ExtJS 是一个强大的JavaScript应用程序框架,用于构建交互式的Web...这个扩展可能包括了新的配置项、模板修改、事件处理、数据模型、方法以及行为调整等多个方面,使得在ExtJS应用中实现多选下拉框变得更加简单和便捷。
下面将详细解释EXTJS多选下拉框的实现原理和相关知识点。 首先,EXTJS的ComboBox组件本身是单选的,但通过扩展和自定义,可以实现多选功能。`lovcombo.js`文件很可能包含了实现这一功能的代码,其中可能包括了对...
Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选 本网站需要12积分下在的,现在共享都给大家
在ExtJS 3中,多选下拉框(LovCombo)是一种复合组件,它结合了下拉列表和“爱好者选择”(LOV,Lookup Value)的功能,允许用户在多个选项中进行复选选择。在Web应用中,这种组件常用于数据输入,特别是在数据库...
在EXTJS中,多选下拉框(Lovcombo)是一种常见的组件,它结合了选择列表和输入框的功能,允许用户从预定义的选项中选择多个条目。这个lovcombo是lov(List-Value)和combo(组合框)的结合体,提供了丰富的交互性和...
本文将深入探讨如何在ExtJS中实现多选下拉框功能,这在数据输入和选择场景中非常常见。我们将基于标题中的“3个代码”来讲解不同的实现方法,并结合提供的资源`demo`进行说明。 1. **ExtJS的MultiSelect ComboBox**...
本示例将详细讲解EXTJS中实现多选下拉框的代码及实践。 在"ext多选下拉框(代码及例子)"这个主题中,主要涉及到的知识点有: 1. **EXTJS的Combo组件**:Combo是EXTJS中的一种表单组件,它提供了下拉列表的功能,...
最后,`multiCombox` 文件名可能指的是一个包含实现多选下拉框功能的代码或示例的文件。如果你有这个文件,可以参考其中的内容,结合上述讲解来理解和学习多选ComboBox的实现。在实践中,不断探索和调试,你将更熟练...
本篇将重点讲解ExtJS中的一个扩展组件——多选下拉框,即“combobox”。 在ExtJS中,ComboBox是一个基本的输入组件,它结合了文本输入框和下拉列表的功能。默认情况下,ComboBox只允许用户选择一个选项。但是,通过...
该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能
1. **配置多选**:通过设置`multiSelect: true`属性,可以让ComboBox支持多选模式。用户可以通过Ctrl或Shift键进行多选。 2. **实时搜索**:实现搜索功能需要监听ComboBox的`keyup`事件,并在此事件处理器中应用...
在EXTJS4中,ComboBox是一个常用的组件,它用于创建下拉选择框,通常用于输入框的辅助选择。这个组件提供了一种用户友好的方式来从一组预定义的选项中进行选择。然而,根据你的标题和描述,你似乎遇到了一个特别的...
"ext4实现带复选框的多选下拉框"这个主题聚焦于如何在EXTJS 4框架中构建一个功能丰富的UI组件,它允许用户通过复选框进行多选操作,提升用户体验。EXTJS是一个流行的JavaScript库,提供了丰富的组件库来构建复杂的...
标题中的"extjs-Ext.ux.form.LovCombo下拉框"表明我们要讨论的是EXTJS中的一个特定组件,它是EXTJS的扩展插件,用于实现具有多选功能的下拉框。这个组件在处理火狐浏览器兼容性问题上做了优化,解决了在火狐浏览器下...
本方法和用checkbox, listbox等控件和事件拼凑出来的不同,本方法是一个集成的独立控件,基本实现了控件的顺滑度,下拉框可悬浮等效果,可以认为是comboBox的升级版,使用方便,仅需引用编译好的DLL,直接在toolBox...
这个组件扩展了EXTJS的原生下拉框(ComboBox)功能,增加了多选特性,使得用户可以在下拉菜单中选择多个选项。 EXTJS的ComboBox通常是一个单选下拉列表,用户只能从预定义的选项中选择一个。然而,"multicombo"组件...
总的来说,通过分析和理解提供的源代码,开发者不仅可以实现多选下拉框的功能,还能深入理解ExtJS组件的自定义和扩展机制,这对于提高开发效率和创建复杂的前端交互具有重要意义。同时,这也是提升JavaScript和ExtJS...
在ExtJS 4.x框架中,ComboboxTree是一种特殊的组件,它将传统的下拉框与树形结构结合在一起,提供了一种更为灵活的用户输入方式。这种组件在数据选择上非常实用,尤其当数据层级关系复杂时,可以方便地进行多选或...