ext form表单各类组件示例

包括普通文本框,数字框,日期,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:'取消'},]
			});
		});

 效果图如下: