欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Extjs入门1-1Extjs自定义类

程序员文章站 2022-06-14 12:04:13
extjs入门1-1extjs自定义类。 1:javascript 自定义类:定义person类,有两个属性,两个方法,init类似于构造方法 var person = f...

extjs入门1-1extjs自定义类。

1:javascript 自定义类:定义person类,有两个属性,两个方法,init类似于构造方法

var person = function (name, age) {
    this.name = "";
    this.age = 0;
    this.say = function (msg) {
        alert(this.name + " says : " + msg);
    }

    this.init = function (name, age) {
        this.name = name;
        this.age = age;
    }

    this.init(name, age);
}
运行时:
var tom = new person("tom", 26);
tom.say("hello");
2:一 extjs自定义类: 定义person类
ext.define("person", {
    name: '',
    age: 0,
    say: function (msg) {
        ext.msg.alert(this.name + " says:", msg);
    },
    constructor: function (name, age) {
        this.name = name;
        this.age = age;
    }
});
运行时:
var tom = new person("tom", 26);
tom.say("hello");

二 extjs中的继承

重新定义一个coding方法,需要说明的是,如果此处只调用了父类的构造方法,则可以省略掉,extjs 会自动为我们调用父类的构造函数,所以constructor这一方法没有必要写

ext.define("developer", {
    extend: 'person',
    coding: function (code) {
        ext.msg.alert(this.name + " 正在编码", code);
    },
    constructor: function(){
        this.callparent(arguments);
    }
});
运行时:
var bill = new developer("bill", 26);
bill.coding("int num1 = 0; ");

三 config

如果类中有几十个属性,那么我们使用构造函数就要传入几十个参数来对它完成初始化,这是一件很恐怖的事情。在extjs 中可以在定义类的时候为它添加配置项,然后调用extjs 内置的方法完成初始化,并可以生成访问器(类似于c#里面的get和set方法)。

我们来修改person类,使它可以通过config初始化:

ext.define("person", {
    config: {
        name: '',
        age: 0,
    },
    say: function (msg) {
        ext.msg.alert(this.name + " says:", msg);
    },
    constructor: function (config) {
        this.initconfig(config);
    }
});

我们在类的定义中添加了config项,将需要在配置中完成的属性添加在里面,而在构造函数中,我们通过调用this.initconfig方法完成对config的初始化。看一下用法:

var tom = ext.create("person", {
    name: 'tom',
    age: 26
});
tom.say("hello");

我们对person类做一个简单的修改,将类名的全称修改为myapp.person(相当于为person添加了命名空间):

ext.define("myapp.person", {
    config: {
        name: '',
        age: 0,
    },
    say: function (msg) {
        ext.msg.alert(this.name + " says:", msg);
    },
    constructor: function (config) {
        this.initconfig(config);
    }
});

我们只修改了第一行,其它代码不变。这个时候我们使用之前的代码实例化person类:

var tom = ext.create("person", {
    name: 'tom',
    age: 26
});
tom.say("hello");

刷新页面,但是出错:这时就用到别名了。

我们为myapp.person 类添加别名:

ext.define("myapp.person", {
    config: {
        name: '',
        age: 0,
    },
    alias:"person",
    say: function (msg) {
        ext.msg.alert(this.name + " says:", msg);
    },
    constructor: function (config) {
        this.initconfig(config);
    }
});
很简单,只要一行代码,extjs 为我们完成了别名的定义。