[02]EXTJS4.0的新特性

发布时间：2020-06-11 16:00:22 来源：网络阅读：468 作者：jimode2013 栏目：web开发

笔记：

1.JS 类声明，和对象的创建

2.原型方法用EXTJS创建一个window

3.利用一个按钮触发window窗体，了解一下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 = "yfc@126.com";   
 
   
  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.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在创建类的对象的时候最自动调用，相当于java的构造器，另外还讲了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); 
      } 
    });

----------------------------------------------------------------------------------

这个例子主要是显示当点击按钮之后myWin2.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(); 
    }); 
})();

附件：http://down.51cto.com/data/2361712

向AI问一下细节

[02]EXTJS4.0的新特性

猜你喜欢

最新资讯

相关推荐

相关标签