웹 애플리케이션 설계에 있어서 가장 유연하고 강력한 방법은 Douglas Crockford 에 의해서 제안된 Module pattern이 아닐까 생각합니다.

http://yuiblog.com/blog/2007/06/12/module-pattern/
http://www.wait-till-i.com/2007/08/22/again-with-the-module-pattern-reveal-something-to-the-world/




고급 레벨 어플리케이션 개발을 위해서는 HTML의 document.body를 캡슐화 하기 위해서 Ext.Viewport를 사용해야 합니다.

이 말은 즉 여러분이 만들게 되는 애플리케이션이나 ExtJS의 콤포넌트들이 Viewport의 아규먼트화 되어 동작하게 됩니다.

// in customTree.js
var customTree = new Ext.tree.TreePanel({ }); 
// in customPanel.js
var customPanel = new Ext.Panel({ }); 
// in customGrid.js
var customGrid = new Ext.Grid({ }); 

바로 이 부분들이 각각의 External JavaScript 파일에서 구현되어지고 이는 MyApp 에 의해 반환되어질 Viewport 의 콤포넌트들로 동작하게 됩니다.

MyApp = (function(){
    var count = 0;
    var increaseCount = function(){
        count++;
    };
 
// MyApp 오브젝트에 할당되어진 함수로부터 반환하는 것
// 애플리케이션은 추가적인 특별한 기능들을 갖는 Viewport 이다.
    return new Ext.Viewport({
        layout: 'border',
        items: [{
            region: 'north',
            height: 100,
            el: 'header-element-id'
        },
        customTree, customPanel, customGrid ],

        getCount : function(){ 
            return count;
        },

        checkCount : function(){
            increaseCount();
            if (this.getCount() > 10)
                alert("카운트가 10보다 크다");
        }
    }
})();

위 소스는 구조적 설명을 위해 ExtJS 사이트에서 참조하고 수정되어 동작됨은 확인하지 않았습니다.

원글 : http://extjs.com/learn/Manual:Advanced_Application_Design


신고
Posted by Rhio.kim