`
j_butterfly
  • 浏览: 113692 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

扩展EXT Comobox功能的代码

阅读更多

     很多网友问我关于友财网在记帐页面,类型既可以选择,又可以直接录入是怎么做到的。(如果在下接菜单中没有想要帐单类型,可以直接在下拉菜单中录入,保存帐单后会直接保存刚新录入的类型,这样方便用户新增加类型,而不用再到类型维护中去维护再到记帐页面新增)。

    这个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而成为国内网站用户体验最好的网,功能最实用的网:)希望大家一起努力, 一起进步~~

3
0
分享到:
评论
3 楼 stevenzuo 2008-07-17  
你好,我想问一下,select 标签的 size 属性,在ext的comobox里面怎么体现出来的?
2 楼 j_butterfly 2008-04-11  
引用
如果分类有多种可以下拉后再分页显示么?

没有听懂是什么意思。。。
1 楼 xmx0632 2008-04-11  
如果分类有多种可以下拉后再分页显示么?搞得像这个http://msdn2.microsoft.com/zh-cn/library/ms978330.aspx一样

相关推荐

    Ext combobox 下拉多选框带搜索功能

    `Ext ComboBox`是实现下拉列表功能的基础组件,而“Ext combobox 下拉多选框带搜索功能”则是对其功能的一种扩展,旨在提高用户在大量数据中选择项时的效率。 在传统的单选`ComboBox`中,用户只能选择一个值,而...

    Ext ComBobox 附带完整附件

    在给定的压缩包文件中,我们看到包含了一个名为"DmaComboBox.js"的文件,这很可能就是Ext ComBobox的源代码实现。 首先,我们要理解Ext JS是一个用于构建富客户端Web应用的开源JavaScript框架。它提供了大量的UI...

    Ext带图标Combobox

    而"Ext带图标Combobox"(Ext IconCombobox)是Ext JS中的一个特色组件,它是Combobox(下拉框)与图标相结合的一种扩展形式,为用户提供了更加直观且美观的交互体验。 **1. Ext Combobox基础** 首先,我们需要了解...

    Ext下拉列表扩展lovcombo

    EXT下拉列表扩展lovcombo的实现,主要是对ComboBox进行了自定义,将下拉菜单中的选项呈现为一组可被勾选的复选框。这样做可以显著增强用户体验,特别是当选项数量较多时,用户可以快速地多选,而无需反复打开下拉...

    Ext多选下拉框

    在Ext JS这个强大的JavaScript框架中,多选下拉框(Multi Select ComboBox)是一种常见的组件,用于提供用户在多个选项中进行选择的功能。这种组件在数据输入、筛选或配置设置等场景中非常实用。本篇文章将深入探讨...

    extjs3.x combobox智能联想

    在提供的`combobox智能联想.txt`文件中,可能会包含实现上述功能的具体代码示例,包括EXTJS的配置、事件处理和可能的自定义扩展。通过阅读和理解这些代码,你可以更好地掌握EXTJS 3.x Combobox的智能联想功能,并...

    Ext扩展整理后吐血奉献

    标题中的“Ext扩展整理后吐血奉献”表明这是一篇关于ExtJS框架扩展的深入解析文章,作者可能在研究和整理过程中投入了大量的时间和精力。ExtJS是一个广泛用于构建富客户端Web应用的JavaScript库,它提供了丰富的组件...

    EXT 的一个例子lookup

    - `combo.js`: 这个文件可能包含了关于ComboBox的EXT组件扩展或定制,与`lookup`中使用的ComboBox相关。 深入学习EXT的`lookup`机制,不仅需要理解EXT的基础组件和数据模型,还需要熟悉其事件驱动和MVC架构。通过...

    ext的扩展控件之IconComboBox

    总之,IconComboBox是一个增强EXT.form.Combobox功能的扩展控件,它结合了文本和图标,使得选择更加直观。通过自定义配置和渲染逻辑,我们可以轻松地将这个控件集成到EXT JS应用中,提升用户体验。通过阅读提供的...

    Ext继承和扩展写的例子。

    在提供的文件`xyearcombobox.js`中,我们可以推测这可能是一个自定义的组合框(ComboBox)组件,它基于Ext JS的原生ComboBox进行了扩展或继承。组合框是Ext JS中的一个重要组件,用于提供下拉选择的功能。通过查看这...

    EXT3.2 多选下拉框

    多选下拉框在EXT JS中通常通过`Ext.form.CheckboxGroup`或`Ext.form.RadioGroup`类来实现,但在EXT3.2中,实现多选下拉框功能通常会使用`Ext.form.FieldSet`或`Ext.form.ComboBox`的自定义扩展。这类组件提供了复选...

    基于EXT2.2的下拉复选框

    总的来说,"基于EXT2.2的下拉复选框"是一个利用EXT2.2框架和相关插件实现的Web组件,它提供了在下拉列表中多选的功能,这通常涉及对EXT2.2的`ComboBox`组件进行扩展,使用自定义的JavaScript插件(如`Ext.mm....

    extjs-Ext.ux.form.LovCombo下拉框

    在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...

    EXT教程EXT用大量的实例演示Ext实例

    Ext的表单(Form)和输入控件(例如ComboBox)功能强大,支持丰富的验证机制和自定义布局。用户可以通过这些控件收集用户输入的数据,并提供多种提交数据的方式。Ext JS还提供了丰富的验证规则,使得表单验证更为...

    EXT自动完成(此处为自动添加邮箱后缀,可以添加其他内容)

    提供的`autoCompleteCBX.js`文件很可能是EXT自动完成下拉框控件的实现或扩展代码。这个文件可能包含了自定义的配置、事件处理程序或者其他增强功能,比如动态加载数据、自定义匹配算法等。如果需要深入理解这个控件...

    EXT例子,可以直接跑

    同时,EXT的插件系统可以扩展组件功能,使其适应更广泛的业务场景。 通过这个可以直接运行的例子,新手可以直观地学习EXT的用法,理解组件的构造和事件处理,以及MVC模式的应用。同时,对于有经验的开发者来说,这...

    ext下拉多选组件multicombo

    这个组件扩展了EXTJS的原生下拉框(ComboBox)功能,增加了多选特性,使得用户可以在下拉菜单中选择多个选项。 EXTJS的ComboBox通常是一个单选下拉列表,用户只能从预定义的选项中选择一个。然而,"multicombo"组件...

    Ext常用扩展插件实例收集

    IconCombo 是一个扩展了标准 ComboBox 组件的插件,它允许在下拉选项中添加图标,提高了用户界面的可识别性和美观度。开发者可以通过指定每个选项的图标类,实现不同的视觉效果,提升用户体验。 3. **...

Global site tag (gtag.js) - Google Analytics