ExtJS4의 요구 사항은 주로 비동기 로딩 메커니즘을 구현하기 위한 새로운 메커니즘입니다. 이렇게 하면 해당 버튼이나 옵션을 클릭하지 않으면 해당 js 파일이 로드되지 않으므로 로딩 속도와 사용자 대기 시간이 향상됩니다.
require 메커니즘은 Ext.Loader.setConfig 함수를 통해 구현되어 파일 검색을 위한 매핑 디렉터리를 설정한 다음 필요할 때 해당 js 파일을 로드하기 위해 Ext.require를 사용합니다.
파일의 저장 구조는 다음과 같습니다.
ux 폴더는 Lesson2.htm, Lesson22.js와 같은 디렉터리에 있고, 사용된 MyWin.js는 ux 폴더에 저장되어 있다.
Lesson2.html의 코드는 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>extjs4 데스크톱</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="../../extjs4/resources/css/ext-all.css" />
<script type="text/javascript" src="../../extjs4/bootstrap.js"></script>
<script type="text/javascript" src="lesson22.js"></script>
</head>
<본문>
<button id="myButton" align="center">표시</button>
</body>
</html>
이 코드 조각에서는 ux 디렉터리에 있는 MyWin.js 파일이 로드되지 않으므로 페이지가 로드될 때 MyWin.js 파일이 동시에 로드되지 않고 필요할 때 다시 로드됩니다. 여기서 필요한 것은 버튼을 클릭하여 달성됩니다.
Lesson22.js 파일의 내용은 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
(기능(){
Ext.Loader.setConfig({
활성화:true, //비동기 로딩 모드 활성화
경로:{
myApp:'lesson2/ux' //선언 파일 위치
}
});
Ext.onReady(함수(){
Ext.require('ux.MyWin',function(){
var mw = Ext.create('ux.MyWin',{
제목:'나의 테스트'
});
Ext.get('myButton').on('클릭',function(){
mw.show();
});
});
});
})();
ux 디렉터리에 있는 MyWin.js 파일의 내용은 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
Ext.define('ux.MyWin',{
확장:'Ext.window.Window',
제목:'가입',
너비:400,
높이:300
});
참고: MyWin 파일 이름과 여기에 있는 함수 이름이 동일해야 합니다. 테스트한 내용이 다르면 표시되지 않습니다.
처음에는 uspcat의 ExtJS4 강의 영상 2번째 강의에서 작성하는 방법을 사용했는데, 버전 문제일 수도 있고, 저만의 문제일 수도 있습니다. 이 경우에는 require 메소드를 사용할 수 있습니다. 같은 고민을 하시는 분들을 위한 참고사항입니다.