先看效果：
[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
textfield.js
附上源码,IE7.0和FF环境下运行完全OK！
[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！
扫一扫
988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
