ExtJS4_extjs에서 require 사용에 대한 소개 예

ExtJS4의 요구 사항은 주로 비동기 로딩 메커니즘을 구현하기 위한 새로운 메커니즘입니다. 이렇게 하면 해당 버튼이나 옵션을 클릭하지 않으면 해당 js 파일이 로드되지 않으므로 로딩 속도와 사용자 대기 시간이 향상됩니다.

Requires 메커니즘의 구현에서는 Ext.Loader.setConfig 함수를 사용하여 파일 검색을 위한 매핑 디렉터리를 설정한 다음 필요할 때 Ext.require를 사용하여 해당 js 파일을 로드합니다.

파일의 저장 구조는 다음과 같습니다.

ux 폴더는 Lesson2.htm, Lesson22.js와 같은 디렉터리에 있으며, 사용된 MyWin.js는 다음 폴더에 저장됩니다. ux 폴더에 있습니다.

Lesson2.html의 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

🎜>< ;html>

;/제목> ;









이 코드 조각에서 ux 디렉토리는 파일이 로드되지 않은 경우 페이지가 로드될 때 MyWin.js 파일은 동시에 로드되지 않고 필요할 때만 로드됩니다. 여기서 필요한 것은 버튼을 클릭하여 달성됩니다.

Lesson22.js 파일 내용은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다. : (function(){ Ext.Loader.setConfig({

enabled:true, //비동기 로딩 모드 활성화

paths:{
myApp:' Lesson2/ux' //Statement 파일 위치
}
})

Ext.onReady(function(){
Ext.require('ux.MyWin',function (){

var mw = Ext.create('ux.MyWin',{
title:'my Test'
})
Ext.get('myButton'). on('click',function() {
mw.show();
})
})
}); >

ux 디렉토리 .define('ux.MyWin',{
extend:'Ext.window.Window',
title:'sign up' 아래의 MyWin.js 파일 내용 ,
width:400,
height:300
} );

참고: MyWin 파일 이름과 여기에 있는 함수 이름이 동일해야 하며 테스트했습니다. 다르면 표시되지 않습니다.

처음에는 uspcat의 ExtJS4 강의 영상 2번째 강의에서 작성하는 방법을 사용했는데, 버전 문제이거나 저만의 문제일 수도 있습니다. 이 수정에서는 require 메소드를 사용할 수 있습니다. 같은 고민을 하시는 분들을 위한 참고사항입니다.