Динамическая загрузка классов
В ExtJS 4 существует возможность динамически подгружать нужные нам классы. Во-первых, выделим классы в отдельные файлы и расположим их в определенном месте на физическом диске.
Выделим следующий класс в файл Person.js (файлы должны иметь имена, соответствующие именам классов):
Ext.define('Classes.Person', {
config: {
name: 'Eugene',
surname : 'Popov'
},
constructor: function(name, surname) {
this.initConfig();
if(name){
this.setName(name);
}
if(surname){
this.setSurname(surname);
}
},
getinfo: function(){
alert("Полное имя : " + this.name + " " + this.surname);
},
});
А класс Manager, который наследуется от класса Person, в файл Manager.js:
Ext.define('Classes.Manager', {
extend: 'Classes.Person',
config: {
department: 'sales'
},
constructor: function(name, surname, department) {
this.initConfig();
if(department){
this.setDepartment(department);
}
this.callParent([name, surname]);
},
getinfo: function(){
this.callParent();
alert("Департамент : " + this.department);
}
});
Затем поместим их в определенном месте. Так как они находятся в пространстве имен Classes, то создадим в текущей директории, где находится
наша html-страница, папку Classes и поместим в нее файлы Person.js и Manager.js:
Исходя из скриншота моя html-страница находится в папке helloext, а выше упомянутые классы - в папке helloext/Classes.
Теперь изменим html-страницу следующим образом:
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" >
<script type="text/javascript" src="../extjs/ext-all-dev.js"></script>
<script>
Ext.Loader.setConfig({
enabled: true,
path: { 'Classes' : 'Classes' }
});
Ext.require('Classes.Manager', function(){
var eugene = Ext.create('Classes.Manager','Tom', 'James', 'Software');
eugene.getinfo();
});
</script>
</head>
<body></body>
</html>
Таким образом, мы вынесли весь функционал классов во внешние файлы. И используя класс Ext.Loader, мы сопоставляем физический путь
с пространством имен (path: { 'Classes' : 'Classes' } - где жирным выделен путь, с которым сопоставляется пространство имен) и
загружает все классы по указанному пути.
Затем с помощью функции Ext.require загружаются в приложение классы. В качестве второго параметра указывается функция обратного вызова, которая срабатывает при загрузке класса.
Нам необязательно выполнять некоторые действия в качестве функции обратного вызова метода Ext.require. Мы можем сначала
загрузить все нужные нам классы с помощью методов Ext.require, а потом с помощью обработки события Ext.onReady
выполнить всю остальную логику приложения:
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" >
<script type="text/javascript" src="../extjs/ext-all-dev.js"></script>
<script>
Ext.Loader.setConfig({
enabled: true,
path: { 'Classes' : 'Classes' }
});
Ext.require('Classes.Manager');
Ext.onReady(function(){
var eugene = Ext.create('Classes.Manager','Tom', 'James', 'Software');
eugene.getinfo();
});
</script>
</head>
<body></body>
</html>
Кроме того, мы можем добавлять сопоставления классов с физическими путями дополнительно с помощью метода Ext.Loader.setPath:
Ext.Loader.setPath('Classes','Classes');
Ext.Loader.setPath('MyModels','Classes/MyModels');