`

Ext.form.ComboBox简单用法

 
阅读更多
//二维数组,保存年份的值和文本,文本作显示用
var year = [['2005', '2005'], ['2006', '2006'], ['2007', '2007'],
	    ['2008', '2008'], ['2009', '2009'], ['2010', '2010'],
	    ['2011', '2011'], ['2012', '2012']];
//SimpleStore=Store+MemoryProxy+ArrayReader
var storeyear = new Ext.data.SimpleStore({
//在此创建了两列数据.第一列列名为value,用于存储值
//第二列列名为text,用于存储显示文本
		  fields : ['value', 'text'],
		  data : year
		});
var yearCombox = new Ext.form.ComboBox({
	fieldLabel : '目标年份',//标签
	//hiddenName :隐藏域名,用于指示生成表单隐藏域.如将hiddenName改为name,则在传值时会传文本的值
	hiddenName : 'year',
	store : storeyear,
	//displayField :显示文本.名字必须跟storeyear定义的field(即名为text)一样
	displayField : 'text',
	//valueField :值.名字必须跟storeyear定义的field(即名为value)一样
	valueField : 'value',
	typeAhead : true,
	//mode :值local表明yearCombox需要的数据已经读取到本地,不需要再去后台读取
	//mode默认值为remote,当值为remote时,会默认加载数据.可以设mode为local,然后手工加载数据storeyear.load()
	//如果设置为remote又使用了storeyear.load(),则会读取两次
	mode : 'local',
	//triggerAction :默认值为query,如果值为query,它会使用autoComplete(自动完成)功能
	//在输入时将不匹配的过滤掉.而值为all时将显示所有列表
	triggerAction : 'all',
	editable : false,//是否可编辑,类似于readOnly属性
	emptyText : '请选择',// 默认提示信息
	allowBlank : false,//是否允许空
	blankText : '不能为空,请选择有效信息',//错误提示信息
	msgTarget : 'under',//在该组件的下面显示错误提示信息
	selectOnFocus : true,
	width : 200 //该combobox组件的宽
});

 可以注册事情监听选择的数据,代码如下:

//第一个参数'select'告诉yearCombox要监听选择事件
//第二个参数是处理这个事件的事件监听器,传入的参数为被监听的yearCombox本身
yearCombox.on('select',function(combo){
	alert(combo.getValue()+'-'+combo.getRawValue())
})

 

分享到:
评论

相关推荐

    EXT.form组件

    3. `combo`:`Ext.form.ComboBox`是下拉列表框组件,允许用户在预设的选项中进行选择,同时可以提供搜索功能以便快速定位选项。 4. `datefield`:`Ext.form.DateField`是日期选择组件,用户可以通过日历控件选择...

    EXT dojochina文本框示例Ext.form.TextField.rar

    1. **基本用法**:最简单的使用方式是在表单(`Ext.form.Panel`)中创建一个`Ext.form.TextField`,用于用户输入文本。例如: ```javascript var form = new Ext.form.Panel({ items: [{ xtype: 'textfield', ...

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

    在ExtJS中,可以使用`addListener`或`on`方法来添加事件监听器。 7. **UI反馈**:在用户进行全选或全取消操作后,界面上应有明显的反馈,例如改变全选按钮的文本或图标状态,以反映当前的选择状态。 8. **优化性能...

    Ext.Store的获取方法

    总结来说,在Ext.js中,获取`Ext.Store`应使用`Ext.getStore`方法,而不是`Ext.getCmp`,因为Store是通过`storeId`在内存中注册和管理的,而不是作为页面上的一个可视组件。同时,Store的设计方式有助于数据的安全性...

    Ext4.0 动态修改ComboBox选择项(本地模式)

    var comboBox = Ext.create('Ext.form.ComboBox', { fieldLabel: '选择项', store: ['选项1', '选项2', '选项3'], displayField: 'text', valueField: 'text', }); ``` 2. **添加或删除选项**: 当需要添加...

    可编辑表格Ext.grid.EditorGridPanel

    以上就是关于Ext.grid.EditorGridPanel的基本介绍和使用方法。在实际开发中,你可以根据项目需求调整配置,实现更多功能,如排序、过滤、分页等。通过深入理解和实践,你将能够熟练掌握这个强大的表格编辑组件。

    解决ext下拉列表全选和去全选功能

    var comboBox = Ext.create('Ext.form.field.ComboBox', { multiSelect: true, store: myStore, // 这里是你的数据存储 displayField: 'name', valueField: 'id' }); ``` 为了实现全选和去全选的功能,我们可以...

    extjs editgrid combobox 回显

    editor: new Ext.form.ComboBox({ id: "combo_process", store: store_process, valueField: "process_id", displayField: "process_name", forceSelection: true, typeAhead: true, triggerAction: 'all', ...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    Ext.create('Ext.form.field.ComboBox', { fieldLabel: '选择部门', store: Ext.create('Ext.data.TreeStore', { model: 'Department', root: { text: '所有部门', expanded: true, children: [ /* ... *...

    用Ext 2.0 combobox 做的省份和城市联动选择框的例程

    在本文中,我们将深入探讨如何使用Ext 2.0的ComboBox组件实现省份和城市联动选择框的功能。Ext是一个强大的JavaScript库,它提供了丰富的用户界面组件,包括ComboBox,用于创建下拉选择框。在这个例程中,我们将看到...

    ExtJSWeb应用程序开发指南(第2版)

    4.1.12 Ext.form.field.ComboBox组合框 4.1.13 Ext.form.field.Time时间选择框 4.1.14 Ext.form.field.Date日期选择框 4.1.15 Ext.form.field.Hidden隐藏字段 4.1.16 Ext.form.field.HtmlEditor编辑器字段 ...

    Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选

    1. **创建一个新的类**:定义一个继承自Ext.form.ComboBox的新类,添加必要的配置和方法来支持多选。 2. **配置store**:设置一个数据存储(Store)来保存可选项,确保每个记录都有一个表示选中状态的字段,如`...

    Extjs4下拉树菜单ComboBoxTree支持单选和多选并且支持展开选中指定节点的通用控件

    这个控件在实际项目中已经被广泛使用并证明了其稳定性和实用性,因此对于开发人员来说,了解和掌握这种控件的用法是非常有价值的。 ComboBoxTree是ExtJS4中的一个自定义组件,它结合了ComboBox(下拉框)和...

    ext form小例子

    在“EXT form小例子”中,我们将探讨EXTJS Form组件的基础用法,包括客户端验证和对`Ext.form.Vtype`的扩展。 1. EXTJS Form组件基础: - 表单创建:EXTJS中的表单通常通过`Ext.create`方法创建,如`Ext.create('...

    extjs帮助文档pdf版

    - **概述**:`Ext` 是 ExtJS 的核心命名空间,包含了全局的方法和属性。 - **用途**:提供了一个统一的入口来访问 ExtJS 库的功能,如创建组件、管理事件等。 - **常用方法**: - `Ext.create()`: 创建一个组件实例...

    Extjs fieldset两行两列布局

    new Ext.form.ComboBox({ // 创建ComboBox组件 hiddenName: 'ns', fieldLabel: '', triggerAction: 'all', store: new Ext.data.SimpleStore({ fields: ['name', 'code'], data: [['', '1'], ['', '0']] }),...

    ExtJS-3.4.0系列目录

    - `Ext.form.field.ComboBox`:下拉列表框,可以是静态或动态加载的。 - `Ext.form.field.Time`:时间选择器。 - `Ext.form.field.Date`:日期选择器。 - `Ext.form.field.Hidden`:隐藏字段。 - `Ext.form....

    Ext Js权威指南(.zip.001

    6.1.8 ext.domquery的使用方法 / 249 6.1.9 ext js选择器的总结 / 252 6.2 获取单一元素:ext.dom.element / 252 6.2.1 从错误开始 / 252 6.2.2 使用ext.get获取元素 / 253 6.2.3 使用ext.fly获取元素 / 256 ...

    Ext.data专题

    ### Ext.data专题详解 #### 一、Ext.data概述 **Ext.data** 是一个重要的JavaScript库...此外,通过 **Ext.data.Connection** 的封装,使得使用Ajax变得更加简单高效。这对于构建现代化的Web应用程序是非常有用的。

    ExtJs组件类的对应表

    3. **`combo`** - `Ext.form.ComboBox`,下拉框组件,用于创建下拉选择框。 4. **`datefield`** - `Ext.form.DateField`,日期选择项,用于输入日期。 5. **`timefield`** - `Ext.form.TimeField`,时间录入项,...

Global site tag (gtag.js) - Google Analytics