Javascript - ExtJs - 类

类(Class)

preparation!

我用的是ext-4.2,解压后会得到以下文件

学习要用到的文件很少,现在保留以下文件和整个文件夹,然后删除其它文件并保持目录结构。本页面底部有提供基础包的下载。

在aspx页面中引入必要的Extjs文件,ext-all-dev可以不引人,但它作为调试使用,so建议保留。

测试一下程序是否能跑起来。

<script type="text/javascript">
    Ext.onReady(function () {
        Ext.MessageBox.alert("title","hello");
    });
</script>

自定义类型

ExtJs允许你基于它提供的方法创建自定义的类型,创建自定义类型使用Ext的define方法。 所有使用define方法注册的类,其实例的属性、方法都是从原型上获得而非从构造函数获得。构造器只用于初始化配置信息,将属性、方法绑定到实例上。

Ext.define(x,y)

x是自定义类,y是匿名对象用于设置类成员。

<script type="text/javascript">

    //参数1是命名空间.类名
    //参数2是类的成员,成员全部放在匿名对象中,
    //匿名对象一般设置两个属性,
    //一个属性是config,表示配置信息,它用于存储对象的属性和方法
    //一个属性是constructor,表示类的构造函数
    //要使config的属性、方法成为类实例的属性、方法就需要使用initConfig初始化它们
    Ext.onReady(function () {
        Ext.define("Yin.Person", {
            config: {
                name: "默认",
                age: 20,
                say: function () { Ext.MessageBox.alert("",this.name+this.age); },
            },
            constructor: function (config) {
                this.initConfig(config);
            }
        });

        //new对象时会调用constructor构造器初始化config配置信息
        var person = new Yin.Person({
            name: "寒食",
            age:32
        });

        person.say();//寒食32
        alert(Yin.Person.prototype.hasOwnProperty("say"));//true say方法属于Person类的原型对象的方法
        alert(Yin.Person.prototype.hasOwnProperty("name"));//true name属性属于Person类的原型对象的属性
        alert(Yin.Person.prototype.hasOwnProperty("age"));//true age属性属于Person类的原型对象的属性
    });

</script>

initConfig从哪里来的?解析器会在该对象上去查找initConfig方法,如果找不到就会去原型链上查找,所以initConfig可以确定是来自类的原型对象,通过调用原型的initConfig方法,该方法内部会将config进行遍历,接着逐一取出每个属性,然后赋给原型对象自己。所以类的实例对象正是通过原型继承的原理得到了这些成员。另外,如果我们在new对象时,没有设置config,那么在构造器中,this.initConfig(config);又是如何初始化name、age和say的呢?原因很简单,config属性和constructor属性处于同一个块(作用域)里,所以,如果你实例化Person类时没有显示指定config,那么构造器中的config就来自与它处于同一作用域的config属性。

get和set访问器

使用Ext的define方法创建的类会获得Ext原型对象上定义的get、set访问器,专用于获取(get)和设置(set)对象的属性或方法,注意一旦通过set访问器修改了属性或方法的代码逻辑,那么被修改过的属性或方法就会自动变成当前对象的原生成员(这是经本人测试后的理解,不保证正确)。

person.getName();//返回寒食
person.getAge();//返回32
person.getSay();//返回say方法

person.setName("sam");//修改值
person.setAge(50);//修改值
person.setSay(function () {//修改方法
    Ext.MessageBox.alert("", "我叫:"+this.name +"年龄:"+ this.age);
});

类继承

extend:z

z是父类

类继承同样可以使用Ext的define方法来完成,只需要在参数二(匿名函数)中指示extend属性,它表示当前类将从extend指向的类处派生。 我们假设X要从Y派生,X的extend就应该指向Y,X如何获得Y的成员?Y.prototype会将自身的成员copy给X.prototype,就这么简单。

<script type="text/javascript">

    Ext.onReady(function () {
        //创建Person类
        Ext.define("Yin.Person", {
            config: {
                name: "默认",
                age: 20,
                say: function () { Ext.MessageBox.alert("",this.name+this.age); },
            },
            constructor: function (config) {
                this.initConfig(config);
            }
        });      

        //创建Man类
        Ext.define("Yin.Man", {
            extend: "Yin.Person",//指示派生自Yin.Person类
            contructor: function () {
                this.initConfig();
            }
        });

        var man = new Yin.Man();
        man.say();//继承了Person的say方法
    });

</script>

对象继承

对象继承使用Ext.apply方法,与类继承类似,X对象要从Y对象继承实际上是直接将Y对象的成员完全copy给X,如果X已经有与Y同名的成员,则会发生新覆盖旧。如果不想覆盖,可使用Ext.applyIf。

var obj = { gender: "男" };
var obj2 = { name: "sam" }
Ext.apply(obj2, obj);
alert(obj2.gender);

类多重继承

mixins:[x1,x2]

x是类名

Ext为了解决类只能派生自一个类,而不能从多个类派生的问题,使用了混入mixins,实际上就是将多个类的prototype的成员copy给需要多重继承的类。

Ext.onReady(function () {
    Ext.define("Yin.Person", {
        config:{name:"寒食"},
        constructor: function (config) { this.initConfig(config);}
    });

    Ext.define("Yin.Employee", {
        config: { job: "设计" },
        constructor: function (config) { this.initConfig(config);}
    });

    Ext.define("Yin.Husband", {
        config: { age: "32" },
        constructor: function (config) { this.initConfig(config); }
    });

    Ext.define("Yin.Man", {
        extend: Yin.Person,
        mixins: ["Yin.Employee", "Yin.Husband"]
    });

    var man = new Yin.Man();
    var name=man.name;//寒食
    var age=man.age;//32
});

静态成员

statics:{ }

如果要为类定义静态成员可使用statics。

Ext.define("Yin.Person", {
    statics:{
        ancestor:"monkey"
    },
    config:{name:"寒食"},
    constructor: function (config) { this.initConfig(config);}
});

Yin.Person.ancestor//monkey

ExtJs组件类

学习ExtJs主要就是学习配置、组合各种组件,所以对于利用面向对象的思维去创建自定义类这种形式肯定显得不太有那个必要。

Ext.Component类

ExtJs中的所有可视化组件全都派生自Ext.Component,该类有一些最基本的属性用于控制呈现在html上的组件的样式,比如我们要渲染一个灰色的盒子到html页面,可如下设置:

<div id="divBox"></div>

<script type="text/javascript">
    Ext.onReady(function () {
        var box = new Ext.Component({
            el: "divBox",
            style: "background-color:#1E1E1E;margin:200px auto;",
            width:100,
            height:40
        });
        box.render();
    });
</script>

Ext.Container类

派生自Ext.Component类,它提供两个及其重要的参数:layout和items。

Container的属性

layout : border |

指示组件如何在html上布局。

items : [ obj , obj ]

指示当前组件的所有子组件,子组件以{ }的形式出现。

items的属性

xtype : 组件的字符表示

指示子组件是哪种类型,取值是首字母小写的组件名字。以前你可能指示items时会直接new出子组件,现在只需要指示xtype即可,比如要在当前组件中创建一个Panel组件:

//以前的写法
items: [
    new Ext.Panel({title:"主题",region:‘north‘}),
    new Ext.Panel({ title: "菜单", region: ‘west‘,width:100} )
]
//如今的写法
items: [
    { xtype: ‘panel‘, region: ‘north‘ ,title:"主题" },
    { xtype: ‘panel‘, region: ‘west‘, title:"菜单",width: 100 }
]

Ext.Util.observable类

只有继承了Ext.Util.observable的组件会拥有事件,作为程序员几乎只需要处理鼠标键盘表单文档加载等事件,所以此处略过。

Ext.EventObjectImpl类

Javascript的Event事件对象被ExtJs封装为Ext.EventObjectImpl,该类整合了自定义事件、浏览器事件和Dom文档事件,所以拥有事件的组件、ExtJs对象、Dom对象都会继承EventObjectImpl,我们可以在事件发生时通过组件继承EventObjectImpl所得到的属性和方法去执行一系列的操作。

Ext.EventObjectImpl的方法

getX( ) | getY( )  | getXY( )

获取事件发生时,触发事件的对象在文档中的x、y坐标。最后一个方法返回数组,getXY( )[0]得到x坐标,getXY( )[1]得到y坐标。

getTarget( )

获取触发事件的源对象。

preventDefault( bool )

是否阻止浏览器默认动作。

stopPropagation( bool )

是否阻止事件冒泡。似乎Jquery和ExtJs都不支持事件围捕。

stopEvent( )

立即停止事件。该方法内部自动调用preventDefault()和stopPropagation()两个函数,取消浏览器的默认操作,同时停止事件冒泡。

purgeElement( )

清除该对象上锁绑定的所有事件。

on | un

绑定事件监听(侦听)器、取消事件监听(侦听)器。

<input id="test" type="text" />

<script type="text/javascript">
    Ext.onReady(function () {
        //e就是触发事件的对象,此处e表示键盘,e是Ext.EventObjectImpl的实例
        Ext.get("test").on("keypress", function (e) {
            if (e.charCode == e.SPACE) {
                Ext.MessageBox.alert("","你按下了空格键位");
            }
        });
    });
</script>

ExtJs4.2基础包↓

Javascript - 学习总目录

时间: 2024-10-11 11:38:28

Javascript - ExtJs - 类的相关文章

JavaScript创建类的方式

一些写类工具函数或框架的写类方式本质上都是 构造函数+原型.只有理解这一点才能真正明白如何用JavaScript写出面向对象的代码,或者说组织代码的方式使用面向对象方式.当然用JS也可写出函数式的代码,它是多泛型的. 为了讨论的单一性,暂不考虑类的继承,(私有,受保护)属性或方法.EMCAScript中实际没有类(class)的概念,但可以把它理解为更广义的概念. 1.构造函数方式 /** * Person类:定义一个人,有个属性name,和一个getName方法 * @param {Strin

Javascript定义类(class)的三种方法

注:本文转自阮一峰,觉得此篇文章对我对大家有帮助,因此转过来. 将近20年前,Javascript诞生的时候,只是一种简单的网页脚本语言.如果你忘了填写用户名,它就跳出一个警告. 如今,它变得几乎无所不能,从前端到后端,有着各种匪夷所思的用途.程序员用它完成越来越庞大的项目.Javascript代码的复杂度也直线上升.单个网页包含10000行Javascript代码,早就司空见惯.2010年,一个工程师透露,Gmail的代码长度是443000行! 编写和维护如此复杂的代码,必须使用模块化策略.目

Atitit.javascript 实现类的方式原理大总结

Atitit.javascript 实现类的方式原理大总结 1. 实现类的式::构造方法方式:原型方式:构造方法+原型的混合方式 1 2. 原型方式(function mode)经典式..实现属性推荐 1 3. this的注意事项 2 4. 原型方式 prototype,实现方法推荐 3 5. 混合方式(属性classic mode,方法propoty式),推荐 3 6. 私有方法 4 7. 静态的属性and方法... 5 8. 闭包式 5 9. mootools框架,感觉很不错,它对Javas

【Javascript】类

定义一个类来表示2D平面几何中的点.这个类实例化的对象拥有一个名为r()的方法,用来计算该点到原点的距离 function Point(x,y){ this.x = x; this.y = y; } var p = new Point(1,1); Point.prototype.r = function(){ return Math.sqrt(this.x*this.x + this.y*this.y); } p.r(); [Javascript]类,布布扣,bubuko.com

JavaScript学习总结(十四)——JavaScript编写类的扩展方法

在?J?a?v?a?S?c?r?i?p?t?中?可以使?用?类的p?r?o?t?o?t?y?p?e属性来?扩?展?类的属?性?和?方?法,在实际开发当中,当JavaScript内置的那些类所提供的动态方法和动态属性不满足我们实际开发时,我们就可以通过"prototype"属性给自定义类添加方法和属性或者扩展原有的类中的方法和属性. 一.扩展JavaScript内置类,添加动态方法 语法格式: 类名.prototype.方法名 = function([param1],[param2],.

JavaScript定义类的方式与其它OO语言有些差异

JavaScript面向对象的程序编写与其它OO语言有一些出入,所以使用JavaScript的面向对象特性的时候,需要注意一些规范性的问题.下面就简单地谈一下,JavaScript如何定义一个类,在定义类的过程中需要如何规范你的代码.定州市科技工业局 使用javascript来定义类的规范如下: 指定类名与构造函数,类名(构造函数名)首字母大写: function YourClass(){ } 使用"this.成员变量"在其构造函数内定义(伪)私有成员,最好约定(伪)私有成员都以&qu

方格拼图游戏2(javascript以类的形式实现)+增加批量移动

今天又在原来的基础上,增加了新的功能:当空白方格A 与 鼠标点击的方格 B在同一行,或者同一列,而且当他们不是紧挨着的情况,自动将B到A间的方格们,顺次移动填补空白方格. var game ={ wid_num:3, cotainerid:"game_cotainer", init:function(_num){ console.log('init'); game.wid_num = _num || 3; console.log( game.wid_num ); var max_num

javascript定义类和类的实现

首先说说类,在一个类里我们会有以下的几个特征: 1. 公有方法 2. 私有方法 3. 属性 4. 私有变量 5. 析构函数 我们直接看一个例子: /***定义类***/ var Class = function(){ var _self = this;//把本身引用负值到一变量上 var _Field = "Test Field"; //私有字段 var privateMethod = function(){ //私有方法 alert(_self.Property); //调用属性 }

JavaScript匿名类整理学习

以下为总结在开源的JavaScript框架中能看到很多这样语法结构(function(){})()比如我最近看的jQuery,及chediter.刚开始的时候我看到这样的结果有点奇怪,它是怎么执行的,并且这是什么样的语法结构,最近偶尔看闭包的时候,才发现原来这是JavaScript种匿名函数(看到这个有点汗,java的匿名类见过,就从来没想到JavaScript中会有匿名函数,也是学的不够牢固).现在我们了解到以上是JavaScript匿名函数的语法结构,怎么声明函数,匿名函数JavaScrip