读书人

form表单属性引见

发布时间: 2012-10-11 10:16:10 作者: rapoo

form表单属性介绍

<HTML><HEAD><TITLE>使用EXT输出HelloWorld</TITLE><!-- 导入extjs配置 … ... --><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><style type="text/css">.allow-float {clear:none!important;}.stop-float {clear:both!important;}.float-left {float:left;}</style><script type="text/javascript">Ext.onReady(function(){Ext.BLANK_IMAGE_URL='./../ext/resources/images/default/s.gif';Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = 'side';var form = new Ext.form.FormPanel({title: '提示信息(qtip)',labelSeparator: ':',bodyStyle: 'padding:5 5 5 5',height: 500,width: 300,frame: true,labelWidth: 60,labelAlign: 'right',applyTo: 'form',items:[       new Ext.form.TextField({       fieldLabel: '姓名',       id: 'userName',       selectOnFocus: true,       allowBlank: false,       regex: /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,       regexText: '用户名格式错误',       blankText: '请填写用户名'       }),       new Ext.form.TextField({       fieldLabel: '密码',       allowBlank: false,       blankText: '请填写密码',       inputType: 'password'       }),       new Ext.form.TextArea({       id: 'memo',       width: 150,       fieldLabel: '备注'       }),       new Ext.form.NumberField({       fieldLabel: '整数',       allowDecimals: false,//不允许输入小数       nanText: '请输入有效的整数', //无效数字提示       allowNegative: false//不允许输入负数       }),    new Ext.form.NumberField({       fieldLabel: '小数',       decimalPrecision: 2,//精确到小数点后两位       allowDecimals: true,//允许输入小数       nanText: '请输入有效的小数', //无效数字提示       allowNegative: false//不允许输入负数       }),    new Ext.form.NumberField({       fieldLabel: '数字限制',       baseChars: '12345' //输入数字范围       }),       new Ext.form.NumberField({       fieldLabel: '数值限制',       maxValue: 100,//最大值       minValue: 50,//最小值       minText: '小了',       maxText: '大了'              }),       new Ext.form.Radio({       name: 'sex',       fieldLabel: '性别',       boxLabel: '男'       }),    new Ext.form.Radio({       name: 'sex',       fieldLabel: '性别',       boxLabel: '女'       }),    new Ext.form.Checkbox({       name: 'swim',       fieldLabel: '爱好',       boxLabel: '游泳'       }),       new Ext.form.Checkbox({       name: 'walk',       fieldLabel: '爱好',       boxLabel: '散步'       }),       new Ext.form.Radio({       name: 'gender',       itemCls: 'float-left',       clearCls: 'allow-float',       fieldLabel: '性别',       boxLabel: '男'       }),    new Ext.form.Radio({       name: 'gender',       clearCls: 'stop-float',       hideLabel: true,       boxLabel: '女'       }),    new Ext.form.Checkbox({       name: 'hob',     itemCls: 'float-left',       clearCls: 'allow-float',       fieldLabel: '爱好',       boxLabel: '游泳'       }),       new Ext.form.Checkbox({       name: 'inter',       clearCls: 'stop-float',       hideLabel: true,       boxLabel: '散步'       }),       new Ext.form.TriggerField({       id: 'center',       fieldLabel: '触发字段',       hideTriggerClick: false,       onTriggerClick : function(e){       var center = form.findById("center");       alert(center.getValue());       }       })              ],buttons:[{text: '确定',handler: showValue}]});function showValue(){var memo = form.findById("memo");alert(memo.getValue());}});</script></HEAD><body id="form"></body></HTML>
?

读书人网 >Web前端

热点推荐