ExtJs 属性多继承 requires,mixins,config用法

最新推荐文章于 2018-11-20 21:05:03 发布

u010509143

最新推荐文章于 2018-11-20 21:05:03 发布

阅读量1.6k

点赞数

分类专栏： extjs

本文链接：https://blog.csdn.net/u010509143/article/details/9300019

版权

extjs 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

---------------------------------------------lesson2.html-----------------------------------------------begin----------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HELLO WORD</title>
<link rel="stylesheet" type="text/css" href="../../../../extjs4/resources/css/ext-all.css" />
<script type="text/javascript" src="../../../../extjs4/bootstrap.js"></script>
<script type="text/javascript" src="indexDemo.js"></script>
</head>
<body>这里不用引入mywin.js
<button id="myb">Show</button>
</body>
</html>

--------------------------------------------indexDemo.js-----------------------------------------------begin----------------------------------------------------

类的声明其实就是一个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.getEmail())
//
//var person = {
//   name:'yfc'
//   ,age:26
//};
//alert(person.name+" "+person['age'])
(function(){
   // 引入命名空间'code/ux'; 在 lesson2.html 中就只用引入indexDemo.js 而不用引入 mywin.js了;
   // indexDemo.js 会在必要的时候自己引入 mywin.js; 则在code/ux 的命名空间下寻找 ux.myWin(而不是mywin.js)了如下面的代码;

   /* 这段是我自己拷贝的; 本来是在程序的下面; 为了方便观看 copy到这;注意 requires 关键词; 类似于include 关键字; 在必要的时候引入; 这里也是'ux.myWin'不是js名
   Ext.get("myb").on("click",function(){
           var win = Ext.create("ux.myWin",{
               title:'my win',
               price:600,
               requires:['ux.myWin']
           });
           //alert(win.getPrice())
       });*/
   //loader 启用;
   Ext.Loader.setConfig({
       enabled:true,
       paths:{
           myApp:'code/ux'
       }
   });
   Ext.onReady(function(){
       /**
       var win = new Ext.window.Window({
               width:400,
               height:300,
               title:'uspcat'
           });
//       win.show();
       //1.得到那个按钮的dom对象
       //2.为按钮对象添加单击的事件
       //3.单击的时候调用对象win的show方法
       Ext.get("myb").on("click",function(){
           win.show();
       });
       */
//       var o = {
//           say : function(){
//               alert(11111);
//           }
//       }
//       var fn = Ext.Function.alias(o,'say'); //把o 类里面的say 方法起别名为fn; 下面是调用fn()方法;
//       fn();
//       var win = Ext.create('Ext.window.Window',{    // 这样就不用new 了推荐使用;
//           width:400,
//           height:300,
//           title:'uspcat'
//       });
//       win.show();

       Ext.get("myb").on("click",function(){
           var win = Ext.create("ux.myWin",{            // Ext.create 创建对象;
               title:'my win',
               price:600,
               requires:['ux.myWin']
           });
           //alert(win.getPrice())      // 这样也可以显示; 因为 ux.myWin 里面有      config: { price: 500}, 这样写; 就自动加上了get set 方法;


       });
       Ext.define("say",{
           cansay:function(){
               alert("hello");
           }
       })
       Ext.define("sing",{
           sing:function(){
               alert("sing hello 123");
           }
       })
       Ext.define('user',{
           mixins :{   // 混合; 类似于多继承;
               say : 'say', // 自己感觉前面的say 无所谓了; 重要的是后面的 value'say' 指定继承 say 类;
               sing: 'sing'
           }
       });
       var u = Ext.create("user",{});
       u.cansay();   // 可以使用父类的方法;
       u.sing();       // 可以使用父类的方法;

   });
})();

--------------------------------------------myin.js-----------------------------------------------begin----------------------------------------------------

        Ext.define("ux.myWin",{      // Ext.define("name",{..} ); 定义一个类;
           extend:'Ext.window.Window',
           width:400,
           height:300,
           config: {   // 生成getSet 方法;
               price: 500
           },
           newtitle: 'new uspcat',   //默认的 ; 子类中可以重新赋值
           mySetTitle:function(){
               this.title = this.newtitle;
           },
           title:'uspcat',

           //这里是构造方法;
           initComponent: function() {
               this.mySetTitle();     // 如果报错说mySetTitle 方法不认识; 那么加上this 试试; 老师加上this 之后就没问题了;
               // argments 代表参数; 感觉和java里面super(); 差不多;
               this.callParent(arguments);
           }
       })

u010509143

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs 属性多继承 requires,mixins,config用法

---------------------------------------------lesson2.html-----------------------------------------------begin----------------------------------------------------HELLO WORD这里不用引入myw
复制链接

扫一扫

专栏目录