Extjs 연구 노트 2: Extjs에 대한 첫 소개: Form

Extjs의 양식 구성 요소는 Ext.form.BasicForm이지만 가장 간단하고 가장 일반적으로 사용되는 것은 Ext.form.FormPanel 컨트롤입니다. 이 컨트롤은 Panel에서 상속되고 특정 인터페이스 표시 제어 기능을 포함하며 실행을 위한 BasicForm 개체를 포함합니다. 서버, 로드 및 기타 작업. Extjs는 또한 일반적으로 사용되는 HTML 양식 항목을 캡슐화하고 데이터 유효성 검사와 같은 몇 가지 추가 기능을 제공합니다. 실제 사용에서는 이러한 양식 항목을 FormPanel에 추가하기만 하면 됩니다. 일반적인 양식 항목에는 TextField, NumberField, Radio, CheckBox 등이 포함됩니다.

다음은 예제를 사용하여 기본 Form의 사용법을 소개합니다. Form을 사용하려면 서버 측 프로그램과 상호 작용해야 하므로 편의를 위해 새 asp.net 사이트를 만들고 모든 extjs 파일을 사이트에 추가한 다음 아래와 같이 이 샘플 파일로 새 form.htm 파일을 만듭니다. 주로 FormPanel에 양식 항목을 추가하려면 아래의 Forms.htm에 코드를 추가하세요.

코드 복사 코드는 다음과 같습니다. Extjs FormPanel .allow-float{clear:none !important;} .stop-float{clear:both !important;} .float-left{float:left;} Ext.onReady(function() { Ext.BLANK_IMAGE_URL = 'ext-3.1.0/resources/images/default/s.gif'; Ext.QuickTips.init(); //初始化信息提示功能 var loginForm = new Ext.form.FormPanel({ title: 'A Simple FormPanel', height: 300, width: 300, frame: true, labelSeparator: ':', labelWidth: 60, labelAlign: 'right', applyTo: 'form', items: [ new Ext.form.TextField({ id: '이름', fieldLabel: '이름', allowBlank: false, blankText: '必填字段', msgTarget: 'qtip' }), new Ext.form.TextField({ id:'Password', fieldLabel: 'Password', allowBlank: false, inputType: 'password', blankText: '必填字段', //msgTarget: 'qtip' msgTarget: 'side' }), new Ext.form.TextField({ id: 'email', fieldLabel: 'E-Mail', allowBlank: false, selectOnFocus: true, inputType: 'Text', msgTarget: 'side',emptyText: '必填字段' , 정규식: /^([w] )(.[w] )*@([w-] .){1,5}([A-Za-z]){2,4}$/, regexText: 'Email 格式不正确' }), new Ext.form.NumberField({ id: 'age', fieldLabel: 'Age', allowNegative : false, decimalPrecision: 0, maxValue: 100, maxText: '输入的数字最大是100' }), new Ext.form.TextArea({ id: 'remark', fieldLabel: 'Remark', width: 200 }), new Ext.form.Radio({ name: 'sex', itemCls: 'float-left', clearCls: 'allow-float', fieldLabel: 'Sex', boxLabel: 'Male' }), new Ext.form. Radio({ name: 'sex', clearCls: 'stop-float', boxLabel: '여성', hideLabel: true }), new Ext. form.Checkbox({ name: 'hobby', clearCls: 'allow-float', itemCls: 'float-left', boxLabel: 'Football', fieldLabel: 'Hobby' }), new Ext.form.Checkbox({ name: 'hobby', clearCls: 'allow-float', itemCls: 'float-left' , hideLabel: true, boxLabel: 'Ping-Pang' }), new Ext.form.Checkbox({ name: 'hobby', clearCls: ' stop-float', hideLabel: true, boxLabel: '농구' }) ], buttons: [new Ext.Button({ text: 'OK' , 핸들러: 로그인 }) ] }); function login() { loginForm.getForm().submit({ clientValidation: true, waitMsg: '잠시 기다려주세요...', waitTitle: 'Hint', url: 'simpleForm.ashx', method: 'GET', success: function(form, action) { Ext.Msg.alert('Hint', '성공 얻기:이름 is ' action.result.msg.Name " 비밀번호: " action.result.msg.Password) }, failure: function(form, action) { Ext.Msg.alert('Hint ', '실패' action.failureType) } }); }; }); FormPanel을 구성할 때 ApplyTo 속성을 통해 Panel을 로드할 영역을 지정해야 합니다. 일반적으로 applyTo의 값은 div의 ID입니다. FormPanel의 items 속성은 양식 항목의 배열입니다. TextField는 비어 있을 수 있는지 여부를 지정할 수 있으며, NumberField는 최대값 및 최소값 제한도 지정할 수 있습니다. 이러한 양식 항목의 itemCls 및clearCls 속성에 주목할 가치가 있습니다. 이러한 속성을 사용하여 양식 항목에 CSS를 연결하면 원하는 효과를 얻을 수 있습니다. 그 중 itemCls는 양식 항목 자체에 첨부되고, ClearCls는 양식 항목 옆의 빈 div에 첨부됩니다. 버튼 객체는 버튼 속성에 추가될 수 있습니다. 지금은 제출 기능을 무시하세요. 이 양식은 모양이 더 일관되고 일반적인 유효성 검사 기능도 있습니다. 양식 유효성 검사 기능은 나중에 도입될 예정입니다. 다음은 양식 제출에 대해 설명합니다. 양식 제출은 Basicform의 제출 방법에 따라 이루어집니다. BasicForm은 FormPanel의 getForm 메소드를 호출한 후 제출 메소드를 호출하여 얻을 수 있습니다. 제출 메소드의 주요 매개변수는 제출할 URL 주소, 제출 메소드 GET/POST, 그리고 이후의 두 가지 처리 함수인 sucess 및 Success입니다. 제출 실패 및 성공. 이 두 가지 처리 함수에는 두 개의 매개변수가 있습니다. 하나는 현재 양식이고 다른 하나는 Action 개체입니다. Action 개체는 주로 실패 유형, failureType 및 서버를 포함하여 이 제출(또는 로드)의 주요 정보를 기록합니다. 터미널의 정보 결과를 반환합니다. failureType은 Action.CLIENT_INVALID, CONNTECT_FALIURE, LOAD_FALURE, SERVER_INVALID일 수 있습니다. 이는 Action에 정의된 공용 속성이며 실제로는 문자열입니다. 다음은 주로 서버에서 반환되는 결과를 소개합니다. extjs는 서버에서 반환되는 정보에 대해 엄격한 요구 사항을 가지고 있습니다. 기본적으로 서버는 json 문자열을 반환해야 하며 속성 중 하나는 성공이고 유형은 부울입니다. 나머지 속성은 다른 사용자 정의된 반환 데이터일 수 있습니다.

예를 들어 다음은 서버에서 반환되는 샘플입니다. 코드 복사 코드는 다음과 같습니다. : { "success":true, // 문자열이 아니라 부울입니다. "msg":"성공적으로 업데이트되었습니다!" } 아래 이 htm 페이지에 대한 서버 응답 페이지를 작성하고 새로운 일반 처리기 페이지 SimpleForm.ashx를 만듭니다. 즉, 제출된 이름과 비밀번호를 클라이언트에 반환하는 것입니다. 반환되는 데이터는 다음과 유사해야 합니다.

{success:true,msg:{Name:xxx,Password:xxxx}}

이 응답은 다음과 같이 작성해야 합니다. 코드 복사 코드는 다음과 같습니다. public void ProcessRequest(HttpContext 컨텍스트) { string s = context.Request .Params["Name"]; string pwd = context.Request.Params["Password"] if (s == null) s = "null"; result = "{success :true,msg:{Name:"" s "",Password:"" pwd ""}}" context.Response.ContentType = "text/plain" context. Response.Write(result ); }

프로그램을 실행하고 필요한 정보를 입력한 후 확인 버튼을 클릭하면 서버에서 반환된 데이터를 볼 수 있습니다. 마지막으로 서버에서 양식 정보를 가져와 클라이언트 양식을 채우는 방법을 소개하겠습니다. 클라이언트를 채우려면 BasicForm의 로드 메소드가 사용됩니다. 이 메소드에는 기본적으로 submit과 유사하게 성공 속성이 필요합니다. 속성과 양식 항목의 이름이 같으면 이 채우기 프로세스가 자동으로 완료되므로 매우 편리합니다. 서버에서 양식 정보를 가져오려면 이 양식에 로드 버튼을 추가하세요. 코드 복사 코드는 다음과 같습니다. 버튼: [new Ext.Button({ text: 'OK', handler: login }), new Ext.Button({ text: 'Load', handler: loadData }) ]loadData의 메서드는 다음과 같습니다: function loadData() { loginForm.getForm().load({ clientValidation: false, waitMsg:'Loading...', url: 'simpleFormLoad.ashx', method: 'GET' }) } 로드가 필요하지 않으므로 클라이언트 확인이 필요하지 않습니다. data 이므로 clientValidation을 false로 설정하세요. 해당 simpleFormLoad.ashx 서버 측 코드는 다음과 같습니다.

public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain" context.Response.Write(" { 성공:true,데이터:{이름:"ServerReply",age:10,email:"yinzixin1985@hotmail.com"}}"); } 로드 버튼을 클릭하고 다음을 확인하세요: 데이터는 서버에서 원활하게 반환되며 양식에 자동으로 채워집니다.

이 글에서는 주로 extjs 폼의 기본 개념과 서버와 간단하게 상호작용하는 방법을 소개합니다. 이러한 내용은 실제 요구를 충족시키기에는 충분하지 않습니다. 다음 기사에서는 좀 더 실용적인 내용을 소개합니다.

Extjs 연구 노트 2: Extjs에 대한 첫 소개: Form_extjs