ExtJS 서문 1

최근에 블로그에 ExtJS에 관한 많은 글을 보았는데 자신도 인터넷에서 몇 가지 검색을 해서 특별히 정리해서 초보자에게 공부하게 하였으니 개의치 마십시오.

1.1.모든 것은 extjs 발표 패키지부터 시작합니다


 
다행히도 우리는 무료로 extjs에 갈 수 있다.com ext 발표 패키지, 내부 소스 코드,api 문서를 다운로드합니다. 예가 모두 갖추어져 있습니다.하지만svn에 접근해서 최신 코드를 얻으려면 돈을 써야 합니다.그러나 우리는 지금 이 무료 발표 패키지만 있으면 된다. 안의 범례를 통해 ext의 풍격을 체험할 수 있다.
다운로드 주소:http://www.extjs.com/download.문서를 쓰는 이 순간까지 우리는 ext-1.1.1 또는 ext-2.0을 선택하여 다운로드할 수 있다.분명히 ext-2.0의 버전이 높다는 것을 알 수 있다. 12월 4일 드디어 정식으로 발표되었고 아직 상세한 테스트를 거치지 않았기 때문에 감히 무슨 말을 할 수 없다.다음은 우리 두 판본을 모두 좀 소개하자.

1.2.ext-1.1.1 문서 보기


 
docs 디렉터리는api 문서입니다. 기본적으로 모든 함수, 설정, 이벤트를 안에서 찾을 수 있습니다. index를 직접 열 수 있습니다.html에서 볼 수 있습니다. 왼쪽 메뉴에는 examples 디렉터리의 예에 대한 인용도 포함되어 있지만 일부 예는 json과 백그라운드를 사용하여 데이터 교환을 해야 서버에 올려야 효과를 볼 수 있습니다.또 일부 백엔드 코드는 php로 작성된 것이기 때문에 이 예들의 효과를 보려면 php 운행 환경을 설정해야 한다.
만약 당신이 자바를 사용하고 jdk가 1.5 이상이라면, 직접resin-3를 설치하는 것이 편리하다. 이것은 php를 뛸 수 있다.

1.3.ext-2.0 문서 보기


 
api 문서는 여전히docs 디렉터리에 있습니다. 왼쪽 메뉴를 볼 수 있지만 클릭하면 오른쪽api 페이지는ajax로 얻을 수 있기 때문에 로컬에서 직접 볼 수 없습니다. 압축을 풀은 디렉터리를 서버에 놓고 브라우저를 통해 서버에 접근해야 볼 수 있습니다.
왜 docs가 열리지 않냐고 물어보면 계속 로딩하는 형제만 볼 수 있습니다. 모두 이 물건들을 서버에 올리지 않았기 때문입니다.
2.0의api 문서에 예시 링크가 없습니다. examples 디렉터리에 가서 필요한 예시를 찾아서 열어 보십시오. 물론 서버에 놓아야 효과를 볼 수 있는 예가 있습니다.

1.4.왜 어떤 예는 반드시 서버에 놓아야만 효과를 볼 수 있습니까?


 
어떤 예에서는 Ajax로 백엔드에서 데이터를 읽는 데 사용되기 때문에 서버에 없으면 Ajax가 되돌아오는 상태가 계속 실패하고 어떤 데이터도 얻을 수 없기 때문에 모든 것이 정확한 효과를 볼 수 없습니다.근데 옛날에 extjs에서.com 포럼에서 누군가가localXHR을 써서ajax가 로컬 파일 시스템에서 데이터를 얻을 수 있도록 하는 것을 본 적이 있다. 그러면 서버의 속박에서 벗어날 수 있을 것이다.

1.5.왜 자신이 예에 따라 쓴 코드를 보여도 그림을 찾지 못합니까


 
ext에서는 항상 공백 그림을 점위 기호로 하고 css에 설정된 배경 그림으로 표시합니다. 이렇게 하면 테마를 바꾸는 데 도움이 됩니다.이 빈 그림의 이름은 바로 Ext.BLANK_입니다.IMAGE_URL, 기본적으로 BLANK_IMAGE_URL : "http:/"+"/extjs.com/s.gif".비록 그림은 매우 작지만 인터넷에서 다운로드해야 하기 때문에 일단 다운로드에 실패하면 그림을 찾을 수 없다는 것을 나타낸다.
여기 보시면 이상한 분이 계실 거예요. 왜 examples의 예에서 그림을 찾을 수 없는 문제가 없습니까?보아하니 너는 예들의 코드를 자세히 보지 못한 것 같다. 예마다 인용했다.../examples.js.examples.js에 Ext.BLANK가 설치되어 있습니다_IMAGE_URL = 'http://www.cnblogs.com/resources/images/default/s.gif';.그래서 자신이 쓴 예에서 그림을 찾을 수 없는 문제를 해결하려면 examples에 따라야 한다.js에서 s.gif의 로컬 경로를 수정하면 됩니다.간단하죠?

1.6.우리는 또 무엇을 필요로 합니까?


 
  • Firefox에 대한 본인의 사랑과 Firebug가 js를 디버깅하는 과정에서 편리함을 가지고 Firefox+firebug의 개발 조합을 성대하게 추천합니다.게다가 ext 개발자들도 모두 Firefox에서 개발하는 경향이 있기 때문에 일반적으로 Firefox에서 잘 뛰기 때문에 i에 올리면 문제가 발생한다.이것도 i 자체의 문제와 관련이 있다. 그러나 현재 i는 90%의 브라우저 시장을 차지하고 있다. 마지막으로 우리는 자신의 프로젝트를 i에서 뛰게 해야 하기 때문에 우리는 크로스 브라우저의 js를 쓸 수 있도록 요구한다.Firebug의 장점은 동적으로 생성된dom를 표시할 수 있고, 심지어는 Firebug에서dom를 직접 수정할 수 있으며, 이러한 수정은 디스플레이에 직접 반응할 수 있다는 것이다.대단합니다. Firebug가 제공하는 console는 js 스크립트를 직접 실행하고 console를 설정할 수 있습니다.debug,console.info,console.error 등 로그 방법은 추적에 더욱 편리하다.aax가 수신한 데이터에 대해firebug는 모두 표시할 수 있으며, 발송된 매개 변수와 되돌아오는 상태와 정보를 볼 수 있습니다

  • 1.7.입문하기 전에 헬로월드를 보세요.


     
    가장 기본적인 응용도 할 수 없는 동지를 배려하기 위해서 우리는 두 개의 입문판 Helloworld 범례를 제시하고 설명을 결합하여 당신을 입문하게 합니다.

    1.7.1.다운로드된 게시 패키지 직접 사용


     
  • 먼저 가요.http://www.extjs.com/downloadzip 형식의 발표 패키지를 다운로드합니다
  • 어떤 디렉터리로 압축을 풀든지 디렉터리 이름이 무엇이든지 간에 마지막에 안에 이런 디렉터리 구조를 보아야 한다.
  • 현재 우리는 그것의 디렉터리 구조를 이용하여 Helloworld의 예를 하나 쓴다.위 그림의 examples 디렉터리에 들어가서 Helloworld 디렉터리를 새로 만들고, Helloworld 디렉터리 아래에 Helloworld를 새로 만듭니다.html 파일, 아래 내용을 index에 복사합니다.html 파일 중..
    <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/resources/css/ext-all.css" />
        <script type="text/javascript" src="http://www.cnblogs.com/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://www.cnblogs.com/ext-all.js"></script>
        <script type="text/javascript" src="../examples.js"></script>
        <script>
        Ext.onReady(function(){
        Ext.MessageBox.alert('helloworld', 'Hello World.');
        });
        </script>
  • helloworld를 두 번 클릭합니다.html 페이지를 열면 효과는 다음과 같습니다.

  • 반갑습니다. 저희의 Helloworld 범례가 정확하게 실행되었습니다. 다음 단계는 examples 디렉터리에 있는 예들을 모두 보고 안에 있는 코드가 어떻게 쓰여 있는지 보고 ext의 풍격을 잘 느끼고 계속하는 것이 좋습니다.

    1.7.2.필요한 것만 항목에 넣다


     
    ext를 자신의 프로젝트에 넣으려면 스스로 정리해야 한다. 왜냐하면 가방 안의 물건이 모두 필요한 것이 아니기 때문이다. 예를 들어 문서, 예를 들어 원본 코드 등이다.
    필요한 최소 집합은 다음과 같습니다. ext-all.js,adapter/ext/ext-base.js,build/locale/ext-lang-zh_CN.js와 전체 리소스 디렉터리.
  • ext-all.js,adapter/ext/ext-base.js는 ext의 모든 기능을 포함하고 있으며, 모든 js 스크립트는 여기에 있습니다..
  • build/locale/ext-lang-zh_CN.js는 중국어 번역입니다
  • 리소스 디렉터리에 css 스타일시트와 그림이 있습니다

  • 자신의 프로젝트에 이 물건들만 포함하면 ext를 사용할 수 있습니다.사용 시 페이지에서 가져오기
    <link rel="stylesheet" type="text/css" href="${ ext }/resources/css/ext-all.css" />
    <script type="text/javascript" src="${ ext }/ext-base.js"></script>
    <script type="text/javascript" src="${ ext }/ext-all.js"></script>
    <script type="text/javascript" src="${ ext }/ext-lang-zh_CN.js"></script>

    js 스크립트의 가져오기 순서를 주의하십시오. 다른 것은 자유롭게 발휘할 수 있습니다.

    좋은 웹페이지 즐겨찾기