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())
})