[02]EXTJS4.0의 새로운 기능

노트:
1. JS 클래스 선언 및 객체 작성
2. 원형 방법은 EXTJS로 윈도우를 만듭니다
3. 버튼 하나로 윈도우 창을 터치하여 EXTJS의 이벤트 메커니즘을 알아보기
4. EXTJS4.0의 create로 window 만들기
5. define 사용자 정의 클래스를 이용하여 (extend) window 계승
//초기화 방법 구조기
initComponent:function(){
this.callParent(arguments);
}
6.requires JS의 비동기 로드
7.config 자동 get 및 set
8.mixins류의 혼합

---------------------------------------------------------------------------------
이 예는 주로 유형의 사유 속성과 공유 속성을 말한다
lesson02.html


  
  
  
  
   
   
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
   <title>HELLO WORD</title> 
   
   
   
   <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
   
   
   
   <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
   
   
   
   <script type="text/javascript" src="indexDemo.js"></script> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
   </body> 
   
   
   
   </html>

indexDemo.js


  
  
  
  
   
   
   
   //          function 
   
   
   
   function user(){ 
   
   
   
     //java    public 
   
   
   
     this.Name = 'uspcat'; 
   
   
   
     this.age = 26; 
   
   
   
    
   
   
   
     //var           private 
   
   
   
     var email = "[email protected]";   
   
   
   
    
   
   
   
      
   
   
   
     this.getEmail = function(){ 
   
   
   
       return email; 
   
   
   
     } 
   
   
   
   } 
   
   
   
    
   
   
   
   var u = new user(); 
   
   
   
   alert(u.Name); 
   
   
   
   alert(u.email); 
   
   
   
   alert(u.getEmail()); 
   
   
   
    
   
   
   
   var person = { 
   
   
   
       name:'yfc', 
   
   
   
       age:26 
   
   
   
   }; 
   
   
   
   alert(person.name + " " + person['age']);

------------------------------------------------
이 예는 주로 Ext.window를 만드는 방법을 말한다.윈도, show 방법으로 창을 표시할 수 있습니다.
lesson02.html


  
  
  
  
   
   
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
   <title>Ext.window.Window</title> 
   
   
   
   <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
   
   
   
   <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
   
   
   
   <script type="text/javascript" src="indexDemo2.js"></script> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
   </body> 
   
   
   
   </html>

indexDemo2.js


  
  
  
  
   
   
   
   (function(){ 
   
   
   
       Ext.onReady(function(){ 
   
   
   
           var win = new Ext.window.Window({ 
   
   
   
                   width:400, 
   
   
   
                       height:300, 
   
   
   
                       title:'uspcat'  
   
   
   
                      }); 
   
   
   
           win.show(); 
   
   
   
    
   
   
   
       }); 
   
   
   
   })();

------------------------------------------------------------------
이 예는 주로 Extjs가 Ext.get (지정한 id를 가져오는 페이지 요소) 과 이벤트를 어떻게 사용하는지 보여 줍니다.
lesson02_02.html


  
  
  
  
   
   
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
   <title>Ext.window.Window</title> 
   
   
   
   <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
   
   
   
   <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
   
   
   
   <script type="text/javascript" src="indexDemo2.js"></script> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
     <button id="myb">Show</button> 
   
   
   
   </body> 
   
   
   
   </html>

indexDemo3.js


  
  
  
  
   
   
   
   (function(){ 
   
   
   
       Ext.onReady(function(){ 
   
   
   
            var win = new Ext.window.Window({ 
   
   
   
               width:400, 
   
   
   
               height:300, 
   
   
   
               title:'uspcat', 
   
   
   
               closeAction:false//      ，       win.show()   el is null    el.addCls.apply(el,  
   
   
   
    
   
   
   
   arguments); 
   
   
   
            }); 
   
   
   
       //1.       dom   
   
   
   
           //2.             
   
   
   
           //3.         win show   
   
   
   
           Ext.get("myb").on("click",function(){ 
   
   
   
         win.show(); 
   
   
   
           },this); 
   
   
   
       }); 
   
   
   
   })();

----------------------------------------------------------------------------------
이 예는 주로 Ext.Function을 말한다.alias 대상 만드는 방법의 별명
lesson02_03.html


  
  
  
  
   
   
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
   <title>  </title> 
   
   
   
   <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
   
   
   
   <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
   
   
   
   <script type="text/javascript" src="indexDemo4.js"></script> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
   </body> 
   
   
   
   </html>

indexDemo4.js


  
  
  
  
   
   
   
   (function(){ 
   
   
   
       Ext.onReady(function(){ 
   
   
   
       var o = { 
   
   
   
         say : function(){ 
   
   
   
           alert(111); 
   
   
   
         } 
   
   
   
           } 
   
   
   
          var fn = Ext.Function.alias(o,'say'); 
   
   
   
          fn(); 
   
   
   
       }); 
   
   
   
   })();

------------------------------------------------------------------------------
이 예에서는 주로 Ext.create를 사용하여 객체를 만드는 방법을 보여 줍니다.
lesson02_04.html


  
  
  
  
   
   
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
   <title>Ext.create</title> 
   
   
   
   <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
   
   
   
   <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
   
   
   
   <script type="text/javascript" src="indexDemo5.js"></script> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
   </body> 
   
   
   
   </html>

indexDemo5.js


  
  
  
  
   
   
   
   (function(){ 
   
   
   
       Ext.onReady(function(){ 
   
   
   
       var win = Ext.create('Ext.window.Window',{ 
   
   
   
         width:400, 
   
   
   
             height:300, 
   
   
   
             title:'uspcat' 
   
   
   
           }); 
   
   
   
           win.show(); 
   
   
   
       }); 
   
   
   
   })();

--------------------------------------------------------------
이 예는 주로 Ext.define 방법과 initComponent 속성을 말한다. initComponent는 클래스의 대상을 만들 때 가장 자동으로 호출되고 자바의 구조기와 맞먹는다. 또한callParent 방법도 언급했다.
lesson02_06.html


  
  
  
  
   
   
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
   <title>Ext.create</title> 
   
   
   
   <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
   
   
   
   <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
   
   
   
   <script type="text/javascript" src="indexDemo6.js"></script> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
   </body> 
   
   
   
   </html>

indexDemo6.js


  
  
  
  
   
   
   
   (function(){ 
   
   
   
       Ext.onReady(function(){ 
   
   
   
       Ext.define("myWin",{ 
   
   
   
         extend:'Ext.window.Window', 
   
   
   
             width:400, 
   
   
   
             height:300, 
   
   
   
             title:'uspcat', 
   
   
   
             newtitle:'new uspcat', 
   
   
   
             mySetTitle:function(){ 
   
   
   
               this.title = this.newtitle; 
   
   
   
             }, 
   
   
   
         initComponent: function(){ 
   
   
   
               this.mySetTitle(); 
   
   
   
           this.callParent(arguments); 
   
   
   
         } 
   
   
   
       }); 
   
   
   
           Ext.create('myWin',{ 
   
   
   
         title:'my win' 
   
   
   
       }).show(); 
   
   
   
       }); 
   
   
   
   })();

initComponent 메서드는 자동으로 호출됩니다.
----------------------------------------------------------------------------------
이 예는 주로 js 파일을 어떻게 도입하는지 강의한다
ux\mywin.js


  
  
  
  
   
   
   
   Ext.define("myWin",{ 
   
   
   
         extend:'Ext.window.Window', 
   
   
   
             width:400, 
   
   
   
             height:300, 
   
   
   
             title:'uspcat', 
   
   
   
             newtitle:'new uspcat', 
   
   
   
             mySetTitle:function(){ 
   
   
   
               this.title = this.newtitle; 
   
   
   
             }, 
   
   
   
         initComponent: function(){ 
   
   
   
               this.mySetTitle(); 
   
   
   
           this.callParent(arguments); 
   
   
   
         } 
   
   
   
       });

lesson02_06.html


  
  
  
  
   
   
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
   <title>Ext.create</title> 
   
   
   
   <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
   
   
   
   <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
   
   
   
   <script type="text/javascript" src="indexDemo6.js"></script> 
   
   
   
   <script type="text/javascript" src="ux/mywin.js"></script> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
   </body> 
   
   
   
   </html>

indexDemo6.js


  
  
  
  
   
   
   
   (function(){ 
   
   
   
       Ext.onReady(function(){ 
   
   
   
           Ext.create('myWin',{ 
   
   
   
         title:'my win' 
   
   
   
       }).show(); 
   
   
   
       }); 
   
   
   
   })();

--------------------------------------------------------------------------------------
이 예는 서버를 부팅해야 정상적으로 작동할 수 있으며 두 가지 주의가 필요합니다.
첫 번째는요.


  
  
  
  
   
   
   
   Ext.Loader.setConfig({  
   
   
   
    enabled:true,  
   
   
   
    paths:{  
   
   
   
      myApp:'lessonTwo/ux'//           
   
   
   
    }  
   
   
   
   );

다른 하나는 클래스 이름입니다. 현재 폴더 아래의 파일 아래에 있는 js 파일이어야만 동적 불러올 수 있습니다. 클래스 이름은 현재 폴더 아래의 파일 이름과 js 파일 이름이어야 합니다.
indexDemo7.js


  
  
  
  
   
   
   
   (function(){ 
   
   
   
      Ext.Loader.setConfig({ 
   
   
   
        enabled:true, 
   
   
   
        paths:{ 
   
   
   
          myApp:'lessonTwo/ux'//          
   
   
   
        } 
   
   
   
      }); 
   
   
   
    
   
   
   
      Ext.onReady(function(){ 
   
   
   
          Ext.create('ux.myWin2',{// ux/myWin2  ux.myWin2  
   
   
   
     title:'my win', 
   
   
   
            //requires:['myWin'] 
   
   
   
   }).show(); 
   
   
   
      }); 
   
   
   
   )();

lesson02_07.html


  
  
  
  
   
   
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
   <title>Ext.create</title> 
   
   
   
   <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
   
   
   
   <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
   
   
   
   <script type="text/javascript" src="indexDemo7.js"></script> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
   </body> 
   
   
   
   </html>

ux\myWin2.js


  
  
  
  
   
   
   
   Ext.define("ux.myWin2",{ 
   
   
   
         extend:'Ext.window.Window', 
   
   
   
             width:400, 
   
   
   
             height:300, 
   
   
   
             title:'uspcat', 
   
   
   
             newtitle:'new uspcat', 
   
   
   
             mySetTitle:function(){ 
   
   
   
               this.title = this.newtitle; 
   
   
   
             }, 
   
   
   
         initComponent: function(){ 
   
   
   
               this.mySetTitle(); 
   
   
   
           this.callParent(arguments); 
   
   
   
         } 
   
   
   
       });

----------------------------------------------------------------------------------
이 예는 주로 버튼을 누르면 my Win2를 보여 줍니다.js 이 js 파일은 동적 불러오기입니다
lesson02_08.html


  
  
  
  
   
   
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
   <title>Ext.create</title> 
   
   
   
   <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
   
   
   
   <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
   
   
   
   <script type="text/javascript" src="indexDemo8.js"></script> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
     <button id="myb">Show</button> 
   
   
   
   </body> 
   
   
   
   </html>

indexDemo8.js


  
  
  
  
   
   
   
   (function(){ 
   
   
   
      Ext.Loader.setConfig({ 
   
   
   
        enabled:true, 
   
   
   
        paths:{ 
   
   
   
          myApp:'lessonTwo/ux'//          
   
   
   
        } 
   
   
   
      }); 
   
   
   
    
   
   
   
      Ext.onReady(function(){ 
   
   
   
          Ext.get("myb").on("click",function(){ 
   
   
   
            Ext.create('ux.myWin2',{// ux/myWin2  ux.myWin2  
   
   
   
       title:'my win', 
   
   
   
              //requires:['myWin'] 
   
   
   
     }).show();         
   
   
   
   }); 
   
   
   
    
   
   
   
      }); 
   
   
   
   )();

ux\myWin2.js


  
  
  
  
   
   
   
   Ext.define("ux.myWin2",{ 
   
   
   
         extend:'Ext.window.Window', 
   
   
   
             width:400, 
   
   
   
             height:300, 
   
   
   
             title:'uspcat', 
   
   
   
             newtitle:'new uspcat', 
   
   
   
             mySetTitle:function(){ 
   
   
   
               this.title = this.newtitle; 
   
   
   
             }, 
   
   
   
         initComponent: function(){ 
   
   
   
               this.mySetTitle(); 
   
   
   
           this.callParent(arguments); 
   
   
   
         } 
   
   
   
       });

-------------------------------------------------------------------------------------
이 예는 주로 Ext.define에서config 속성을 말하는데, 설정하면 getPropertyName 방법이 자동으로 나타납니다
lesson02_09.html


  
  
  
  
   
   
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
   <title>Ext.create</title> 
   
   
   
   <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
   
   
   
   <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
   
   
   
   <script type="text/javascript" src="indexDemo9.js"></script> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
     <button id="myb">Show</button> 
   
   
   
   </body> 
   
   
   
   </html>

indexDemo9.js


  
  
  
  
   
   
   
   (function(){ 
   
   
   
      Ext.Loader.setConfig({ 
   
   
   
        enabled:true, 
   
   
   
        paths:{ 
   
   
   
          myApp:'lessonTwo/ux'//          
   
   
   
        } 
   
   
   
      }); 
   
   
   
      Ext.onReady(function(){ 
   
   
   
    
   
   
   
          Ext.get("myb").on("click",function(){ 
   
   
   
            var win = Ext.create('ux.myWin3',{// ux/myWin2  ux.myWin2  
   
   
   
       title:'my win', 
   
   
   
              price:60 
   
   
   
     });    
   
   
   
            alert(win.getPrice()); 
   
   
   
            win.show();     
   
   
   
   }); 
   
   
   
    
   
   
   
      }); 
   
   
   
   )();

ux\myWin3.js


  
  
  
  
   
   
   
   Ext.define("ux.myWin3",{ 
   
   
   
         extend:'Ext.window.Window', 
   
   
   
             width:400, 
   
   
   
             height:300, 
   
   
   
             config:{ 
   
   
   
                 price:500 
   
   
   
             }, 
   
   
   
             title:'uspcat', 
   
   
   
             newtitle:'new uspcat', 
   
   
   
             mySetTitle:function(){ 
   
   
   
               this.title = this.newtitle; 
   
   
   
             }, 
   
   
   
         initComponent: function(){ 
   
   
   
               this.mySetTitle(); 
   
   
   
           this.callParent(arguments); 
   
   
   
         } 
   
   
   
       });

----------------------------------------------------------------------------------
마지막 예는 주로 Ext.define의mixins 속성을 말하는데 사실 js의 실례 계승법과 매우 유사하다
lesson02_10.html


  
  
  
  
   
   
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
   <title>Ext.create</title> 
   
   
   
   <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
   
   
   
   <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
   
   
   
   <script type="text/javascript" src="indexDemo10.js"></script> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
   </body> 
   
   
   
   </html>

indexDemo10.js


  
  
  
  
   
   
   
    (function(){ 
   
   
   
       Ext.onReady(function(){ 
   
   
   
       Ext.define('say',{ 
   
   
   
         cansay:function(){ 
   
   
   
            alert("hello"); 
   
   
   
         } 
   
   
   
       }); 
   
   
   
    
   
   
   
       Ext.define('sing',{ 
   
   
   
         sing:function(){ 
   
   
   
                alert('sing hello 123'); 
   
   
   
         } 
   
   
   
       }); 
   
   
   
    
   
   
   
       Ext.define('user',{ 
   
   
   
             extend:'sing',//          
   
   
   
         mixins:{ 
   
   
   
               say:'say'//  say  say   
   
   
   
         } 
   
   
   
       }); 
   
   
   
           var u = Ext.create('user',{}); 
   
   
   
           u.cansay(); 
   
   
   
           u.sing(); 
   
   
   
       }); 
   
   
   
   })();

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

extjs4 트리의 오른쪽 단추 메뉴

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

[02]EXTJS4.0의 새로운 기능

좋은 웹페이지 즐겨찾기