ExtJs4.0学习笔记(1)——Ext.Loader is not enabled

出现该错误的原因是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'
        	}
    		]
		});
	}
});
在上面的脚本中,我引入了一个Controller

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    init: function() {
        console.log('Initialized Users! This happens before the Application launch function is called');
    }
});
这是我定义的controller

<!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中文件的引入顺序也是有要求的。





你可能感兴趣的:(ExtJs4.0学习笔记(1)——Ext.Loader is not enabled)