ext form表单各类组件示例

ExtJS表单组件示例

最新推荐文章于 2021-06-18 12:32:46 发布

最新推荐文章于 2021-06-18 12:32:46 发布 · 206 阅读

文章标签：

#EXT

extjs 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用ExtJS框架创建的表单示例，包括多种输入组件如文本框、数字框、下拉选择框、日期选择器、时间选择器、多行文本框以及富文本编辑器等。此外还展示了如何实现单选和多选功能。

包括普通文本框,数字框,日期,radio,checkbox等

Ext.onReady(function(){
			Ext.QuickTips.init();
			var form = new Ext.form.FormPanel({
				renderTo:Ext.getBody(),
				title:'form示例',
				labelAlign:'right',//右对齐
				labelWidth:70,
				frame:true,
				width:600,
				height:500,
				items:[{
					layout:"column",
					items:[{
						xtype:'fieldset',
						columnWidth:.7,//列布局中占70%列宽
						checkboxToggle:true,//在框中打钩则显示
						title:'输入',
						defaults:{width:300},//items中各个框的默认宽度
			//			defaultType:'textfield',//默认类型
						items:[{
							xtype:"textfield",
							fieldLabel:"文本",
							name:'text'
						},{
							xtype:"numberfield",
							fieldLabel:"数字",
							name:'number'
						},{
							xtype:"combo",
							fieldLabel:"选择",
							emptyText:"--请选择--",
							displayField:'text',
							valueField:"value",
							mode:'local',
							triggerAction:'all',
							editable:false,
							store:new Ext.data.SimpleStore({
								fields:['text','value'],
								data:[['text1','value1'],['text2','value2']]
							}),
							name:'combo'
						},{
							xtype:"datefield",
							fieldLabel:"日期",
							name:'date'
						},{
							xtype:"timefield",
							fieldLabel:"时间",
							name:'time'
						},{
							xtype:"textarea",
							fieldLabel:"多行文本",
							height:80,
							name:'area'
						},{
							xtype:'hidden',
							name:'hidden'
						}]
					},{
						columnWidth:.3,
						items:[{
							xtype:'fieldset',
							checkboxToggle:true,
							title:'多选',
							hideLabels: true,
							style:'margin-left:10px;',
							bodyStyle:'margin-left:20px',
							items:[{
								xtype:'checkboxgroup',
								defaultType:'checkbox',
								columns:1,
								items:[{
									boxLabel:'埃尔伯',
									value:'1',
									name:'check'
								},{
									boxLabel:'马凯',
									value:'2',
									name:'check'
								},{
									boxLabel:'托尼',
									value:'3',
									name:'check'
								},{
									boxLabel:'戈麦斯',
									value:'4',
									name:'check',
									checked:true
								},]
							}]
						},{
							xtype:'fieldset',
							title:'单选',
							checkboxToggle:true,
							hideLabels: true,
							style:'margin-left:10px;',
							bodyStyle:'margin-left:20px',
							items:[{
								xtype:'radiogroup',
								columns:1,
								defaultType:'radio',
								items:[{
									boxLabel:'里贝里',
									name:'player'
								},{
									boxLabel:'罗本',
									checked:true,
									name:'player'
								},]
							}]
						}]
					}]
				},{
					layout:'form',
					labelAlign:'top',
					items:[{
						xtype:'htmleditor',
						fieldLabel:'编辑器',
						anchor:'95%'//占据宽度
					}]
				}],
				buttons:[{text:'保存'},{text:'读取'},{text:'取消'},]
			});
		});

效果图如下: