ExtJS4's requires is a new mechanism, mainly to implement asynchronous loading mechanism. In this way, the corresponding js file will not be loaded unless the corresponding button or option is clicked, which improves the loading speed and user waiting time.
The requires mechanism is implemented through an Ext.Loader.setConfig function to set the mapping directory for file search, and then use Ext.require to load the corresponding js file when it is needed.
The storage structure of the file is as follows:
The ux folder is in the same directory as lesson2.htm and lesson22.js, and the MyWin.js used is stored in the ux folder.
The code in lesson2.html is as follows:
Copy the code code as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>extjs4 desktop</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>
<body>
<button id="myButton" align="center">show</button>
</body>
</html>
In this code piece, the MyWin.js file in the ux directory is not loaded, so when the page is loaded, the MyWin.js file will not be loaded at the same time, but will be loaded again when needed. The need here is achieved by clicking the button.
The content of lesson22.js file is as follows:
Copy the code code as follows:
(function(){
Ext.Loader.setConfig({
enabled:true, //Enable asynchronous loading mode
paths:{
myApp:'lesson2/ux' //Declaration file location
}
});
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();
});
});
});
})();
The contents of the MyWin.js file in the ux directory are as follows:
Copy the code code as follows:
Ext.define('ux.MyWin',{
extend:'Ext.window.Window',
title:'sign up',
width:400,
height:300
});
Note: The file name MyWin and the function name here must be the same. I tested it. If they are different, it will not be displayed.
At the beginning, I used the method of writing in the second lecture of the ExtJS4 teaching video on uspcat, but I still couldn't get the results I wanted. It may be a version problem or my own problem. By modifying it like this, I can use requires method. This is a note for those who have the same confusion.