ExtJs学习(2)

来源：互联网发布：中性香水知乎编辑：程序博客网时间：2024/05/22 10:27

学习大纲 :

1.JS类的声明和对象的创建.
2.原始方法用extJs创建一个window.
3.利用一个按钮触发window窗体,了解一下extJs的事件机制.
4.用extJs4.0的create来创建window.
1)起别名
2)使用create创建
5.利用difine自定义类并且集成(extend)window.
6.requires JS的异步加载.
7.config 自动的 get 和 set.
8.mixins 类的混合.

目录结构 :

这里写图片描述

代码及知识点:

两个文件
practice_02.js
basic_02.html

1、

//JS创建类的两种方法//第一种:一个类就是一个functionfunction user(){    //this 是可以在外部访问的,它相当于Java语言里的 public    this.name = "wzr";    this.age = 27;    //var 是内部的,它相当于Java语言里的private,在外部是访问不到的,想要访问要通过函数来做.    var email = "123@163.com";    this.getEmail = function(){        return email;    }}var u = new user();alert("用户 "+u.name+" 今年 "+u.age+" 岁 !");alert("用户 "+u.name+" 今年 "+u.age+" 岁 !"+" 他的 email 是  "+u.getEmail());//第二种:var person = {    name:"wzr",    age:27}alert(person.name + "  "+person.age);

2 、
3、

(function(){    Ext.onReady(function(){        var win = new Ext.window.Window({            title:'我是一个弹窗',            width:400,            height:300        });        win.show();  // 注意 ExtJs 是严格区分大小写的,所以show()首字母必须小写.        //1.得到按钮的dom对象        //2.为按钮添加一个单击的事件        //3.单击的时候调用win的show方法        Ext.get("mybtn").on("click",function(){        //Ext的get方法:得到dom对象,参数为对象的id.            win.show();        });    })})();

Ext.get(“mybtn”).on() 这是一个ExtJs的时间监听机制,以后会学到,这里先知道有这么一个事就好.

basic_02.html中添加一个按钮

<body>    <button id="mybtn">SHOW</button></body>

4
1) 起别名

(function(){    Ext.onReady(function(){        var o = { //这里是一个Object对象,对象里有一个 say 方法            say : function(){                alert("我是方法say");            }        }        var fn = Ext.Function.alias(o,"say");        fn();    })})();

Ext.Function里的alias()方法就是起别名的方法,它有两个参数,第一个是一个Object对象,第二个是一个字符串String(需要起别名的对象),返回值就是别名.之后我们在用到这个方法的时候就可以直接用这个别名了而不是用o.say()这个种方式,另外一个非常重要的地方就是,当我们给一个方法起了别名之后,那么,以后我们在整个项目的任何一个js文件中都可以直接调用这个本应在一个对象内部的方法。此处存疑,本人暂时无法证明这种说法。

2) 用create创建

//完整类名var myWin = Ext.create('Ext.window.Window',{            title:'我是一个create出来的弹窗',            width:400,            height:300        })myWin.show();

Ext.create(”,{}) create方法第一个参数是一个类名,第二个参数是类的属性值,返回的是所创建对象的名字.
API上还提供了另外几种create创建类的方法,大同小异.

 // alias 别名 var window = Ext.create('widget.window', {     width: 600,     height: 800,     ... });

 // alternate name 备用名 var window = Ext.create('Ext.Window', {     width: 600,     height: 800,     ... });

 //单个对象与xclass属性: var window = Ext.create({     xclass: 'Ext.window.Window', // 任何有效的'name' (以上)     width: 600,     height: 800,     ... });

5、
6、

define( String className, Object data, Function createdFn ) : 定义或覆盖一个类
Parameters 参数解析 :

~ className(String) : 类名
你所创建的类的名字 ;
命名空间的字符串格式，例如： ‘My.def.MyWindow’, ‘FeedViewer.plugin.CoolPager’ 我们强烈建议遵循这个简单的约定： - 根和类的名称是’FeedViewer’ ,’CoolPager’骆驼拼写法 - 其他一切用小写

~ data : Object
键 - 值对创建的这个类的属性。
属性名称可以是任何有效的字符串，除了那些保留的关键字.下面列出：
    - extend：用于继承
    - mixins : 混入 ,实现多继承
    - statics : 定义静态方法，属性不能被子类继承
    - config : 定义类的配置项，会把config里的每个属性加上get和set方法
    - alias : 类的别名
    - self : 自身
    - singleton : 设置该类为单例模式
    - alternateClassName : 备用名，与alias差不多
    - override 重写
    - requires：需要使用到的类名数组，在动态加载时会根据该属性去下载类，注意需要的类是在当前类之前被加载
    - uses：与requires类似但是被引用的类可以在该类之后才加载
    - constructor：构造器属性，一般用来初始化类的配置和调用其父类的方法

~ createdFn : Function
可选的回调后执行的类的创建，执行范围(this)将创建新的类本身。

Returns 返回值 :
~ Ext.Base
Ext.define创建的所有类的根。
Ext.Base是所有Ext类构造块。Ext中所有的类从Ext.Base继承。所有其他类都继承这个类的所有原型和静态成员。

- - - - - - - - - - - - - – - - - - - - - - - - - - - - - - - - - - - - - - - (1) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

*********************第一种,最基本的定义一个类**************************Ext.define('My.def.MyWindow',{    width:400,    heigth:300,    title:'我是自定义的第一个类',    func : function(){        Ext.Msg.alert("我是这个类的方法属性");    }});var myWin = Ext.create('My.def.MyWindow');myWin.func();alert(myWin.title+" 我的宽是  "+myWin.width+" 我的高是 "+myWin.heigth);

这里写图片描述

- - - - - - - - - - - - - – - - - - - - - - - - - - - - - - - - - - - - - - - (2) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
定义了覆盖，包括override 属性。汇集处理指定的类，以扩展或修改该类内容的覆盖。这可能是简单的设置默认的属性值，或者是它可以扩展和/或更换的方法。这也可以扩展静态变量之类的。
简单的说就是对已有的类的扩展或者对类中某一属性进行修改.
重写的用途之一是管理大类里面的片段。

******************************************** 第二种对已有类的扩展 extend ******************************************Ext.define('My.def.MyWindow2',{    extend : 'Ext.window.Window',    width:400,    heigth:300,    title:'我是自定义的第二个类,也是第一个真正的窗口!',    constructor: function (config) {         this.callParent(arguments); // 调用Ext.window.Window的构造    },    say : function(sth){        return sth;    }})var myWin2 = Ext.create('My.def.MyWindow2');    Ext.Msg.alert("title",myWin2.title + "   "+myWin2.say('Hello Define !'));

这里写图片描述

这种我们自己定义的类一般多会提取出来放到一个单独的 js 文件中,这样可以让我们的项目更加的工整、干净、有条理。当然我们需要把我们这个类所在的 js 文件引入.如我的:

file: practice - -> def_class - -> MyWindow2.js

(function(){    Ext.Loader.setConfig({      enabled: true, // 启用异步加载模式      paths: {           'My.def': '../my/def'  // '类名前缀':'所在路径'        }    });//或者用setPath设置匹配路径  //Ext.Loader.setPath('My.def', '../my/def');   //'类名前缀','所在路径'     Ext.onReady(function(){             var myWin2 = Ext.create('My.def.MyWindow2',{            title:'测试  requires',            requires:[                'My.def.MyWindow2'            ]        });         Ext.Msg.alert("title",myWin2.title + "   "+myWin2.say('我挪窝了 !'));    })})();

在Ext.onReady() 之前加入Ext.Loader.setConfig(),记住,一定要在onReady()之前。
Ext.Loader 可以解释成预加载。
在create创建的时候，我们用 requires 引入类 My.def.MyWindow2 此处可以是类的全名、别名等，这样页面加载的时候就会有一个引入 MyWindow2.js 的请求。

这里写图片描述

最后效果如下：
这里写图片描述

可是这样又出现了另一个问题，就是我们的类名和文件名必须相同，那么一个 js 文件中我们就只能写一个类了。之前我曾让类名和文件名不相同,结果是出不来效果 , 所以我得到了以上的结论 , 不知是否正确 , 有大神了解请指出,在此多谢!

file：MyWindow2.js 中：

Ext.define('My.def.MyWindow2',{    extend : 'Ext.window.Window',    width:400,    heigth:300,    title:'我是自定义的第二个类,也是第一个真正的窗口!',    constructor: function (config) {         this.callParent(arguments); // 调用Ext.window.Window的构造    },    say : function(sth){        return sth;    }})

7
file : MyWindow2.js

Ext.define('My.def.MyWindow2',{    extend : 'Ext.window.Window',    width:400,    heigth:300,    config: {         price: 500  //价格    },     title:'我是自定义的第二个类,也是第一个真正的窗口!',    constructor: function (config) {         this.callParent(arguments); // 调用Ext.window.Window的构造    },    say : function(sth){        return sth;    }})

创建类的时候加入 config

file : practice_02.js

var myWin2 = Ext.create('My.def.MyWindow2',{    title:'测试  requires',    price:600,    requires:[        'My.def.MyWindow2'    ]}); alert(myWin2.getPrice());

给 price 赋值 600 , 然后用 myWin2.getPrice() , 结果如图 :
这里写图片描述

(function(){    Ext.onReady(function(m){        Ext.define('My.def.Music',{            config: {                 name: '歌'//价格            }        });        Ext.define('My.def.Sing',{            can:function(m){                return "我能唱 "+m;            }        });        Ext.define('My.def.Musician',{            ability:function(abt){                return abt;            }        });        Ext.define('My.def.Singer',{            extend:'My.def.Musician',            mixins:{                sing:'My.def.Sing',                music:'My.def.Music'            }        });        var singer = Ext.create('My.def.Singer');               alert(singer.can('歌')+singer.ability("改变世界!"));    })})();

效果如下 :
这里写图片描述

第二节练习到此结束!

0 0