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

저는 프로젝트에서 jquery를 자주 사용했습니다. 이번에는 주로 extjs를 사용하는 방법을 배웠지만 기존 튜토리얼은 기본적으로 2.0용이고 백그라운드에서 사용되는 언어는 .net 플랫폼에서 거의 C#이 아닙니다. 3.0 버전에서는 백그라운드에서 C#을 사용하여 학습 과정을 기록하고, 같은 생각을 가진 친구들과 함께 토론하고 발전해 나가고 싶습니다.
extjs의 공식 웹사이트는 http://www.extjs.com입니다. 현재 최고 버전은 3.0.2이지만 버전 3.0.0만 다운로드 제한이 없습니다. 버전 3.0을 다운로드하려면 여기를 클릭하세요. 다운로드한 압축 패키지에는 압축된 extjs 라이브러리, 디버깅에 사용되는 라이브러리, 읽을 수 있는 소스 코드, 문서 및 예제가 포함되어 있습니다. 시작하기 전에 예제 폴더에 있는 예제를 살펴보고 extjs를 지각적으로 이해하는 것이 좋습니다. 예제의 효과가 흥미로울 경우 함께 extjs 학습 여정을 시작하세요.
먼저 adpter/ext/ext-base-debug.js, ext-all-debug.js 및 전체 리소스 폴더를 포함하여 참조해야 하는 파일을 명확히 합니다. 물론 대부분의 경우 ext- lang -zh_CN.js는 중국어 현지화를 수행합니다. 파일은 src/locale 디렉터리에 있습니다. 학습 단계이기 때문에 실제 프로젝트에서는 파일 크기를 줄이기 위해 압축 버전을 사용해야 합니다. 다음으로 우리는 프로그래밍 세계의 일관된 전통을 고수하고 첫 번째 Hello World 프로그램을 시작할 것입니다.
새 텍스트 파일을 만들고 파일 이름을 Hello.htm으로 변경한 후 텍스트 편집기로 열고 다음 코드를 작성합니다.

Hello.htm

코드 복사 코드는 다음과 같습니다.

Equiv="Content-Type" content="text/html;charset=utf-8" />

;


daben.js 내용은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. 다음은 다음과 같습니다: /* *//*

*작성자: Daben

*날짜: 2009-10-10
*버전: 1.0
*/
Ext.onReady(function(){
Ext.MessageBox.alert("Message","Hello world");
});


ie 또는 ff를 사용하여 Hello.htm을 열면 js 경고 대화 상자와 동일하지만 훨씬 더 아름다운 팝업 대화 상자를 볼 수 있습니다.
HTML 페이지에서 먼저 extjs의 관련 라이브러리 파일을 참조합니다. 다음으로 자체 js 파일을 참조합니다. 간단히 살펴보겠습니다. Ext.onReady는 문서가 로드된 후에 실행되며, 함수 유형인 매개변수가 있으며, 이벤트가 실행될 때 함수가 호출됩니다. 물론 여기서는 익명 함수를 사용합니다. 함수를 외부적으로 정의하고 함수 이름을 매개변수로 전달할 수도 있습니다. Ext.MessageBox.alert는 메시지를 팝업하는 대화상자 함수입니다. 첫 번째 매개변수는 제목, 두 번째 매개변수는 대화상자의 내용입니다. Ext.Message 클래스 아래에는 js 프롬프트 대화 상자와 확인 대화 상자를 시뮬레이션하는 메서드도 있습니다. daben.js를 수정하여 확인 메서드의 효과를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다. Ext.onReady(function(){

//Ext.MessageBox.alert("Message" ,"Hello world");

Ext.MessageBox.confirm("comfirm","js 확인 대화 상자 시뮬레이션", function(btn){
alert(""btn "버튼"을 클릭했습니다);
});
});

실제 웹 프로그램에서는 서버에 데이터를 제출하고 서버의 응답에 따라 페이지의 내용을 업데이트해야 한다는 점을 살펴보겠습니다. extjs가 이를 어떻게 구현하는지 살펴보세요. 아래 예에서는 페이지에 편집 상자와 버튼을 배치합니다. 버튼을 클릭하면 서버는 편집 상자에 입력한 내용을 대문자로 변환하여 페이지의 div에 표시합니다. vs2008을 열고 새 웹 애플리케이션 ExtjsDemo를 생성한 다음 자동으로 추가된 default.aspx 파일을 삭제합니다. 추가가 완료되면 그림과 같이 hello.htm 및 daben.js 파일과 사용하려는 extjs 라이브러리를 추가합니다.

아래에 vvswd-가 추가된 것을 볼 수 있습니다. ext_2.0.2.js 파일은 여기에서 다운로드할 수 있습니다. 이 파일은 프로그래밍에 편리한 vs2008의 스마트 프롬프트를 구현할 수 있습니다. 버전 3.0을 찾지 못했습니다. 친구가 찾으면 사본을 보내주세요.) 먼저 서버와의 통신을 구현하는 extjs의 함수인 Ext.Ajax.request를 살펴보겠습니다. 이 함수는 json 객체를 매개변수로 받아들입니다. 이 객체에는 일반적으로 사용되는 몇 가지 속성이 있습니다.
url: 요청을 나타내는 문자열 유형입니다. 주소
매개변수: 요청 시 서버 세그먼트에 전달되는 매개변수(객체, 문자열일 수 있음)
방법: 요청 방법, 문자열 유형, "GET" 또는 "POST", 대문자로 사용해야 합니다.
성공 : 함수 유형, 요청이 성공한 후 실행될 함수. 이 함수에는 서버 측 응답 데이터가 포함된 XMLHttpRequest 객체인 하나의 매개변수가 있습니다.
실패: 함수 유형, 요청이 성공한 후 실행될 함수입니다. 요청이 실패합니다. 매개변수는 서버 측 응답 데이터를 포함하는 XMLHttpRequest 객체입니다.
콜백: 함수 유형, 요청 결과에 관계없이 실행됩니다.
좋습니다. extjs가 어떻게 작동하는지 살펴보겠습니다. 서버와 상호 작용합니다. 먼저 hello.htm 페이지를 다음과 같이 변경합니다.

코드 복사 코드는 다음과 같습니다.

;title>Extjs hello world 대화상자



< ;script type= "text/javascript" src="js/daben.js">

body>



그런 다음 daben.js 파일을 변경합니다.

코드 복사 코드는 다음과 같습니다.

///

/** //*
*작성자: 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 페이지를 프로젝트에 추가하고 페이지 첫 번째 줄의 페이지 처리 지침을 모두 삭제합니다. F7을 눌러 코드 페이지로 전환하고 배경 코드 작성을 시작합니다. 먼저 Request.Params["data"]를 통해 프런트 데스크에서 전달된 데이터를 얻습니다. 마찬가지로 데이터를 처리하기 전에 먼저 데이터의 유효성을 확인합니다. 여기서는 데이터가 비어 있는지 또는 빈 문자열인지 확인합니다. 그런 다음 Response.Write 메서드를 사용하여 처리된 결과를 클라이언트에 보냅니다. 배경 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

시스템 사용 ;

/**//*
*작성자: Daben
*날짜: 2009-10-10
*버전: 1.0
*/
네임스페이스 ExtjsDemo
{
공개 부분 클래스 Hello : System.Web.UI.Page
{
페이지 로딩 #region 페이지 로딩
/ **////

/// 페이지 로드
///
/// >///
protected void Page_Load(object sender, EventArgs e)
{
string data = Request.Params["data"] ;
if(!string.IsNullOrEmpty(data))
{
Response.Write(data.ToUpper())
}
}
#endregion
}
}

실행 후 편집 상자에 문자열을 입력하면 아래 div에 대문자로 표시되는 것을 볼 수 있으며, FF의 Firebug를 통해 데이터의 상호 작용을 볼 수 있습니다.
aspx 페이지를 사용하여 클라이언트가 전달한 데이터를 수락하고 처리하는 것 외에도 웹 서비스를 사용할 수도 있습니다. 프로젝트에 웹 서비스를 추가합니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

시스템 사용;
System.Web.Services 사용

/**////

/// HelloService 요약 설명
///

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// ASP.NET AJAX를 사용하여 스크립트에서 이 웹 서비스를 호출할 수 있도록 하려면 다음 줄을 선택 취소하세요. 주석.
// [System.Web.Script.Services.ScriptService]
public class HelloService : System.Web.Services.WebService
{
수신 문자열을 대문자로 변경 #region이 전달됩니다. 문자열을 대문자로 입력했습니다
/**/

네임스페이스 ExtjsDemo
{
/***////

/// 대문자로 변환해야 하는 문자열로 전달됩니다
///

/// 대문자로 변환해야 하는 문자열
// / 대문자 문자열
[WebMethod]
공개 문자열 ToUpper(문자열 데이터)
{
if(!string.IsNullOrEmpty( data))
return data.ToUpper();
throw new Exception("문자열은 비워둘 수 없습니다!")
#endregion
}
}


물론 웹 서비스는 기본적으로 Firebug를 통해 확인할 수 있는 xml 형식의 데이터를 전달합니다. XML은 매우 훌륭하고 강력하지만 때로는 더 작은 JSON만 필요할 때도 있습니다. 그러면 웹 서비스가 JSON 형식을 제공하도록 하려면 어떻게 해야 할까요? 요청 헤더의 Content-Type을 application/json으로 설정하고 Ext.util.JSON.encode를 사용하여 매개변수를 인코딩하거나
대신 jsonData를 사용하면 됩니다.