EXT学习笔记06下combox

最新推荐文章于 2021-07-26 20:07:55 发布

wang19841229

最新推荐文章于 2021-07-26 20:07:55 发布

阅读量176

点赞数

分类专栏： ajax 文章标签： EXT UI

ajax 专栏收录该内容

13 篇文章

订阅专栏

本文介绍ExtJS框架中Combox组件的配置与使用方法，包括只读模式、本地数据加载、触发动作设置等特性，并提供了具体代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

combox是EXT.form中最复杂的。<script>

			Ext.onReady(function(){
					new Ext.Window({
						modal:true,
						title:'添加用户',
						resizable:false,
						width:500,
						layout:'form',
						bodyStyle: 'padding:5px 5px 0',
						labelWidth:60,
						height:240,
						plain:true,
						buttonAlign:'center',  
						items:[{
							baseCls:'x-plain',
							layout:'column',
							items:[{
								 labelWidth:60,
								 layout:'form',
								 baseCls:'x-plain', 
								 columnWidth:.5,	 	
								 defaultType:'textfield',
								 items:[{
								 	fieldLabel:"姓名"
								 },{
								 	fieldLabel:"性别",
									xtype:"combo",
									width:130,
									readOnly:true,
									mode:"local",
									displayField:"sex",
									triggerAction:"all",
									value:"男",
									store:new Ext.data.SimpleStore({
										fields:["sex"],
										data:[["男"],["女"]]
									})
								 },{
								 	xtype:"datefield",
									format:"Y-m-d",
									readOnly:true,
								 	fieldLabel:"出生日期",
									width:130
								 },{
								 	fieldLabel:"地址"
								 }]
								   
							},{
								baseCls:'x-plain',
								labelWidth:60,
								layout:'form',
								columnWidth:.5,
								defaultType:'textfield',
								items:[{
									fieldLabel:"照片",
									inputType :"image",
									width:120,
									height:100 
								}]	
							}]							
						},{
							xtype:'textfield',
							fieldLabel:"详细地址",
							width:410
						},{
							xtype:'textfield',
							fieldLabel:"关系",
							width:410
						}],
						buttons:[{text:"确定"},{text:"取消"}],
						listeners:{
							"show":function(_window)
							{
								
								_window.findByType('textfield')[4].getEl().dom.scr="a.gif";
								
							}
						}  
					}).show();
			});
			
		</script>

属性

xtype：这个UI的xtype是combo

readOnly：只读

mode：模式这个很重要默认这个UI的数据是从服务器上请求，但是如果使用本地数据需要使用local

triggerAction：这个属性也有意思。combox默认选中一个选项之后在点下拉列表只能选择刚才选择的解决办法是把这个属性设为all。

value：默认值

最复杂的两个属性

displayField：显示的场所。这个属性是设定为store属性指定的数据提供原的fields一样的。

store：数据提供原：可以使用data包下的store结尾的类。我们用SimpleStore类实现，这个类只是本地数据。

fields：属性与combox中的displayField属性对应。

data：数据数组形式例如：[["男"],["女"]]