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" />








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

그런 다음 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 페이지를 프로젝트에 추가하고 페이지 첫 번째 줄의 페이지 처리 지침을 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Hello.aspx.cs" Inherits=에 추가합니다. "ExtjsDemo .hello" %>모두 삭제합니다. 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
{
/***////

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

/// 대문자로 변환해야 하는 문자열< ;/param>
// / 대문자 문자열
[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를 사용하면 됩니다.