Extjs学习总结之16组件component

我们看过了面板组件，表单组件，还有一些弹出对话框组件等等，那么肯定不只这些组件，下面我们就来学习一下extjs还有其他什么组件，以及他们的使用方式。

 

component.js:

Ext.onReady(function(){
	/*******************用户名和密码************************/
	var txtName = new Ext.form.TextField({
		name:"txtName",
		fieldLabel:"姓名",
		width:200
	});
	
	var txtPassword = new Ext.form.TextField({
		name:"txtPassword",
		fieldLabel:"密码",
		inputType:"password",
		width:200
	});
	
	/*******************单选框/组************************/
	/**
	 * 和文本框不同，选择框有两个值，实际值和显示值。
	 * 显示值通过boxLabel指定，而实际值由inputValue指定，inputValue选项值将传送到服务器。
	 * RadioGroup将Radio分组。
	 */
	
	//性别男 单选
	var rdaSexBoy = new Ext.form.Radio({
		name:"rdaSex",
		inputValue:"男",//实际值
		boxLabel:"男",//显示值
		checked:true//默认是男
	});	
	
	//性别女 单选
	var rdaSexGirl = new Ext.form.Radio({
		name:"rdaSex",
		inputValue:"女",
		boxLabel:"女",
		width:150
	});
	
	//性别分组
	var grpSex = new Ext.form.RadioGroup({
		name:"sex",
		fieldLabel:"性别",
		items:[rdaSexBoy,rdaSexGirl],
		width:100
	});
	
	/*********************出生日期***********************/
	/**
	 * Ext.form.DateField在原来Ext.DatePicker的基础上多了一个文本框
	 * 默认的日期格式为m/d/Y  value是Date对象
	 * 可以通过getValue()得到Date对象，通过getRawValue()得到String数据
	 */
	var dateBirthday = new Ext.form.DateField({
		name:"dateBirthday",
		fieldLabel:"出生日期",
		width:200,
		format:"Y-m-d", //指定日期格式
		value:new Date() //默认当前日期
	});
	
	/*********************爱好***********************/
	/**
	 * Ext.form.Checkbox类是复选框的再次封装，选项配置和Radio基本相同，
	 * Ext.form.CheckboxGroup为复选框提供逻辑分组，用法和单选组相同
	 */
	var chkHobby1 = new Ext.form.Checkbox({
		name:"chkHobby",
		inputValue:"钓鱼",
		boxLabel:"钓鱼",
		checked:true
	});
	var chkHobby2 = new Ext.form.Checkbox({
		name:"chkHobby",
		inputValue:"洗桑拿",
		boxLabel:"洗桑拿"
	});
	var chkHobby3 = new Ext.form.Checkbox({
		name:"chkHobby",
		inputValue:"网友聚会",
		boxLabel:"网友聚会"
	});
	var chkHobby4 = new Ext.form.Checkbox({
		name:"chkHobby",
		inputValue:"打保龄球",
		boxLabel:"打保龄球"
	});
	
	
	var grpGobby = new Ext.form.CheckboxGroup({
		name:"hobby",
		fieldLabel:"您的爱好",
		items:[chkHobby1,chkHobby2,chkHobby3,chkHobby4],
		width:300
	});
	
	/*********************最高学历***********************/
	
	//准备数据
	var data = [
		[1,"博士"],
		[2,"硕士"],
		[3,"研究生"],
		[4,"本科"],
		[5,"专科"],
		[6,"中专"],
		[7,"文盲"]
	];
	//准备代理 三种类型 这里选择内存代理
	var proxy = new Ext.data.MemoryProxy(data);
	//数据结构和格式
	var Edu = Ext.data.Record.create([
		{name:"eid",type:"int",mapping:0},
		{name:"ename",type:"string",mapping:1}
	]);
	
	var reader = new Ext.data.ArrayReader({},Edu);
	var store = new Ext.data.Store({
		proxy:proxy,
		reader:reader
	});
	
	store.load();//加载数据
	//创建下拉列表框
	var chkEdu = new Ext.form.ComboBox({
		name:"chkEdu",
		fieldLabel:"最高学历",
		store:store,
		mode:"local",
		triggerAction:"all",
		emptyText:"请选择最高学历",
		displayField:"ename",
		valueField:"eid",
		value:3
	});
	
	/*********************最喜欢的数字***********************/
	/**
	 * Ext.form.NumberField其实就是一个文本框，特殊性在于限定用户的输入，只能输入数字，
	 * 包括小数和整数，如果用户不小心输入了两个或者两个以上的小数点从第二个小数点开始到最后都会被清除
	 */
	var numLove = new Ext.form.NumberField({
		name:"numLove",
		fieldLabel:"最喜欢的数字"
	});
	
	/*********************家庭住址***********************/
	/**
	 * Ext.form.TextArea 允许输入多行
	 */
	var areaAddress = new Ext.form.TextArea({
		name:"areaAddress",
		fieldLabel:"家庭住址",
		width:500,
		height:50
	});
	
	/*********************上班时间***********************/
	/**
	 * new Ext.form.TimeField是一个特殊的ComboBox方便用户选择某个时间点，
	 * 默认每隔15分钟一个选择点，用户可以自定义，包括时间长短和格式。
	 * format用于定义时间格式，默认为12小时制，如果符合生活习惯，一般为24小时，
	 * 该选项必须手动设置为"H:i"   increment为每隔多长时间
	 * 
	 * 如果希望限制时间范围，可以使用minValue和maxValue做到默认是0点和24点
	 */
	var timeWork = new Ext.form.TimeField({
		name:"timeWork",
		fieldLabel:"上班时间",
		increment:30,
		format:"H:i"
	});
	
	/*
	 * var timeWork = {
	 * 		xtype:"timefield",
	 * 		name:"timeWork",
	 *		fieldLabel:"上班时间"
	 * }
	 */
	
	/*********************个人简历***********************/
	/**
	 * 在线编辑器Ext.form.HtmlEditor可以为输入的文字设定格式。满足一般性需求。
	 */
	var htmlIntro = new Ext.form.HtmlEditor({
		name:"htmlIntro",
		fieldLabel:"个人简历",
		enableLists:false,
		enableSourceEdit:false,
		height:150
	});
	
	/*********************照片***********************/
	/**
	 * Ext.form.TextField 一个普通的文本域，区别在于inputType:"file",
	 * 这就成为了一个File文件上传表单
	 */
	var txtPhoto = new Ext.form.TextField({
		name:"txtPhoto",
		inputType:"file",
		fieldLabel:"照片",
		width:500
	});
	
	/*********************提交按钮***********************/
	
	var btnSubmit = new Ext.Button({
		text:"提交",
		handler:function(){
			f.getForm().submit({
				success:function(form,action){
					form.items.each(function(field){
						if(field.isFormField){
							alert(field.getName()+" = "+field.getValue());
						}
					});
				},
				failure:function(){
					Ext.MessageBox.alert("","对不起,表单提交失败");
				}
			});
		}
	});
	
	/*********************重置按钮***********************/
	
	var btnReset = new Ext.Button({
		text:"重置",
		handler:function(){
			f.getForm().reset();
		}
	});
	
	
	/*********************创建面板把组件放在面板上***********************/
	
	var f = new Ext.form.FormPanel({
		url:"../../../componentServlet",
		method:"post",
		renderTo:"a", //<div id="a"></div>
		title:"新增员工",
		style:"padding:10px",
		frame:true,
		labelAlign:"right",
		width:650,
		autoHeight:true,
		
		//把组件依次的放置在面板上
		items:[
			txtName,
			txtPassword,
			grpSex,
			dateBirthday,
			grpGobby,
			chkEdu,
			numLove,
			areaAddress,
			timeWork,
			htmlIntro,
			txtPhoto
		],
		buttons:[btnSubmit,btnReset]
	});	
});

效果图真挺不错的：