ExtJs4.0 학습 노트 (1) - Ext.Loader is not enabled

3861 단어
이 오류가 발생한 원인은 Ext의 자동 불러오기 기능이 켜지지 않았기 때문이다. 흔히 볼 수 있는 수정 방식은 수동으로 코드를 추가함으로써 이루어진다.
예를 들어 프로그램의 적당한 위치에 다음 코드 세그먼트를 넣는다.
Ext.Loader.setConfig({enabled:true});

그러나 이것은 내가 직면한 문제를 해결하지 못했다. 나의 문제는 주로 인용 가방의 순서에서 나온 것이다. 이 점이 구체적으로 어떤 원인인지 나도 잘 모르겠다.
같은 문제에 부딪힌 고수가 나를 도와 해답을 해 주기를 바란다.
다음은 제 문제의 해결 방법입니다.
여기서 Ext의 controller를 사용했습니다. 여기에 두 개의 Js 파일이 있습니다. 아래와 같습니다.
Ext.application({
	name: 'AM',
	
	appFolder: 'app',
	
	controllers: [
        'Users'
    ],
	
	launch: function() {
		
		Ext.define('WeatherPoint', {
    		extend: 'Ext.data.Model',
    		fields: ['temperature', 'date']
		});
		
		var store = Ext.create('Ext.data.JsonStore', {
    		fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
    		data: [
        		{'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
        		{'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
        		{'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
        		{'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
        		{'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
    		]
	    });
		
		Ext.create('Ext.chart.Chart', {
   			renderTo: Ext.getBody(),
   			width: 400,
   			height: 300,
   			store: store,
   		
   			axes: [
        	{
            	title: 'Temperature',
            	type: 'Numeric',
            	position: 'left',
            	fields: ['temperature'],
           	 	minimum: 0,
            	maximum: 100
        	},
        	{
            	title: 'Time',
            	type: 'Time',
            	position: 'bottom',
            	fields: ['date'],
            	dateFormat: 'ga'
        	}
    		]
		});
	}
});
위의 스크립트에서 컨트롤러를 도입했습니다.
Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    init: function() {
        console.log('Initialized Users! This happens before the Application launch function is called');
    }
});
제가 정의한 컨트롤러입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Hello Ext</title>
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">    
    <script type="text/javascript" src="bootstrap.js"></script>
    <script type="text/javascript" src="ext-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
이상의 html 파일은 제 문제입니다. 상기 프로그램은 정상적으로 실행할 수 있고 Controller는 정상적으로 사건을 감청할 수 있습니다.
그러나 두 파일이 도입된 순서를 바꾸면 Ext.Loader is not enabled 오류가 발생하여 AM을 찾을 수 없음을 알립니다.controller.Users, 두 파일을 대체하는 위치는 다음과 같습니다.
    <script type="text/javascript" src="ext-debug.js"></script>
    <script type="text/javascript" src="bootstrap.js"></script>

그중에서bootstrap.js 파일은 주로 필요한 js 파일을 호출합니다. 그 중에서 ext-debug도 포함됩니다.js 파일, 하지만 ext-debug.js가 프로그램을 삭제해도 오류가 발생합니다.
한 마디로 하면 여러분도 이런 문제에 부딪히면 이렇게 해결할 수 있습니다. 그리고 제시된 점은 Ext에서 파일의 도입 순서도 요구된다는 것입니다.

좋은 웹페이지 즐겨찾기