EXTjs 학습 노트 (5)

프로젝트 에서 사용 자 는 업무 규칙, 이상 등 상황 에 부합 되 지 않 는 알림 에 대해 요구 가 있 습 니 다. alert 등 팝 업 상 자 를 사용 하지 않 고 유동 상 자 를 사용 하여 대체 하 는 것 을 권장 합 니 다.이것 은 사용자 체험 에 있어 서 매우 좋 은 제안 이다. 왜냐하면 alert 는 사람 을 귀 찮 게 하고 하나하나 팝 업 은 사람 을 짜증 나 게 하고 두려움 을 느끼 게 하기 때문이다.프로젝트 의 현재 유동 상 자 는 div 로 이 루어 집 니 다. 비교적 부 드 러 운 바탕색 설정 이 적당 한 크기 를 추가 한 다음 에 사용 할 때 이 div 구성 요 소 를 사용 하여 힌트 를 줍 니 다. div 가 표시 할 위치 와 표시 할 문 자 를 설정 하고 또 하 나 는 얼마나 오래 설정 하여 사라 지 는 지 설정 하 는 것 입 니 다. 이것 은 좋 고 좋 은 사용자 체험 을 할 수 있 습 니 다.Ext 는 이 를 완전히 고려 하여 매우 아름 답 게 실현 하고 응용 하 였 으 며 이에 대해 학습 하 겠 습 니 다.
     Ext 는 기본적으로 tips 유동 상 자 를 표시 하지 않 습 니 다. 초기 화 코드 를 추가 해 야 합 니 다.
 
1. tips 초기 화

Ext.QuickTips.init();

 
2. 구성 요소 에 tips 정보 와 tips 형식 추가
   

			var btn3 = new Ext.Button({
						renderTo : Ext.getBody(),
						text : "Tips",
						width : "200",
	    				                tooltip : "tipsTest！",
						tooltipType : "qtip",					});

 
3. 테스트 효과
button 에 마 우 스 를 올 리 면 "tipsTest" 가 표 시 됩 니 다.
그리고 tips 알림 을 열 면 textField 구성 요소 가 설정 되 어 있 습 니 다. allowBlank: false 는 이 구성 요소 에 대응 하 는 값 이 비어 있 으 면 안 된다 는 것 을 알려 줍 니 다.
 
4. 더 강력 한 검사 증가
    문자 의 길이 검사, 형식 검사 등 을 추가 할 수 있 습 니 다. 형식의 검 사 는 주로 정규 표현 식 을 통 해 이 루어 집 니 다. EXT 는 자주 사용 하 는 규칙 을 패키지 하여 정규 표현 식 을 작성 하지 않 아 도 됩 니 다. 예 를 들 어 URL, email 등 입 니 다.
 
예:

									name : "password",
									fieldLabel : "  ",
									inputType : "password",
									allowBlank : false,
									xtype : "textfield",
									minLength:6,
									minLengthText:"        6   ",
									maxLength: 10,
									maxLengthText: "        10   "

 
 위의 코드 는 이미 분명하게 말 해서 실현 이 상당히 간단 하 다.
 
소결:
ext 는 검증 의 알림 과 검증 의 규칙 과 방식 을 잘 실현 하고 더 좋 은 사용자 체험, 더 간단 한 인 코딩 방식 을 만 들 었 습 니 다.
 
실례:
일반적인 구성 요소 와 검 사 를 포함 하 는 코드 를 보 여 줍 니 다:

Ext.onReady(function() {
			Ext.QuickTips.init()
			var f = new Ext.FormPanel({
						url : 'MyServlet',
						method : 'post',
						baseParams : {
							sex : " "
						},
						defaults : {
							width : 230
						},
						defaultType : 'textfield',
						title : "Form",
						width : "700",
						height : "600",
						bodyStyle : "padding,6px",
						frame : true,
						items : [new Ext.form.TextField({
											name : "userName",
											allowBlank : false,
											fieldLabel : "   "
										}), 
								{
									name : "password",
									fieldLabel : "  ",
									inputType : "password",
									allowBlank : false,
									xtype : "textfield",
									minLength:6,
									minLengthText:"        6   ",
									maxLength: 10,
									maxLengthText: "        10   "
								}, {
									name : "photo",
									fieldLabel : "  ",
									inputType : "file",
									allowBlank : false,
									xtype : "textfield"
								}, {
									name : "date",
									fieldLabel : "  ",
									width : 200,
									format : "Y-m-d",
									value : new Date(),
									xtype : "datefield"
								},

								{
									name : "sex",
									inputValue : "0",
									boxLabel : " ",
									allowBlank : false,
									xtype : "radio",
									checked : true
								}, {
									name : "sex",
									inputValue : "1",
									boxLabel : " ",
									allowBlank : false,
									xtype : "radio"
								}, {
									name : "levle",
									inputValue : "1",
									boxLabel : "  ",
									allowBlank : false,
									xtype : "checkbox"
								}, {
									name : "age",
									fieldLabel : "  ",
									allowBlank : false,
									xtype : "numberfield",
									maxValue : 100,
									minValue : 1
								}, new Ext.form.TimeField({
											fieldLabel : 'Time',
											name : 'time',
											minValue : '8:00am',
											maxValue : '6:00pm',
											format : "H:i"
										}), {
									fieldLabel : 'Email',
									name : 'email',
									vtype : 'email'
								}, {
									name : "ta",
									fieldLabel : "  ",
									xtype : "textarea",
									width : 100,
									height : 50
								}, {
									name : "ta",
									fieldLabel : "    ",
									xtype : "htmleditor",
									height : 100,
									width : 500,
									enalbeLists : false,
									enableSourceEdite : true,
									enableColors : false,
									enableLinks : true
								}],
						buttons : [{
							text : "  ",
							lableAlgin : "left",
							tooltip : "      ！",
							tooltipType : "qtip",
							handler : function() {
								f.getForm().submit({
									success : function(f, action) {
										Ext.MessageBox.alert("SUC",
												action.result.msg
														+ action.result.time);
									},
									failure : function() {
										Ext.MessageBox.alert("ERROR", "    ");
									}
								});
							}
						}, {
							text : "  ",
							lableAlgin : "left",
							handler : function() {
								var feilds = f.getForm().items.items;
								for (var i = 0; i < feilds.length; i++) {
									feilds[i].reset();
								}
							}
						}]

					});
			f.render(Ext.getBody());
		});