Introduction to the requires usage method sample in ExtJS4
- 2020-03-30 00:41:00
- OfStack
ExtJS4's requires is a new mechanism that implements asynchronous loading. In this way, the corresponding js file will not be loaded without clicking the corresponding button or option, which improves the loading speed and user waiting time.
The implementation of the requires mechanism USES an ext.loader.setconfig function to set the mapping directory the file is looking for, and then loads it using ext.require if the corresponding js file is needed.
The storage structure of the file is as follows:
< img SRC = "border = 0 / / img.jbzj.com/file_images/article/201312/201312031729052.gif? 2013113172926 ">
The ux folder is in the same directory as the lesson2.htm and lesson22.js, and the used mywin.js is in the ux folder.
The code in lesson2.html looks like this:
In this code block, the mywin.js file in the ux directory is not loaded, so when the page is loaded, the mywin.js file is not loaded at the same time, but only when needed. The need here is done by clicking on the button.
The contents of the lesson22.js file are as follows:
The contents of the mywin. js file in the ux directory are as follows:
Note: the file name MyWin here must be the same as the function name, I tried it out, if it is not the same, it will not be displayed.
I started with the method that ExtJS4 on the uspcat taught me in lecture 2, but it didn't produce the results I wanted. It could be a version problem, or it could be my own problem. With this modification, I was able to use the requires method. This note is for the use of people with the same confusion.
The implementation of the requires mechanism USES an ext.loader.setconfig function to set the mapping directory the file is looking for, and then loads it using ext.require if the corresponding js file is needed.
The storage structure of the file is as follows:
< img SRC = "border = 0 / / img.jbzj.com/file_images/article/201312/201312031729052.gif? 2013113172926 ">
The ux folder is in the same directory as the lesson2.htm and lesson22.js, and the used mywin.js is in the ux folder.
The code in lesson2.html looks like this:
<!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 block, the mywin.js file in the ux directory is not loaded, so when the page is loaded, the mywin.js file is not loaded at the same time, but only when needed. The need here is done by clicking on the button.
The contents of the lesson22.js file are as follows:
(function(){
Ext.Loader.setConfig({
enabled:true, //Enable asynchronous load mode
paths:{
myApp:'lesson2/ux' //Declare the location of the file
}
});
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:
Ext.define('ux.MyWin',{
extend:'Ext.window.Window',
title:'sign up',
width:400,
height:300
});
Note: the file name MyWin here must be the same as the function name, I tried it out, if it is not the same, it will not be displayed.
I started with the method that ExtJS4 on the uspcat taught me in lecture 2, but it didn't produce the results I wanted. It could be a version problem, or it could be my own problem. With this modification, I was able to use the requires method. This note is for the use of people with the same confusion.