`
y1d2y3xyz
  • 浏览: 253110 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Ext表单组件之textField

ExtjstextfieldExt设计模式javascript 
阅读更多
先看效果：

只是简单的介绍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的父类，这样每个组件之间的关系就很明朗了，不要把每个组件单独来对待，要从大的容器和类的层次上去考虑!可能我上面对有些关键型术语表达的也不正确！别见怪！
也希望高手不要见笑！
先看代码！讲解都在代码里面！

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！
  • 大小: 30.8 KB
2
顶
0
踩
分享到：
| Ext表单组件实现用户注册
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics