天天看點

Ext 入門的簡單 formPanel

Ext.onReady(function() {
	//	動态切換圖檔,不指派,講聯網ext官網查詢
	Ext.BLANK_IMAGE_URL = '../ext-2.2/resources/images/default/s.gif';
	//	初始化資訊提示框	
	Ext.QuickTips.init();
	// turn on validation errors beside the field globally
	//	定義統一錯誤提示的樣式 1、qtip 2、title 3、under 4、side
	Ext.form.Field.prototype.msgTarget = 'side';
	var bd = Ext.getBody();
	/* * ================ Simple form ======================= */
	bd.createChild({
				tag : 'h2',
				html : '簡單的form panel'
			});
	var simple = new Ext.form.FormPanel({
				labelWidth : 75,
				url : '#',
				frame : true,
				title : 'Ext.form.FormPanel',
				bodyStyle : 'padding:5px 5px 0',
				width : 350,
				defaults : {
					width : 230
				},
				defaultType : 'textfield',
				items : [{
							fieldLabel : 'First Name',
							name : 'first',
							allowBlank : false
						}, {
							fieldLabel : 'Last Name',
							name : 'last'
						}, {
							fieldLabel : 'Company',
							name : 'company'
						}, {
							fieldLabel : 'Email',
							name : 'email',
							vtype : 'email'
						}, 
						new Ext.form.TimeField({
									fieldLabel : 'Time',
									name : 'time',
									minValue : '8:00am',
									maxValue : '6:00pm'
								})
						],
				buttons : [{
							text : 'Save'
						}, {
							text : 'Cancel'
						}]
			});
	simple.render(document.body);

});