Ext之ComboBox用法详解

Ext.form.ComboBox 属性详解（见注释）及使用方法
定义一个ComboBox：

 

  var com = new Ext.form.ComboBox({
             store:comStore,
             id:'combo',
             emptyText:'视频播放',
             valueField:'value',
             displayField:'text',
             mode:'local',//数据模式，local代表本地数据， 默认'remote'
             value:'视频播放',//默认值,要设置为提交给后台的值，不要设置为显示文本
             triggerAction:'all',// 显示所有下列数据，一定要设置属性triggerAction为all

             hiddenName: 'hyear' , //提交到后台的input的name

             readOnly :  true , //是否只读

             allowBlank :  false , //不允许为空

             forceSelection:  true , //必须选择一个选项

             blankText: '请选择' //该项如果没有选择，则提示错误信息
    });

 

让我们来看一个代码实例：

Ext.onReady(function(){
	
	var com = new Ext.data.JsonStore({
		root:'rows',
		fields:['value','text']
	});
	
	var data = {
	      rows:[
		    {value:'0',text:'浪潮'},
			{value:'1',text:'华芯'}
		   ]
	};
	
	com.loadData(data);
	
	
	var panel = new Ext.Panel({
		title:'My Panel',
		renderTo:'container',
		collapsible:true,
		width:'400',
		height:'200',
		html:'<p>我是内容，我包含的html可以被执行</p>',
		titleCollapse:true,
		tbar:[
		    {
				xtype:'combo',
				store:com,
    		 	id:'combo',
             	emptyText:'视频播放',
             	valueField:'value',
             	displayField:'text',
				mode:'local',
             	triggerAction:'all'
			}
		],
		bbar:[
			{text:'我是按钮3'},
			{text:'我是按钮4'}		
		],
		buttons:[
			{text:'button1'},
			{text:'button2'}
		]
	});
	
	
});

 

    图片请看附件