Exjs 입문 편

3926 단어 Exjs입문 하 다
Extjs 가 이렇게 화려 한 화면 을 보 니 갑자기 알 수 없 는 충동 이 생 겨 서 공부 하 게 되 었 습 니 다!Extjs 는 yui-ext 에서 발 전 된 ajax 컨트롤 로 완전한 부 클 라 이언 트 솔 루 션 입 니 다.또한 기능 이 완전 하기 때문에 ext-all.js 는 400 여 k(최신 extjs 3.2.0 은 600 여 k)가 있 습 니 다.js 와 css 의 기능 을 바탕 으로 이 루어 진 것 이 라 고 생각 하고 클 라 이언 트 기기 의 성능 에 도 어느 정도 요구 가 있 습 니 다.예 를 들 어 ie6 이하 버 전에 대한 지원 이 없습니다.다음은 Extjs 학습 을 시작 하 겠 습 니 다(본인 도 갓 배 웠 으 니 글 에 나 오 는 문 제 를 제기 해 주시 기 바 랍 니 다)."헬 로 월 드 는 현재 프로그램 언어 고전 의 입문 프로그램 으로 많은 교과서 에서'헬 로 월 드'로 우 리 를 멋 진 프로그램 세계 로 이 끌 고 있다.진행 은 Extjs 프레임 워 크 로 운송 프로그램 을 개발 하기 전에 Extjs 자원 패 키 지 를 프로젝트 에 가 져 와 야 합 니 다.최신 Extjs 개발 패 키 지 는 3.2.0 이 고 Extjs 공식 사이트 에서 다운로드 할 수 있 습 니 다.사이트 주 소 는www.extjs.com/download입 니 다.다운로드 가 완 료 된 후 압축 을 풀 고 압축 을 푼 후의 구조 도 는 다음 과 같다.

Extjs 개발 가방 을 다운로드 한 후에 우 리 는 Extjs 의 개발 을 할 수 있 습 니 다.먼저 우 리 는 VS 2008 을 열 고 프로젝트 를 새로 만 들 면 저 는 Com.KimiYang.Web 이 라 고 이름 을 지 을 수 있 습 니 다.공 사 를 마 친 후 방금 압축 을 풀 었 던 Extjs 개발 패 키 지 를 프로젝트 에 복사 합 니 다.디 렉 터 리 adapter,resources,파일 ext-all.js 는 프로젝트 에 복사 해 야 합 니 다.나 는 프로젝트 의 루트 디 렉 터 리 에 폴 더 Extjs 3.2.0 을 새로 만 든 다음 에 상기 폴 더 와 파일 을 폴 더 Extjs 3.2.0 에 복사 했다.디 렉 터 리 구 조 는 다음 그림 과 같다.

이제"Hello World"프로그램 을 쓰기 시 작 했 습 니 다.페이지 Default.aspx 에 직접 쓰 고 Default.aspx 페이지 를 엽 니 다.Extjs 개발 애플 리 케 이 션 을 사용 하려 면 Extjs 개발 을 프로젝트 에 가 져 오기 만 으로 는 부족 하 며,페이지 에서 해당 파일 을 참조 해 야 합 니 다.가장 핵심 적 인 파일 은 다음 과 같은 세 가지 가 있 습 니 다.resources/css/ext-all.css(제어 인터페이스 스타일,차 스타일 을 도입 하지 않 으 면 페이지 가 혼 란 스 러 워 집 니 다),adapter/ext/ext-base.js 와 ext-all.js(이 두 파일 은 Extjs 의 모든 기능 을 포함 합 니 다).상기 세 파일 을 제외 하고 반드시 도입 해 야 합 니 다.중국의 개발 자 에 게 는 Extjs 3.2.0/src/locale/ext-lang-zh 파일 을 도입 해 야 합 니 다.CN.js.상기 몇 개의 파일 을 인용 할 때 우선 순위 가 있 습 니 다.그렇지 않 으 면 프로그램 에 오류 가 발생 할 수 있 습 니 다.다음은"Hello World"코드 입 니 다.사용자 가 페이지 를 열 때 Hello Wold 를 표시 하 는 대화 상자 가 팝 업 됩 니 다.
 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Com.KimiYang.Web._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title> </title>
<link href="Extjs3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<link href="Extjs3.2.0/resources/css/xtheme-gray.css" rel="stylesheet" type="text/css" />
<script src="Extjs3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Extjs3.2.0/ext-all.js" type="text/javascript"></script>
<script src="Extjs3.2.0/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function openMsg()
{
Ext.MessageBox.alert(' ', 'Hello World' , 'showResult');
}
Ext.onReady(openMsg);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
위의 코드 를 실행 하면 다음 과 같은 효과 가 나타 날 것 이다.

     먼저 openMsg 방법 을 정 의 했 습 니 다.이 방법의 기능 은 팝 업 입 니 다. Extjs 대화 상자,Ext.onReady()는 Extjs 를 사용 하 는 입구 입 니 다.Extjs 프레임 워 크 가 불 러 온 후에 만 Ext.onReady 의 함 수 를 실행 할 수 있 습 니 다.

좋은 웹페이지 즐겨찾기