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 의 함 수 를 실행 할 수 있 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Ngnix 빠 른 입문

기능 에 있어 Nginx 는 우수한 웹 서비스 소프트웨어 일 뿐만 아니 라 ， 역방향 대리 와 부하 균형 에 있어 유명한 LVS Haproxy 등 전문 대리 소프트웨어 도 가지 고 있 지만 Nginx 의 배 치 는 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Exjs 입문 편

좋은 웹페이지 즐겨찾기