`
itfreeman
  • 浏览: 16159 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类

[原创] Ext extend Ext.form.ComboBox异步数据的下拉框控件

EXT 
阅读更多
在项目工程中,要对一张字典表的数据进行查询,以下拉框的形式在界面展示。
需要在添加记录、更新记录的时候用到(需要设置combox的初始值),实现了一下扩展。
添加时设置了value的效果

更新时设置值的效果



组件扩展:

Ext.namespace('Rvp.ux');

Rvp.ux.DictCombo = Ext.extend( Ext.form.ComboBox, {
		
	triggerAction : 'all' 	// 显示所有下列数据,一定要设置属性triggerAction为all
	,editable : true 		// 是否允许输入
	,typeAhead : true 		// 当输入一部分后,自动补齐为输入的部分内容
	,mode:'remote'
 	,valueField:'subId'
    ,displayField:'subName'
    
	,initComponent : function(){
		Rvp.ux.DictCombo.superclass.initComponent.apply(this,arguments);  

		// 必须设置此属性,否则提交到后台的为显示的中文text
		this.hiddenName = this.name;
		
		this.store = new Ext.data.JsonStore({
			// 貌似在new对象时设置了value会自动load,所以这里不需要load了。
			//autoLoad: this.autoLoad || false
			remoteSort : this.remoteSort || false
			,url : basePath + '/dictionaryAction.do'
			,baseParams : {
				typeCode : this.typeCode || null
				,actionConfig: this.actionConfig || 'typeCode'
				,parentId : this.parentId || 0
			}
			,root 	: 'root'
			,fields  : ['id', 'typeCode', 'parentId', 'subId', 'subName', 'memo', 'valid']
			,sortInfo: { field : 'subId', direction : 'ASC' }
		})
	}
	,setValue : function(v) {
                // 以下判断可能导致form中的重置按钮失效。
                // 如果combox的store中有value为0的值,必须要手动给该combox设置值为null(Ext.getCmp('comboxid').setValue(null))
                // 编辑时间 2010-05-20 17:51:04
		//if(!v){
		//	return;
		//}
        // 如果远程数据还没有加载,在设值之前先加载一次   
        if ( this.store.getCount() == 0 ) {
            this.store.on("load", function() {
                Rvp.ux.DictCombo.superclass.setValue.call(this, v);  
            }, this, {  
                single : false  // 此处true、false有什么区别?
            });  
            this.doQuery(this.allQuery, true);  
        } else {
			Rvp.ux.DictCombo.superclass.setValue.call(this, v);  
        }  
    }
});
Ext.reg('dictcombo', Rvp.ux.DictCombo); 

使用方式:

{
	xtype:'dictcombo'
	,typeCode : 4
	,fieldLabel : '收款方式(<font color=red>*</font>)'
	,id : 'payTypeSelect'
	,name : 'payType'
	,autoLoad: true
	,allowBlank: false
	,anchor : '95%'
	,value: 1
}
  • 大小: 39 KB
  • 大小: 36.6 KB
0
2
分享到:
评论

相关推荐

    ext多选下拉列表的全选功能实现

    "ext多选下拉列表的全选功能实现"这个主题聚焦于一个特定的UI组件——ExtJS库中的MultiComboBox,这是一种允许用户多选的下拉列表控件。在实际应用中,全选功能常常被用来快速选择所有选项,极大地提高了用户的操作...

    【1积分】android-extend-1.0.6.aar

    使用方式:把资源放到libs下,在gradle app 中添加 低版本:compile files('libs/android-extend-1.0.6.aar') 高版本:implementation files('libs/android-extend-1.0.6.aar')

    Ext.Store的获取方法

    在Ext.js中,`Ext.Store`是用来管理数据的类,它通常与各种UI组件(如Grid、ComboBox等)关联,用于存储和检索数据。然而,获取`Ext.Store`的方式并不像获取其他Ext组件那样直接,因为Store并不是一个具有可视界面的...

    ExtJs 带清空功能的日期组件

    extend: 'Ext.form.field.Date', alias: 'widget.clearabledatefield', // 添加其他配置项... }); ``` 2. **添加清空按钮**: 在组件的配置中,我们需要添加一个额外的工具按钮,用于清空日期。这可以通过`...

    Ext Js权威指南(.zip.001

    8.1.3 格式化输出数据:ext.string、ext.number、ext.date和ext.util.format / 389 8.1.4 超级模板:ext.xtemplate(包括ext.xtemplateparser和ext.xtemplatecompiler) / 393 8.1.5 模板的方法 / 396 8.2 组件...

    ext的扩展控件之IconComboBox

    extend: 'Ext.form.field.ComboBox', alias: 'widget.iconcombobox', config: { iconField: null, iconAlign: 'left', showIconOnly: false }, onRender: function() { // 添加图标元素和样式 }, ...

    EXT dojochina Ext类静态方法.rar

    EXT dojochina Ext类静态方法是一个关于EXT框架在JavaScript中的使用的主题,主要聚焦于Ext类的静态方法。EXT是一个强大的前端开发框架,由Sencha公司开发,它提供了丰富的组件库,用于构建复杂的Web应用程序。在EXT...

    Ext深入浅出 数据传输

    Ext深入浅出 数据传输 第10 章 数据存储与传输.....................................230 10.1 Ext.data简介............................................230 10.2 Ext.data.Connection....................230 ...

    Ext树创建说明.rar

    var NodeModel = Ext.data.Model.extend({ fields: ['text'] }); Ext.create('Ext.tree.Panel', { title: '我的树', width: 200, height: 300, store: store, rootVisible: true, renderTo: Ext.getBody...

    EXT核心API详解.doc

    9. `extend`: 这是EXT中的继承机制,允许从一个类(superclass)派生出新的类(subclass),并可以重写特定方法。`overrides`参数用于指定需要覆盖的方法列表。 10. `fly`: 创建一个全局共享的浮动元素,可以指定...

    找到的ExtJS实现多选下拉框3个代码

    Ext.extend(Ext.form.field.ComboBox, { initComponent: function () { this.multiSelect = true; this.callParent(); this.on('beforequery', this.handleBeforeQuery, this); }, handleBeforeQuery: ...

    Ext.data.Store 读取XML属性值

    在JavaScript的世界里,Ext.js是一个强大的富客户端框架,它提供了丰富的UI组件和数据管理功能。在处理数据时,`Ext.data.Store`是一个至关重要的组件,它用于存储和管理数据,可以与各种数据源进行交互。当我们需要...

    Extjs 继承Ext.data.Store不起作用原因分析及解决

    关于这个原因有很多种,我只说下我遇到的 我这样 写Store来复用的 代码如下: DocStore = Ext.extend(Ext.data.Store,{ initComponent:function(){ this.proxy = new Ext.data.HttpProxy({url:this.url}); this....

    EXT dojochina Ext类构造方法.rar

    Ext JS是一个强大的前端开发框架,它基于组件模型,提供了丰富的用户界面组件和强大的数据绑定机制。深入理解Ext类的构造方法对于高效开发至关重要。 首先,我们来解释一下什么是类构造方法。在面向对象编程中,...

    Ext 动态加载表单数据

    7. **Ajax请求**:使用`Ext.Ajax.request`方法发送异步请求到服务器获取JSON数据。在响应回调中,解析JSON并更新表单内容。 以下是一个基本的示例代码片段,展示了如何动态加载JSON数据到表单: ```javascript // ...

    android-extend-1.0.5.aar依赖库com.guo.android_extend

    虹软ArcSoft 人脸识别AndroidDemo中有一个Lib通过公网始终无法下载,替换进去就好了。 依赖替换为 implementation files('libs/android-extend-1.0.5.aar')。 依赖库com.guo.android_extend

    extjs的ComboBox 2级联动

    var provinceComboBox = Ext.create('Ext.form.ComboBox', { store: provincesStore, displayField: 'name', valueField: 'id', queryMode: 'local', listeners: { select: function(combo, record) { // 在...

    Ext.ux.UploadDialog

    Most configuration options are inherited from Ext.Window (see ExtJs docs). The added ones are: url - the url where to post uploaded files. base_params - additional post params (default to {}). ...

    Jquery实现$.fn.extend和$.extend函数_.docx

    在JavaScript中,jQuery库提供了两种扩展对象的方法,即`$.fn.extend`和`$.extend`。它们都用于增加或修改现有对象的功能,但应用场景不同。本文将深入解析这两种方法的实现原理和用途。 首先,`$.fn.extend`是用于...

Global site tag (gtag.js) - Google Analytics