很多网友问我关于友财网在记帐页面,类型既可以选择,又可以直接录入是怎么做到的。(如果在下接菜单中没有想要帐单类型,可以直接在下拉菜单中录入,保存帐单后会直接保存刚新录入的类型,这样方便用户新增加类型,而不用再到类型维护中去维护再到记帐页面新增)。
这个ComboBox不是用EXT默认的ComboBox,而是我继承了EXT的ComboBox,自己写了个了js.其实也没有做多少工作,就是想让上面文本框有个name属性,这样就可以在Form提交时,一起把新录入的内容在后台得到了。
下面我把我写的代码贴出来,希望对有些朋友有所帮助。
/*
* Copyright(c) http://www.ucai8.com
*/
Ext.ux.ComboBox = Ext.extend(Ext.form.ComboBox, {
onRender : function(ct, position){
Ext.form.ComboBox.superclass.onRender.call(this, ct, position);
if(this.hiddenName){
this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id: (this.hiddenId||this.hiddenName)},
'before', true);
this.hiddenField.value =
this.hiddenValue !== undefined ? this.hiddenValue :
this.value !== undefined ? this.value : '';
}
if(Ext.isGecko){
this.el.dom.setAttribute('autocomplete', 'off');
}
if(!this.lazyInit){
this.initList();
}else{
this.on('focus', this.initList, this, {single: true});
}
if(!this.editable){
this.editable = true;
this.setEditable(false);
}
}
});
使用这个JS也很方便,和一般的Combo没有太多的别区:
//类型下拉菜单
var typeCombo = new Ext.ux.ComboBox({
fieldLabel: ftype,
name:'typeName',
id:'typeName',
store: combo_ds,
displayField:'name',
typeAhead: true,
lazyInit:false,
mode: 'local',
editable:true,
triggerAction: 'all',
emptyText:tEmpty,
allowBlank:false
});
效果可以看 友财网的记帐页面->新增帐单弹出页面的类型下拉菜单。友财网http://www.ucai8.com
如果有更好的办法,或意见都可以和我联系,我会虚心听取的:)
-------
我希望友财网可以成为大家学习EXT的一个例子,也希望友财网因为用了EXT而成为国内网站用户体验最好的网,功能最实用的网:)希望大家一起努力, 一起进步~~
分享到:
相关推荐
`Ext ComboBox`是实现下拉列表功能的基础组件,而“Ext combobox 下拉多选框带搜索功能”则是对其功能的一种扩展,旨在提高用户在大量数据中选择项时的效率。 在传统的单选`ComboBox`中,用户只能选择一个值,而...
在给定的压缩包文件中,我们看到包含了一个名为"DmaComboBox.js"的文件,这很可能就是Ext ComBobox的源代码实现。 首先,我们要理解Ext JS是一个用于构建富客户端Web应用的开源JavaScript框架。它提供了大量的UI...
而"Ext带图标Combobox"(Ext IconCombobox)是Ext JS中的一个特色组件,它是Combobox(下拉框)与图标相结合的一种扩展形式,为用户提供了更加直观且美观的交互体验。 **1. Ext Combobox基础** 首先,我们需要了解...
EXT下拉列表扩展lovcombo的实现,主要是对ComboBox进行了自定义,将下拉菜单中的选项呈现为一组可被勾选的复选框。这样做可以显著增强用户体验,特别是当选项数量较多时,用户可以快速地多选,而无需反复打开下拉...
在Ext JS这个强大的JavaScript框架中,多选下拉框(Multi Select ComboBox)是一种常见的组件,用于提供用户在多个选项中进行选择的功能。这种组件在数据输入、筛选或配置设置等场景中非常实用。本篇文章将深入探讨...
在提供的`combobox智能联想.txt`文件中,可能会包含实现上述功能的具体代码示例,包括EXTJS的配置、事件处理和可能的自定义扩展。通过阅读和理解这些代码,你可以更好地掌握EXTJS 3.x Combobox的智能联想功能,并...
标题中的“Ext扩展整理后吐血奉献”表明这是一篇关于ExtJS框架扩展的深入解析文章,作者可能在研究和整理过程中投入了大量的时间和精力。ExtJS是一个广泛用于构建富客户端Web应用的JavaScript库,它提供了丰富的组件...
- `combo.js`: 这个文件可能包含了关于ComboBox的EXT组件扩展或定制,与`lookup`中使用的ComboBox相关。 深入学习EXT的`lookup`机制,不仅需要理解EXT的基础组件和数据模型,还需要熟悉其事件驱动和MVC架构。通过...
总之,IconComboBox是一个增强EXT.form.Combobox功能的扩展控件,它结合了文本和图标,使得选择更加直观。通过自定义配置和渲染逻辑,我们可以轻松地将这个控件集成到EXT JS应用中,提升用户体验。通过阅读提供的...
在提供的文件`xyearcombobox.js`中,我们可以推测这可能是一个自定义的组合框(ComboBox)组件,它基于Ext JS的原生ComboBox进行了扩展或继承。组合框是Ext JS中的一个重要组件,用于提供下拉选择的功能。通过查看这...
多选下拉框在EXT JS中通常通过`Ext.form.CheckboxGroup`或`Ext.form.RadioGroup`类来实现,但在EXT3.2中,实现多选下拉框功能通常会使用`Ext.form.FieldSet`或`Ext.form.ComboBox`的自定义扩展。这类组件提供了复选...
总的来说,"基于EXT2.2的下拉复选框"是一个利用EXT2.2框架和相关插件实现的Web组件,它提供了在下拉列表中多选的功能,这通常涉及对EXT2.2的`ComboBox`组件进行扩展,使用自定义的JavaScript插件(如`Ext.mm....
在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...
Ext的表单(Form)和输入控件(例如ComboBox)功能强大,支持丰富的验证机制和自定义布局。用户可以通过这些控件收集用户输入的数据,并提供多种提交数据的方式。Ext JS还提供了丰富的验证规则,使得表单验证更为...
提供的`autoCompleteCBX.js`文件很可能是EXT自动完成下拉框控件的实现或扩展代码。这个文件可能包含了自定义的配置、事件处理程序或者其他增强功能,比如动态加载数据、自定义匹配算法等。如果需要深入理解这个控件...
同时,EXT的插件系统可以扩展组件功能,使其适应更广泛的业务场景。 通过这个可以直接运行的例子,新手可以直观地学习EXT的用法,理解组件的构造和事件处理,以及MVC模式的应用。同时,对于有经验的开发者来说,这...
这个组件扩展了EXTJS的原生下拉框(ComboBox)功能,增加了多选特性,使得用户可以在下拉菜单中选择多个选项。 EXTJS的ComboBox通常是一个单选下拉列表,用户只能从预定义的选项中选择一个。然而,"multicombo"组件...
IconCombo 是一个扩展了标准 ComboBox 组件的插件,它允许在下拉选项中添加图标,提高了用户界面的可识别性和美观度。开发者可以通过指定每个选项的图标类,实现不同的视觉效果,提升用户体验。 3. **...