{
//cls : 'key',
id:'noticeType',
xtype : 'combo',
fieldLabel : '通知类型',
labelSeparator : ':',
//value : '',
multiSelect : false,
//name: 'meetingType',
hiddenName : 'meetingClass',
valueField : 'dictdataCode',//'dictdataCode',
displayField : 'dictdataName',//'dictdataName',
store : meetingTypeDs,
/*new Ext.data.SimpleStore({
fields:['name','value'],
data:[['全部','0'],['会议','meeting001'],['其它','meeting002']]
}),*/
//typeAhead : true,
mode : 'local',// default: remote
triggerAction : 'all',
emptyText : '请选择数据项',
//selectOnFocus : true,
readOnly : false,
//editable : false,
anchor : '96%',
listeners:{
blur : function(combo){
var value= Ext.getDom('noticeType').value;
//根据手动输入值查询是否有匹配的数据
var result = meetingTypeDs.query('dictdataName',value,true,true);
if(result.getCount()!=1){//store没有匹配的数据,则按输入值查询
combo.setValue(value);
}
}
}
//lazyInit : true
}
重点说说自定义选项的添加和可编辑状态下的值同步的问题
1、可编辑状态下的值同步
有时候下拉择可能也要可编辑,即除了可选的那几个值,也可提供用户输入任意值的功能
以上代码即是这一需求的实现。思路是:
(1)为combo加上id值,这样可以获得可输入控件,是数据同步的前提
(2)将用户输入的值作为条件去store里查询,结果的数量为1表示store里有一条与用户输入的值一样,否则将用户输入的值赋给combo
(3)以上工作要在监听里执行
2、添加自定义的选择项
ext的combox很不友好,没有空值的选项。只能自己加上了
meetingTypeDs = new Ext.data.JsonStore({
url:'dict_getDictData.action?dictCode=meeting_type',
totalProperty : 'totalSize',
id : 'id',
root : 'list',
remoteSort:true,
fields:["dictdataCode","dictdataName"], //
listeners:{
//向已有数据中插入一条新的数据
load : function(store, records, options ){
var data = {'dictdataCode':'','dictdataName':'全部类型'};
var rs = [new Ext.data.Record(data)];
store.insert(0,rs);
}
}
});
最后抱怨一下ext的combox的不足:
1、不能方便的加上自己的缺省选择项,对store的要求太多。
2、提供了一量选择一项便再也不能恢复到始状态。提供了emptyText这一属性,却不太好用,实际应用中,我们经常需要恢复到空值状态,也就是什么都不先的状态。目前2.3版的ext还无法提供
分享到:
相关推荐
### ExtJS表单中的下拉框(ComboBox)手动添加空选项 在开发Web应用程序时,ExtJS 是一个非常强大的库,它提供了丰富的组件和API来帮助开发者构建复杂的用户界面。其中一个常用的组件就是`ComboBox`(组合框),它...
在EXTJS4中,`ComboBox` 是一个非常常用的组件,它提供了一个下拉选择框的功能。在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时就可以使用 `GridComboBox`。`GridComboBox` 结合了 `...
在本例中,我们将重点讨论如何在 ExtJS 2.0 中实现下拉列表功能。 下拉列表在 Web 应用程序中非常常见,通常用于提供可选的选项供用户选择。在 ExtJS 中,下拉列表可以通过创建 `Ext.form.ComboBox` 实现。这个组件...
本文将详细介绍ExtJS中常用表单组件的创建、应用以及验证和数据绑定等方面的知识,旨在帮助读者深入理解和掌握ExtJS表单的使用方法。 ### 表单面板(FormPanel)的创建 在ExtJS中,表单面板(FormPanel)是创建...
3. **`combo`** - `Ext.form.ComboBox`,下拉框组件,用于创建下拉选择框。 4. **`datefield`** - `Ext.form.DateField`,日期选择项,用于输入日期。 5. **`timefield`** - `Ext.form.TimeField`,时间录入项,...
ExtJS 中的 xtype 是一个非常重要的概念,它用于定义组件的类型,从而确定组件的行为和样式。xtype 是 ExtJS 的核心组件之一,它提供了大量的组件类型,满足不同场景下的需求。 基本组件 1. button - xtype: '...
Combobox是EXTJS中的一种表单字段,它结合了文本输入框和下拉菜单,允许用户从预定义的选项列表中选择一个值。默认情况下,所有的选项都会被加载到下拉菜单中,但通过添加分页功能,我们可以将大列表拆分成小块,...
- `Ext.form.FormPanel` 是 EXTJS 中用于创建表单的组件,它允许你添加各种表单元素如文本框、选择框等。 - 在实例中,`title` 属性定义了面板的标题,`frame` 为真表示面板具有边框,`plain` 设置为真让边框更...
总结来说,此代码段展示了EXTJS中如何创建一个具有交互性的表单,包括下拉列表的使用、事件监听、表单验证以及动态改变组件状态的方法。这种技术在Web应用中常用于实现用户界面的动态交互和数据验证,以提高用户体验...
这些标签指明了我们正在处理的是ExtJS 4版本,涉及到了Combo和Grid两个核心组件,以及对它们进行扩展的方法。 在提供的压缩包文件中,有三个文件: 1. **GridComboBox.js**:这个文件很可能是实现combogrid扩展的...
- **`combo` (Ext.form.ComboBox)**: 下拉框组件,提供了一个下拉列表供用户选择。 - **`datefield` (Ext.form.DateField)**: 日期选择项组件,用于输入日期值。 - **`timefield` (Ext.form.TimeField)**: 时间录入...
3. **`combo`:** 下拉框组件,用于创建下拉列表,通过`Ext.form.ComboBox`类实现。 4. **`datefield`:** 日期选择项组件,用于让用户选择日期,通过`Ext.form.DateField`类实现。 5. **`timefield`:** 时间录入项...
EXTJS中的组件多样,例如下拉列表有两种形式:Select和Combo。Select仅提供预设选项,而Combo则更强大,可以动态加载数据,甚至支持远程获取数据,并且无需刷新页面即可填充内容。EXTJS还提供了一款灵活的时间控件,...
6. **使用组件**:在EXTJS的视图(View)或面板(Panel)中,你可以像使用其他组件一样实例化lovcombo,并将其添加到布局中。记得在需要的时候调用`render`方法使其在页面上显示。 7. **事件监听**:EXTJS支持丰富...
而`ComboBox`则是一种下拉列表组件,用于提供一系列选项供用户选择。当这两种组件结合在一起时,可以实现用户在下拉列表中选择数据后,该数据能够在网格中实时更新显示的功能,即所谓的“回显”。 #### 2. **实现...
lovcombo(List of Values Combo)组件是ExtJS中用于实现列表选择的一个强大工具。它不仅支持单选,还能够实现多选功能,非常适合用来构建复杂的表单界面。通过配置lovcombo的数据源(store)和响应事件(select),可以...
在这些组件中,`lovcombo`(Love Combo)是一个特殊的下拉框组件,它结合了下拉列表和多选功能,常用于数据关联选择。 `lovcombo`的全称为“联动下拉组合框”,它的核心功能是实现两个或多个下拉框之间的数据联动,...
`xtype` 是ExtJS中的一个重要概念,它是组件类的简写形式,用于在配置对象中声明组件类型,使得代码更加简洁。理解并掌握ExtJS的各种`xtype`可以帮助开发者快速构建复杂的用户界面。 1. **基本组件**: - `button`...
在Extjs开发过程中,`xtype`(扩展类型)是极为重要的一个概念。它实际上是一种类型标识符,用于快速创建特定类型的组件实例。通过使用预定义的`xtype`值,开发者可以方便地构建出各种复杂的用户界面而无需编写大量...
在`view.js`中,我们使用`initComponent`方法来初始化组件,并设置初始状态。这里的关键是`selecttime`方法,它将在用户选择不同查询条件时被触发。 ```javascript // 初始化组件 me.getViewModel().set("showtime...