参考:http://stackoverflow.com/questions/7725911/dynamically-manage-ext-app-application-controllers
目录结构参考Ext经典目录,此处不在截图。
1,打开Ext的动态加载机制,在app.js首部加入如下代码:
Ext.Loader.setConfig({enabled: true});
2,确保已经定义Controller类,比如定义一个叫Menu的Controller。方法如下
$touch app/controller/Menu.js && vi app/controller/Menu.js
Menu.js:
Ext.define('Appname.controller.Menu', {
extend: 'Ext.app.Controller', // leave it as it is
models: ['Event','User'], // this assumes App.model.* prefix
stores: ['Options','Permissions'], // this assumes App.store.* prefix
views: ['menu.Bar','SmartButton'],// this assumes App.view.* prefix
requires: [
'App.whatever.other.class', // auto-load this class as a dependency
'WidgetsLibrary.*', // auto-load all classes in WidgetsLibrary
],
init: function(){}
// [...]
3. 动态加载。方法如下:
Ext.require(
'App.controller.Menu', // this auto-loads all dependencies
function(){
// ... as soon as this class
// and all its dependencies have loaded...
var controller = Ext.create('App.controller.Menu'); // create an instance
controller.init(); // launch init() method
}
);
如果需要判断,是否已经加载Menu。可使用
if(Ext.ClassManager.isCreated('App.controller.Menu')){
// ... controller has already been loaded and init ...
}else{
// we need to auto-load that controller using Ext.require()
}
更多内容:
api: http://docs.sencha.com/extjs/4.2.0/#!/api/Ext-method-require
程序结构: http://docs.sencha.com/extjs/4.2.0/#!/guide/application_architecture