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

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





HELLO WORD




这里不用引入mywin.js
    


 

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

类的声明其实就是一个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.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);
            }
        })


 

你可能感兴趣的:(extjs)