ExtJS 학습 노트 Hello World!1/2 쪽

기 초 를 이해 한 후에 Ext+ajax 로 간단 한 작은 프로젝트 를 개발 할 수 있 습 니 다.프로젝트 개발 과정 을 조금씩 설명 할 것 입 니 다.여러분 에 게 수확 을 가 져 다 주 기 를 바 랍 니 다!저 자신 도 이 틀 을 배우 고 있 기 때문에 글 에 대해 어떤 건의 가 있 으 면 제출 하 세 요.그러면 저 에 게 더 많은 것 을 배 울 수 있 습 니 다이 그림 을 보면 어떤 소프트웨어 나 Flash,Flex,silverlight 등 이 라 고 생각 할 수 있 지만 이것 은 javascript+Css 가 실현 한 것 입 니 다       이런 식 과 효 과 를 보면 자신의 프로젝트 에 넣 으 면 사용자 의 시각 과 조작 체험 이 시원 하 겠 지 요.더 많은 필터 가 있 으 니 일일이 캡 처 하지 않 겠 습 니 다.      다음은 이 구성 요 소 를 말씀 드 리 겠 습 니 다.ExtJs 는 괜 찮 은 Ajax 프레임 워 크 입 니 다.자바 script 으로 썼 습 니 다.효과 가 어떤 지 위 에서 도 봤 어 요.우 리 는 ExtJs 를 모든 웹 개발 언어 에 응용 할 수 있다.그의 클 라 이언 트 효 과 는 매우 강력 하 다.또한 Ext 는 서버 와 상호작용 하 는 체 제 를 제공 하여 사용 하기에 매우 편리 하 다.Ext 와 서버 가 상호작용 하 는 글 뒤에 쓸 것 이다.      응용 하기 전에 우 리 는 먼저 이 프레임 워 크 를 얻어 야 한다.갈 수 있다.http://extjs.com/products/extjs/download.php 홈 페이지 다운로드다운로드 가 끝나 면 다음 디 렉 터 리 를 얻 을 수 있 습 니 다adapter:안에 제 공 된 제3자 바 텀 라 이브 러 리(Ext 자체 테이프 포함)를 Ext 가 지원 하 는 바 텀 라 이브 러 리 에 투사 하 는 것 을 책임 집 니 다.build:압축 후 Ext 모든 소스 코드(분류 저장)docs:API 도움말 문서 examples:일부 Extjs 가 만 든 효과 예제 resources:Ext UI 자원 파일 디 렉 터 리,css,그림 은 모두 이 source:압축 되 지 않 은 Ext 모든 소스 코드 ext-all.js  ：압축 후 Ext 모든 소스 코드,핵심 파일,500 여 Kext-all-debug.js:압축 되 지 않 은 Ext 모든 소스 코드(디 버 깅 에 사용)ext-core.js:핵심 구성 요소,source/core 를 포함 한 모든 종류의 ext-core-debug.js:압축 되 지 않 은 핵심 구성 요소       다음은 정적 html 페이지 에서 테스트 를 할 것 입 니 다.ExtJs 를 사용 하려 면 먼저 3 개의 스 크 립 트 파일 과 스타일 시트 를 가 져 와 야 합 니 다.
                   
      Extjs 파일 을 불 러 온 후 Ext.onReady 에서 지정 한 함 수 를 실행 합 니 다.간단 한 코드 로 테스트 를 할 수 있 습 니 다.function start(){Ext.MessageBox.alert("ok","Extjs 프레임 워 크 가 불 러 왔 습 니 다!");}Ext.onReady(start); Ext.onReady(function{Ext.MessageBox.alert("ok","Extjs 프레임 워 크 가 불 러 왔 습 니 다!");});
      두 가지 표기 법 은 같은 효 과 를 실현 할 수 있다.      Ext.onReady(start)에 추가 할 필요 가 없습니다.      Ext.MessageBox.alert("ok","Extjs 프레임 워 크 가 불 러 왔 습 니 다!");대화 상 자 를 출력 하 는 데 사용 합 니 다.      Ext.Message Box.alert('제목','팝 업 내용');그것 도 Ext.Msg.alert(',')라 고 쓸 수 있다.운행 효 과 는 다음 과 같다.     alert 대화 상 자 는 Extjs 로 쉽게 이 루어 집 니 다.prompt('','');Extjs 에 도 상대 적 인 응용 법 이 존재 합 니 다.function Prompt(){ Ext.MessageBox.prompt( "Input", "input a number:", function(button,text){ if(button=="ok") Ext.MessageBox.alert("number","the number is "+text); else Ext.MessageBox.alert("sorry","the number is null."); } ); } 이 문법 은 조금 번 거 롭 습 니 다.Ext.Message Box.prompt('제목','설명:',완료 후 실 행 된 함수);실 행 된 함 수 는 button 과 text 두 개의 인자 가 필요 합 니 다.button 은 사용자 가 취 소 를 선 택 했 는 지 확인 하 는 데 사 용 됩 니 다.이 값 을'ok'으로 확정 합 니 다.텍스트 가 입력 한 텍스트 입 니 다       두 가지 작은 예 만 들 어 설명 하고 confim 등 용법 도 비슷 하 다.      자주 사용 되 고 이해 하기 쉬 운 Window 상자 도 있 습 니 다.            이 예 쁜 테 두 리 는 드래그 할 수 있 고 X 를 누 르 면 닫 을 수 있 습 니 다.      용법 은 다음 과 같다.
function Window(){ var win=new Ext.Window({title:"hello",width:300,height:200,html:'This is the body.'}); win.show(); }       Ext.Window 의 대상 을 만 들 고 show 방법 으로 표시 해 야 합 니 다.      Ext.Window 는 구조 함수 에서 많은 인 자 를 전달 할 수 있 습 니 다.여 기 는 title,width,height,body 영역 에 표 시 된 내용 만 사용 합 니 다.      new Ext.Window({title:"",width:300,height:200,html:'This is the body.'});      title:""  제목 설정      너비:300 너비      높이      html:'xxxx'   html 코드 를 설치 할 수 있 습 니 다. 
1 2 다음 페이지 전문 을 읽다