在项目工程中,要对一张字典表的数据进行查询,以下拉框的形式在界面展示。
需要在添加记录、更新记录的时候用到(需要设置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
分享到:
相关推荐
"ext多选下拉列表的全选功能实现"这个主题聚焦于一个特定的UI组件——ExtJS库中的MultiComboBox,这是一种允许用户多选的下拉列表控件。在实际应用中,全选功能常常被用来快速选择所有选项,极大地提高了用户的操作...
使用方式:把资源放到libs下,在gradle app 中添加 低版本:compile files('libs/android-extend-1.0.6.aar') 高版本:implementation files('libs/android-extend-1.0.6.aar')
在Ext.js中,`Ext.Store`是用来管理数据的类,它通常与各种UI组件(如Grid、ComboBox等)关联,用于存储和检索数据。然而,获取`Ext.Store`的方式并不像获取其他Ext组件那样直接,因为Store并不是一个具有可视界面的...
extend: 'Ext.form.field.Date', alias: 'widget.clearabledatefield', // 添加其他配置项... }); ``` 2. **添加清空按钮**: 在组件的配置中,我们需要添加一个额外的工具按钮,用于清空日期。这可以通过`...
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 组件...
extend: 'Ext.form.field.ComboBox', alias: 'widget.iconcombobox', config: { iconField: null, iconAlign: 'left', showIconOnly: false }, onRender: function() { // 添加图标元素和样式 }, ...
EXT dojochina Ext类静态方法是一个关于EXT框架在JavaScript中的使用的主题,主要聚焦于Ext类的静态方法。EXT是一个强大的前端开发框架,由Sencha公司开发,它提供了丰富的组件库,用于构建复杂的Web应用程序。在EXT...
Ext深入浅出 数据传输 第10 章 数据存储与传输.....................................230 10.1 Ext.data简介............................................230 10.2 Ext.data.Connection....................230 ...
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...
9. `extend`: 这是EXT中的继承机制,允许从一个类(superclass)派生出新的类(subclass),并可以重写特定方法。`overrides`参数用于指定需要覆盖的方法列表。 10. `fly`: 创建一个全局共享的浮动元素,可以指定...
var provinceComboBox = Ext.create('Ext.form.ComboBox', { store: provincesStore, displayField: 'name', valueField: 'id', queryMode: 'local', listeners: { select: function(combo, record) { // 在...
Ext.extend(Ext.form.field.ComboBox, { initComponent: function () { this.multiSelect = true; this.callParent(); this.on('beforequery', this.handleBeforeQuery, this); }, handleBeforeQuery: ...
虹软ArcSoft 人脸识别AndroidDemo中有一个Lib通过公网始终无法下载,替换进去就好了。 依赖替换为 implementation files('libs/android-extend-1.0.5.aar')。 依赖库com.guo.android_extend
在JavaScript的世界里,Ext.js是一个强大的富客户端框架,它提供了丰富的UI组件和数据管理功能。在处理数据时,`Ext.data.Store`是一个至关重要的组件,它用于存储和管理数据,可以与各种数据源进行交互。当我们需要...
implementation(name: 'android-extend-release', ext: 'aar') } ``` 3. 最后,执行 `gradlew build` 或者在 Android Studio 中同步项目,使库被正确地引入到项目中。 总之,这个压缩包提供了一个名为 "android-...
关于这个原因有很多种,我只说下我遇到的 我这样 写Store来复用的 代码如下: DocStore = Ext.extend(Ext.data.Store,{ initComponent:function(){ this.proxy = new Ext.data.HttpProxy({url:this.url}); this....
Ext JS是一个强大的前端开发框架,它基于组件模型,提供了丰富的用户界面组件和强大的数据绑定机制。深入理解Ext类的构造方法对于高效开发至关重要。 首先,我们来解释一下什么是类构造方法。在面向对象编程中,...
7. **Ajax请求**:使用`Ext.Ajax.request`方法发送异步请求到服务器获取JSON数据。在响应回调中,解析JSON并更新表单内容。 以下是一个基本的示例代码片段,展示了如何动态加载JSON数据到表单: ```javascript // ...
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 {}). ...