서문

     1.ExtJs는 좋은 백그라운드 프레임워크입니다.지금은 매우 유행하는데, 우리는 할 수 있다.
        2.이것은 내가 ExtJs를 쓴 첫 편인데 앞으로 이 틀을 운용할 때까지 많은 것을 쓸 것이다.

ExtJs의 네임스페이스

나는 한다.net의 경우 이 명칭 공간의 이름과 기능도 마찬가지로 프로젝트의 클래스를 효과적으로 관리하고 클래스를 구분하는 작용역이다.그들의 차원 구조는 모두 "를 사용한다."구분해 보겠습니다.다만 정의할 때는 다르다.Ext는 namespace () 방법으로 정의됩니다.(여기는 내가 먼저 보여주지 않겠다. 예에서 내가 쓸 것이다)

Javascript의 클래스 정의

      1.JavaScript는 클래스 개념이 없는 원형 체인을 기반으로 하는 언어입니다.그리고 자바스크립트 언어의 특징은 느슨함과 자유이다. 같은 기능을 실현하는 데는 여러 가지 방식이 있지만 느슨함과 자유를 방치하면 코드를 유지하고 다시 사용하기 어렵다.      2.대상을 대상으로 프로그래밍하는 것은 대부분 클래스에 기초한 것이다.그러나 extjs로 하여금 oop 메커니즘을 실현하게 하면 대상을 대상으로 프로그래밍하는 규범성과 자바스크립트의 유연성을 실현할 수 있다.불가능한 것은 아닙니다. js의prototype를 반드시 알아야 합니다.      

        // Person ， js 
        Person = function () {
            this.head = 1;
            this.legs = 2;
            this.sex="or";
        }

        Person.prototype =
        {
            say: function () {
                alert("I'm a person , I have " + this.head + " head and " + this.legs + " lesgs .");
            },
            run: function () {
                alert("I can fly ,because I have " + this.head + " head");
            },
            saySex:function(){
                 alert("I'm a "+this.sex);
            }
            // 
        }

        var person = new Person();
        alert(person.head);  // ：1
        person.say(person.head, person.legs); // ：I'm a person , I have 1 head and 2 lesgs .
        person.run(this.head);  // ：I can fly ,because I have 1 head

prototype은 js에서 매우 중요한 기능입니다.동적으로 대상에 새로운 방법을 추가할 수 있습니다.ExtJs는 프로토타입을 기반으로 OOP를 실현합니다.

ExtJs의 OOP

대상을 향한 디자인 사상이라면 계승, 다태, 봉인이 있을 것이다.
ExtJs는javascript로 봉인된 백엔드 응용 프레임워크입니다. 먼저 extJs가oop을 어떻게 실현하는지 보겠습니다.
1. 네임스페이스,public,private.        

        //js   ，public，private
        Ext.namespace("com.zlh");
        com.zlh.seeInfo = function () {
            // 
            var name = "zhanglonghao";
            // 
            say = function () { alert(" I'm  zhanglonghao . "); }
            // 
            sayEgg = function () { alert(" You are a bad egg ! "); }

            //  
            return {

                //  say（）， name

                // 
                sayHello: function () { alert(" Hellow everyone . do you know " + name + " ?"); },
                // 
                run: function () { alert(" I want to fly higher . "); }
            };
        };

        com.zlh.seeInfo.prototype.age = 24;

        //  name， say();
        var zlh = new com.zlh.seeInfo();
        zlh.sayHello();
        zlh.run();

2. js 구현류의 계승

  // Person ， js 
        Person = function () {
            this.head = 1;
            this.legs = 2;
            this.sex="or";
        }

        Person.prototype =
        {
            say: function () {
                alert("I'm a person , I have " + this.head + " head and " + this.legs + " lesgs .");
            },
            run: function () {
                alert("I can fly ,because I have " + this.head + " head");
            },
            saySex:function(){
                 alert("I'm a "+this.sex);
            }
            // 
        }


 // 
        var extend = function (p, c) {
            c.prototype = p.prototype;
        }

        Man = function () {
            this.sex = "Man";
        }

        extend(Person, Man);
        var gc = new Man();
        gc.saySex(this.sex);

3. extjs 구현류의 계승

  //js   ，public，private
        Ext.namespace("com.zlh");
        com.zlh.seeInfo = function () {
            // 
            var name = "zhanglonghao";
            // 
            say = function () { alert(" I'm  zhanglonghao . "); }
            // 
            sayEgg = function () { alert(" You are a bad egg ! "); }

            //  
            return {

                //  say（）， name

                // 
                sayHello: function () { alert(" Hellow everyone . do you know " + name + " ?"); },
                // 
                run: function () { alert(" I want to fly higher . "); }
            };
        };

        com.zlh.seeInfo.prototype.age = 24;  

  //love seeInfo
        Ext.extend(com.zlh.love, com.zlh.seeInfo, {

            // 
            loveYou: function () {
                alert(" You , my love ! ");
            },

            // 
            say: function () {
                alert(" I love you !");
            }

        });

       var ejc = new com.zlh.love();
       ejc.say();
       ejc.loveYou();
       alert(ejc.age);  // 24
       alert(ejc.name); // undefind

구성(Config) 옵션

Extjs에서 대상을 초기화할 때 Config라는 매개 변수를 대량으로 사용했고 Config는 json 대상으로 Extjs에 많은 공을 세웠다.
만약에 블로그 클래스가 하나 있고 제목과 저자 두 개의 속성이 있으며 구조 함수를 통해 속성을 초기화합니다.          

   Blog = function (title, author) {
            this.title = title;
            this.author = author;
        }

        var Blog = new Blog("Extjs-OOP", " ");
        alert(Blog.title+" ,  ："+Blog.author+"。 。");

위의 이 코드의 데이터는 우리가 json으로 대체한다.         

  Blog = function (config) {
            this.title = config.title;
            this.author = config.author;
        }

        var Blog = new Blog({title:"Extjs-OOP", author:" "});
        alert(Blog.title+" ,  ："+Blog.author+"。 。");

다음은 Extjs의 실현 방식을 살펴보겠습니다.

   Blog = function (config) {
            Ext.apply(this,config);
        }

        var Blog = new Blog({title:"Extjs-OOP", author:" "});
        alert(Blog.title+" ,  ："+Blog.author+"。 。");

Extjs가 정의한 apply 이 방법은 두 번째 파라미터의 구성원을 첫 번째 파라미터에 값을 부여하는 역할을 한다. 이렇게 하면 코드를 쓰기가 편리하고 간편하다.

Ext.apply() 및 Ext.applyIf()

위에서 우리는 이미 apply(obj,config)의 기능을 보았습니다. applyIf(obj,config)의 기능은 apply(obj,config)의 기능과 같고 다른 것도 있습니다.
apply는 config와obj 매개 변수의 동명 속성 값을 덮어쓰고 config의 다른 속성을 obj에 추가합니다.
apply는 config의 속성을 obj에 추가하지만,obj 매개 변수의 원래 속성 값은 변하지 않습니다.(예를 들어 봅시다)
     apply(obj,config);

 Blog = function (config) {
            this.title = "Extjs-OOP";
            Ext.apply(this,config);
        }

        var Blog = new Blog({ title: " Extjs4.*， 。 ", author: " " });    // ：Extjs-OOP， ： . 。
        alert(Blog.title+" ,  ："+Blog.author+"。 。");

        applyIf(obj,config);             

        Blog = function (config) {
            this.title = "Extjs-OOP";
            Ext.applyIf(this,config);
        }

        var Blog = new Blog({ title: " Extjs4.*，  ", author: " " });    // ：Extjs-OOP， ： . 。
        alert(Blog.title+" ,  ："+Blog.author+"。 。");

               
이 블로그는 extjs를 배우는 기초 지식의 보급이다.실제와 무관해 보이는 것이 중요하다.저는 Extjs4.2를 사용합니다.문장 js 인용: ext-all.js.
본문 참고 자료: 이찬홍 선생님의 《extJs를 쉽게 해치우다》