extjs 연구 노트(1) 몇 가지 기본 지식_extjs

/** //*
*작성자: Daben
*날짜: 2009-10-10
*버전: 1.0
*/

Ext.onReady(function() {
//Ext.MessageBox.alert("Message","Hello world");
/**//*Ext.MessageBox.confirm("comfirm","js 확인 대화 상자 시뮬레이션", function(btn){
alert("Clicked the "btn "button");
});* /
Ext.get("btn").on("click", function() {
var data = Ext.fly("txt").getValue();
if (data == "") {
Ext.Msg.alert("경고", "문자열을 입력하세요")
}
else {
Ext.Ajax.request ({
url: " hello.aspx",
params: { data: data },
method: "POST",
success: function(response) {
Ext.fly( "div").update(response .responseText);
},
failure: function(response) {
Ext.Msg.alert("Error", "요청이 실패했습니다. 오류 코드는 다음과 같습니다. " 응답.상태);
}
});
}
});
});


이 파일을 간단히 분석해 보겠습니다. 첫 번째 줄은 vs의 스마트 프롬프트를 사용하는 것입니다. 경로를 올바르게 작성하도록 주의하고 첫 번째 줄에 추가해야 합니다. Ext.onReady는 이미 소개되어 있습니다. Ext.fly는 id를 기반으로 Element 객체를 얻을 수 있습니다. Element 클래스는 Ext에서 매우 중요한 클래스입니다. 일부는 사용하기 쉽도록 작동하며 주요 브라우저와 호환됩니다. getValue는 요소의 값을 얻기 위한 Element 클래스의 메소드입니다. 아쉬운 점은 해당 setValue 메소드가 없기 때문에 나중에 업데이트 메소드를 사용하여 요소의 값을 업데이트한다는 것입니다. 서버에 값을 전달하기 전에 클라이언트를 확인하는 것은 좋은 프로그래밍 습관입니다. 여기서는 단순히 문자열이 비어 있지 않은지 확인한 다음 앞서 언급한 Ext.Ajax.request 메서드를 사용합니다. post 모드의 hello.aspx 페이지. 여기서는 json 객체 형식으로 보내거나, 성공적인 응답의 경우 응답 텍스트가 div에 표시됩니다. , 팝업 A 대화 상자와 오류 코드가 제공됩니다.
다음 단계는 서버측 프로그래밍을 수행하는 것입니다. 서버는 클라이언트가 전달한 데이터를 받아들이고 aspx 페이지와 웹 서비스를 사용하는 두 가지 방법으로 응답할 수 있습니다. 먼저 처리를 위해 aspx 페이지를 사용하는 방법을 소개하겠습니다. Hello.aspx 페이지를 프로젝트에 추가하고 페이지 첫 번째 줄의 페이지 처리 지침을 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Hello.aspx.cs" Inherits=에 추가합니다. "ExtjsDemo .hello" %>모두 삭제합니다. F7을 눌러 코드 페이지로 전환하고 배경 코드 작성을 시작합니다. 먼저 Request.Params["data"]를 통해 프런트 데스크에서 전달된 데이터를 얻습니다. 마찬가지로 데이터를 처리하기 전에 먼저 데이터의 유효성을 확인합니다. 여기서는 데이터가 비어 있는지 또는 빈 문자열인지 확인합니다. 그런 다음 Response.Write 메서드를 사용하여 처리된 결과를 클라이언트에 보냅니다. 배경 코드는 다음과 같습니다.
실행 후 편집 상자에 문자열을 입력하면 아래 div에 대문자로 표시되는 것을 볼 수 있으며, FF의 Firebug를 통해 데이터의 상호 작용을 볼 수 있습니다.
aspx 페이지를 사용하여 클라이언트가 전달한 데이터를 수락하고 처리하는 것 외에도 웹 서비스를 사용할 수도 있습니다. 프로젝트에 웹 서비스를 추가합니다. 코드는 다음과 같습니다.