欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Ext表单组件之textField

程序员文章站 2022-07-13 23:02:50
...
先看效果：
[img]http://lovebeyond.iteye.com/upload/attachment/132579/697c9555-5ff5-3b95-b6e4-a646c7d099ca.jpg[/img]
[size=large]只是简单的介绍textField相关的组件的应用！
其中也较为详细的介绍了formpanel和fieldset的应用，对于界面的布局来讲特别是对表单布局来讲formpanel的应用无疑是最频繁的，
formpanel是专门为表单设置的一种布局，所以设计到的配置项也比较多，同时它也是panel，即面板容器，熟悉JAVA的就知道其实不管是命名还是实现功能都有点模仿JAVA，甚至是整个组件的类组织形式，其实如果清楚整个源文件的组织结构的话学起来就快很多，做为基于对象的JS也是一样，从BoxComponent到Container再到field再到我们今天讲的textfield都是一层层的继承关系！我建议的是从上往下看，从最基础的类开始入手，其实就单个组件来讲属性并不多，我记得我自己刚接触EXT的时候随便点一个组件都的一堆的属性，其实这些属性都是继承过来，一层层关系搞清楚了，就觉得其实关系并不复杂！
从textfield来讲它又是NumberField, TextArea, TriggerField的父类，所以它的属性都被继承过去了，同时TriggerField作为ComboBox, DateField的父类，其实也可以看做是对TriggerField的实现，TriggerField也很少直接用到，作为ComboBox又是TimeField的父类，这样每个组件之间的关系就很明朗了，不要把每个组件单独来对待，要从大的容器和类的层次上去考虑!可能我上面对有些关键型术语表达的也不正确！别见怪！
也希望高手不要见笑！
先看代码！讲解都在代码里面！[/size]

textfield.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
	<head>
		<title>textfield.html</title>
		<style type="text/css">  
			body{background-color:#777777} 
			#form-tt{width: 350px;margin-left: auto;margin-right: auto;} 
		</style>  
		<link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" />
		<script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="../Ext/ext-all.js"></script>
		<script type="text/javascript" src="textfield.js"></script>
	</head>
	<body>
			<div id="form-tt"></div>
			<div id="mid">this is loaded local content</div>
	</body>
</html>


textfield.js

Ext.onReady(function(){
	Ext.QuickTips.init();//初始化错误信息提示函数
	Ext.form.Field.prototype.msgTarget = 'qtip';//设置错误信息显示方式

	var proviceDate = [{pname:'江西',pvalue:'jiangxi'},{pname:'湖南',pvalue:'hunan'},
										 {pname:'湖北',pvalue:'hubei'},{pname:'安徽',pvalue:'anhui'},
										 {pname:'其他',pvalue:'others'}];
	var provice_store = new Ext.data.JsonStore({
		data :proviceDate,
		fields :[{name:'provice_name',mapping:'pname'},{name:'provice_value',mapping:'pvalue'}]
	})
	var panel = new Ext.form.FormPanel({
		renderTo : 'form-tt',
		title:'textField的应用',
		frame:true,//是否渲染面板
		//autoLoad :'url.html',//加载外部的文件到panel里面
		formId :'fm1',//form的id属性，在不设置的情况下会自动生成
		contentEl :'mid',//加载本地资源到panel里面
		width:350,
		collapsible :true,//是否允许收起或展开
		tools :[{id:'toggle',qtip: '收起或展开panel',
						handler: function(event, toolEl, panel){
							//事件内容
						}},
					  {id:'Close',qtip: '关闭panel'},
					  {id:'minimize',qtip: '最小化panel'},
					  {id:'maximize',qtip: '最大化panel'},
					  {id:'down',qtip: '向下移动'},
					  {id:'up',qtip: '向上移东'},
					  {id:'refresh',qtip: '刷新panel'},
					  {id:'save',qtip: '保存panel'},
					  {id:'print',qtip: '打印panel'}],//还有更多，至于事件触发可以自己写
		autoHeight:true,//自动高度
		collapseFirst :true,//设置一开始时候是否收起或展开
		layout:'form',//设置布局方式
		buttonAlign :'right',//设置按钮的对齐方式
		defaults :{bodyStyle:"padding:2px"},
		items:[{
			xtype:'fieldset',
			title:'fieldSet标题',
			autoHeight:true,//自动高度
			animCollapse :true,//是否动画效果，这个经常配合checkboxToggle:true,或者collapsible:true时候设置，否则也没意义
			//collapsible :true,
			checkboxToggle:true,//效果是checkbox
			//collapsed :true,//表示为收起状态，配合checkboxToggle:true,或者collapsible:true
			checkboxName :'check',//checkbox 的name属性，配合checkboxToggle:true时使用
			labelWidth:80,//设置fieldLabel所在值的宽度
			labelAlign :'right',//设置label的对齐方式，默认为left
			items:[{
				xtype:'textfield',
				allowBlank :false,
				//grow:true,//设置输入框宽度是否根据字段内容宽度自动延伸和收缩
				//growMax:200,//自动延伸和收缩的最大宽度，当grow:true时才有效
				//growMin:50,//自动延伸和收缩的最小宽度，当grow:true时才有效
				//msgTarget :'side',//其值包括qtip,title,under,side,[element id]错误提示信息的现实方式
				blankText : '信息不能为空',//用于验证输入内容为空时候显示的错误信息，和allowBlank :false配合,还必须设置错误信息显示方式
				fieldLabel:'单行文本框',
				regex :/^[1-9]\d{5}$/,//匹配邮编号码的正则
				regexText:'输入的值不匹配，邮编必须是6位且首位不能为0的数字',//不存在匹配情况的提示信息
				emptyText :'请输入信息'//用默认文本代替空值
				//validator :function(){alert('所有验证规则已经都验证了')}//验证函数，在所有当前textfield的验证规则完成后自动执行
			},{
				xtype:'numberfield',
				fieldLabel:'数字文本框',
				allowDecimals :true,//是否允许输入小数
				allowNegative :false,//是否允许输入负数
				baseChars :'23456789',//允许输入的数字集合默认为'0123456789',使用当输入其他数字时候就屏蔽掉
				decimalPrecision :3,//小数点后面允许的位数多余的位数会自动四舍五入,配合allowDecimals :true一起使用,否则没意义
				decimalSeparator :',',//十进制的分割符,默认为'.',配合allowDecimals :true一起使用,否则没意义
				maxValue :99999,//最大可输入的数值
				maxText :'数值不能超过99999',//超过最大值时候的提示信息,配合maxValue 一起使用
				minValue :100,//最小可输入的数值
				minText :'数值不能小于100',//超过最大值时候的提示信息,配合minValue 一起使用
				nanText :'输入的格式不正确'
			},{
				//这个一般很少直接使用,而是通过其子类来使用,如DateField,ComboBox,TimeField
				xtype:'trigger',
				fieldLabel:'触发文本框',
				//hideTrigger :true,//是否隐藏触发按钮,默认为false
				autoCreate :false
			},{
				xtype:'datefield',
				fieldLabel:'datefield组件',
				disabledDates :['../05/2009','../06/2009'],//匹配规则可以看API,这里表示2009年每个月的5，6号不能选择
				disabledDatesText :'日期不对，每月的5，6号是不能选择的',//这个要配合disabledDates一起使用
				disabledDays :[0,6],//表示每星期的星期6和日不能选择
				disabledDaysText :'星期6和日不能选择',//这个要配合disabledDays一起使用
				format :'Y-m-d',//日期显示格式
				invalidText :'日期格式不正确',//当输入不正确的格式时候的提示信息
				minValue :'01/01/1900',//可以是字符串和日期格式
				minText:'超出最小值范围',
				maxValue:new Date(),
				maxText:'最大日期不得大于当天日期',
				showToday :true//是否显示日期选择面板下面的'today'按钮,默认为显示true
				//triggerClass :'className'//触发事件时候的CSS样式，一般默认就行
			},{
				xtype:'combo',
				fieldLabel:'combo组件',
				//allQuery :'all_provice',//当需要向服务器提交全部查询数据的时候需要设置的字段作为表示
				store:provice_store,//绑定是数据源
				mode : 'local',//设置下拉列表读取数据的模式,local表示本地读取，remote表示远程读取
				displayField :'provice_name',//被显示在下拉列表框中的值所对于的字段名，比如本类中省份对应的provice_name
				valueField : 'provice_value',//设置数据值对应的字段
				forceSelection : true,//是否严格匹配列表中的值，true表示只能输入列表中的值
				editable:true,//是否可以编辑
				forceSelection : true,//当获取焦点的时候立即选择一个已存在的列表项,与editable:true一起使用,否则无意义
				//transform :'idName',//通过ID或者节点把页面中SELECT列表转化为COMBO列表项
				triggerAction : 'all',//单击触发按钮的时候显示全部查询的数据,默认为query,设置all会执行allQuery查询
				typeAhead : true,//自动补全
				typeAheadDelay :300,//自动补全的延迟毫秒数，默认250
				hiddenName :'provice',//隐藏字段，如果设置服务器可以通过这个字段接受值	
				hiddenId :'provice',//如果在hiddenName存在的情况下如果此值没有设置则默认为hiddenName的值
				lazyInit :true,//延迟加载,
				lazyRender :true,//延迟渲染
				//pageSize :2,//分页查询，当大于0时进行自动分页,只有在mode : 'remote'情况下有效
				queryParam :'search_provice',//查询参数,涉及到和后台交互
				minChars :1,//自动选择匹配数据并显示下拉列表信息的最小字符数量,mode:'remote'是为4,mode:'local'为0
				handleHeight:10//设置下来手柄的高度
			},{
				xtype:'timefield',
				fieldLabel:'timefield组件',
				format :'h:i',//设置时间格式
				increment :30//默认为15
			},{
				//这个组件很简单，就是textfield的单行成为多行！
				xtype:'textarea',
				fieldLabel:'textarea组件',
				width:165
			}]
		}],

		buttons:[{text:'提交'},{text:'重置'}]
	})
})


附上源码,IE7.0和FF环境下运行完全OK！
相关标签： Extjs textfield Ext 设计模式 javascript

上一篇： jquery获取select多选框选中的值

下一篇： Ext学习笔记05 - UI组件 - Panel,TextField

推荐阅读