textfield 全属性学习

 

<script type="text/javascript">
Ext.onReady(function(){
	
    Ext.QuickTips.init();// 浮动信息提示
    Ext.form.Field.prototype.msgTarget = 'side';// 设置控件的错误信息显示位置，主要可选的位置有：qtip,title,under,side,[elementId]
    
	var panel = new Ext.form.FormPanel({
		renderTo:document.body,
		title:'formPanel',
		frame:true, 			//渲染背景颜色
        labelWidth : 60,    	//显示的标签宽度为45 
        labelAlign : "right", 	//标签内容右对齐
        bodyStyle:'padding:2px 10px 10px 2px', //使内部元素和边框 有一定距离 
        width:600,
        defaults: {
            autoFitErrors: "false",
            labelSeparator: "：",
            labelWidth: 50,
            width: 150,
            allowBlank: false,
            blankText: "必填",
            msgTarget: "qtip"
        },
        items:[{
           xtype:'textfield',
           id:'name',
           allowBlank:false, //默认是true 设置为false则不允许为空 //要使提示内容出现，需要添加 Ext.QuickTips.init();
           blankText:'请输入数据',
           disabled:false, //默认是false
           emptyText:'请输入正确的数据',//默认是null
           fieldLabel:'用户名',//
           height:'auto',//默认是auto
           hidden:false,//默认是false
           hiddenLabel:false,// 默认是false
           hideMode:"offsets",//默认display,可以取值：display，offsets，visibility 
          // inputType:"text",//输入类型 这个很重要，可以是radio, text, password, file 默认是text 
           invalidText:"invalidText：只能够输入数字",//默认是：The value in this field is invalid 
           maxLength:100,//能够输入的内容的最大长度 
           maxLengthText:"输入内容太长了",//超出最大长度的设置信息 
           minLength:2,//能够输入的内容的最小长度
           minLengthText:"输入内容太短了",//没有达到最小长度的设置信息 
           readOnly:false,//内容是否只读，默认false 
           regex: /^\d+$/, //正则表达式　这里假设只允许输入数字　如果输入的不是数字　就会出现下面定义的提示信息 
           regexText:"regexText：只能够输入数字", //定义不符合正则表达式的提示信息  
       	   validateOnBlur:true,//默认是true,失去焦点时验证 
       	   validationDelay:300,//默认是250,验证延迟时间,毫秒数 
       	   validationEvent:"keyup", //验证事件　默认是keyup　可以是String/Boolean 
       	   //自定义的验证函数　当输入的数据不符合正则表达式的要求时，就会执行这个函数
       	   validator:function(){
       		   Ext.Msg.alert("提示信息","只能够输入数字");
       	   }, 
       	   
        } ],
		buttons:[{
			text:'重新加载性别',
			handler:function(){
				Ext.getCmp('gender').getStore().load();
				
			}
		},{
			text:'设置男',
			handler:function(){
				Ext.getCmp('gender').setValue('1'); //提交的值
				Ext.getCmp('gender').setRawValue('men'); //设置显示的值
			}	
		},{
			text:'取值',
			handler:function(){
				alert(Ext.getCmp('gender').getValue( ))
			}	
		}]
		
	});
});

</script>

 

评论

1 楼 yubenjie 2015-05-22  

不错，挺全的