ExtJS4 требует нового механизма, в основном для реализации механизма асинхронной загрузки. Таким образом, соответствующий js-файл не будет загружен, пока не будет нажата соответствующая кнопка или параметр, что улучшает скорость загрузки и время ожидания пользователя.
Механизм require реализован с помощью функции Ext.Loader.setConfig, позволяющей установить каталог сопоставления для поиска файлов, а затем использовать Ext.require для загрузки соответствующего js-файла, когда это необходимо.
Структура хранения файла следующая:
Папка ux находится в том же каталоге, что и урок2.htm и урок22.js, а используемый файл MyWin.js хранится в папке ux.
Код в уроке 2.html выглядит следующим образом:
Скопируйте код кода следующим образом:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Рабочий стол extjs4</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>
</голова>
<тело>
<button id="myButton" align="center">показать</button>
</тело>
</html>
В этом фрагменте кода файл MyWin.js в каталоге ux не загружается, поэтому при загрузке страницы файл MyWin.js не будет загружаться одновременно, а при необходимости будет загружен снова. Потребность здесь достигается нажатием кнопки.
Содержимое файла урок22.js следующее:
Скопируйте код кода следующим образом:
(функция(){
Ext.Loader.setConfig({
Enabled:true, //Включаем режим асинхронной загрузки
пути:{
myApp:'lesson2/ux' //Расположение файла объявления
}
});
Ext.onReady(функция(){
Ext.require('ux.MyWin',function(){
var mw = Ext.create('ux.MyWin',{
title:'мой тест'
});
Ext.get('myButton').on('click',function(){
МВ.шоу();
});
});
});
})();
Содержимое файла MyWin.js в каталоге ux следующее:
Скопируйте код кода следующим образом:
Ext.define('ux.MyWin',{
расширить:'Ext.window.Window',
title:'зарегистрироваться',
ширина: 400,
высота:300
});
Примечание. Имя файла MyWin и имя функции должны быть одинаковыми. Я проверял. Если они разные, оно не будет отображаться.
Вначале я использовал метод написания второй лекции обучающего видео по ExtJS4 на uspcat, но желаемый результат не появился. Это может быть проблема версии, а может быть, это моя собственная проблема, изменив ее. это я могу использовать требует метода. Это примечание для тех, у кого такое же замешательство.