ExtJs는 소스 코드를 분석하여 컨트롤러를 동적으로 로드하는 문제를 해결합니다.

소스코드를 분석하여 Controller를 동적으로 로딩하는 문제 해결

최근에 ExtJs의 MVC 개발 모드(4.2.0)에 대해 공부하고 있는데 Extjs의 MVC 사용법은 여기에서 설명하지 않습니다.자세한 내용은 ExtJs의 공식 문서를 참조하십시오. 여기서 해결해야 할 문제는 MVC 패턴을 사용할 때 컨트롤러의 동적 로딩을 어떻게 해결하느냐 하는 것이다.
이것은 일반적인 작성 방법이며 애플리케이션에서 컨트롤러를 구성합니다.
신청

Ext.application({

    ...



    controllers: [

        'Users'

    ],



    ...

});

제어 장치

Ext.define('AM.controller.Users', {

    extend: 'Ext.app.Controller',



    stores: [

        '[email protected]'

    ],



    models: [

        '[email protected]'

    ],



    views: [

        '[email protected]',

        '[email protected]'

    ],



    refs: [

        {

            ref: 'usersPanel',

            selector: 'panel'

        }

    ]

    ...

});

이 경우 ExtJ는 애플리케이션을 초기화할 때 구성된 [컨트롤러]를 로드하고 컨트롤러는 [보기][저장소][모델]에 종속됩니다.
이 경우 ExtJ는 이러한 클래스의 JS 파일을 동적으로 로드합니다. 이것은 일반적인 방법입니다. 이 방법의 한 가지 문제는 응용 프로그램이 크면 응용 프로그램에 많은 컨트롤러가 구성된다는 것입니다. 그러면 ExtJ가 처음 로드될 때 매우 느려지므로 이 문제를 해결하는 방법은 다음과 같습니다.
 
가장 먼저 떠오른 것은 Ext.app.Application 클래스의 소스 코드를 보고 컨트롤러를 로드하는 방법을 확인하는 것입니다.
소스 코드를 열고 먼저 생성자를 살펴봅니다.

    constructor: function(config) {

        var me = this;



        //<debug>

        if (Ext.isEmpty(me.name)) {

            Ext.Error.raise("[Ext.app.Application] Name property is required");

        }

        //</debug>

　　　　　

        me.callParent(arguments);

        
        //调用继承至Ext.app.Controller的方法 设置初始化状态

        me.doInit(me);

        //初始化命名空间

        me.initNamespace();
        
        //这个方法是核心方法 由它来初始化controller的 那么我们看看这个方法到底做了什么 me.initControllers();

        //初始化后调用一些事件(不重要)

        me.onBeforeLaunch();

        me.finishInitControllers();

    }

    initControllers: function() {

        var me = this,

            controllers = Ext.Array.from(me.controllers);



        me.controllers = new Ext.util.MixedCollection();



        for (var i = 0, ln = controllers.length; i < ln; i++) {

            me.getController(controllers[i]);

        }

    }

initControllers 메소드를 설명하자

controllers: [

        'Users'

],

1 拿到配置的 controllers(在application中定义地的) 并转换成数组

controllers = Ext.Array.from(me.controllers);

2 设置me.controllers = new Ext.util.MixedCollection();(类似于java的HashMap key value形式)

me.controllers = new Ext.util.MixedCollection();

3 循环controllers 调用了application的getController('你配置的controller')方法,并把每一个controller传过去.那么这里就是('Users')

for (var i = 0, ln = controllers.length; i < ln; i++) {

            me.getController(controllers[i]);

    }

其实本文的重点就是Application.getController(name)方法

    getController: function(name) {

        var me          = this,

            controllers = me.controllers,

            className, controller;



        controller = controllers.get(name);



        if (!controller) {

            className  = me.getModuleClassName(name, 'controller');



            controller = Ext.create(className, {

                application: me,

                id:          name

            });



            controllers.add(controller);



            if (me._initialized) {

                controller.doInit(me);

            }

        }



        return controller;

    },

여기에서 각 컨트롤러에 따라 로드할 수 있으며 로드 후 doInit 메소드를 호출하여 컨트롤러를 초기화합니다.

if (me._initialized) {

                controller.doInit(me);

            }

Application loading Controller의 원리를 이해했기 때문에 필요에 따라 동적으로 로드할 수 있습니다.

MyApplication.getController("Users")