Javascript - ExtJs - 类

Posted 2020-09-26

类（ExtJs Class）

preparation！

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

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

在aspx页面中引入必要的Extjs文件，ext-all-dev.js作为调试使用，否则可替换为ext-all.js。

<link href="~/Extjs/extjs-42/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" />
<script src="~/Extjs/extjs-42/ext-all-dev.js"></script>
<script src="~/Extjs/extjs-42/ext-lang-zh_CN.js"></script>

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

Ext.onReady(function () {
    Ext.MessageBox.alert("提示","hello");
});

应用海王星主题皮肤

先确保resources下的主题包ext-theme-neptune在你的程序结构目录中

打开Extjs4.2的resources/css/ext-all.css文件，用以下代码替换源代码。 

@import \'../ext-theme-neptune/ext-theme-neptune-all.css\';

动态切换主题

Ext.get("change").on("click", function () {
    Ext.util.CSS.swapStyleSheet("theme", "scripts/Extjs4.2/resources/ext-theme-gray/ext-theme-gray-all.css");
});

文档载入事件

通常你的Ext代码都需要放进文档载入事件里。

Ext.onReady(function () {

});

Ext类

这是一个我们经常打交道的类，食一个全局单例对象，它封装了Ext组件和常用的Js操作

application(json)
//初始化你的ExtJs应用程序，参看：

define(className, json, callBack)
//用于创建自定义类 、可以在自定义类的内部继承某个父类、重写其它类
//json：该对象用于定义对象的成员，可使用extend（派生）、config（将成员定义在这个匿名对象中）、constructor（构造器）、override（重写）、singleton（单例）等属性用于设置类
//自定义的类应遵守ExtJs的默认的创建类及其命名空间的规则
//比如你的ExtJ应用程序名为MyApp，你在MyApp - MyExt目录定义了一个Animal类，那么此类的完全限定名就是根据路径来定义的：路径是myApp\\myExt\\animal.js，
//类名的完全限定名就是MyApp.myExt.Animal
//=======创建自定义类=======
Ext.define("Employee", {
    name: null,//name属性是Animal自身的原生成员
    sayHello: function () { alert("hello") },//sayHello方法自动注册在Animal原型上
    constructor: function (name) {
        this.name = name;
    }
},
function callBack() {
    alert("", "对象创建完成");
});

var employee = new Employee("sam");
Ext.Msg.alert("", employee.name);

//等同于
Ext.define("Employee", {
    config: {
        name: null, //name属性是Animal自身的原生成员
        sayHello: function () { alert("hello") } //sayHello方法自动注册在Animal原型上
    },
    constructor: function (name) {
        this.name = name;
    }
});

alert(employee.hasOwnProperty("sayHello")); //false
alert(employee.hasOwnProperty("name")); //true

extend(target, json);
//从指定类派生
var Animal = Ext.define("Animal", {
    sayHello: function () { alert("helllo"); }
});

var Employee = Ext.extend(Animal, {
    jobName: null
});
//等同于：
Ext.define("Animal", {
    sayHello: function () {
        alert("hello");
    }
});

Ext.define("Employee", {
    extend: "Animal",
    jobName: null
});

Create(className,json)
//推荐使用Create方法创建对象，因为它会自动加载需要的类文件，如果使用new操作符则不会
var animal = new Animal("leo");
//或
var animal = Ext.create("Animal", { name: "leo" });

override(target, json)
//重写某个类
Ext.define("Animal", {
    name: null,
    constructor: function (name) {
        this.name = name;
    }
});

var animal = new Animal();

Ext.override(animal, {
    sayHello: function () { //重写
        alert("hello world");
    },
    sayHello2: function () { //追加
        alert("new function");
    }
});
//等同于
Ext.define("Animal", {
    sayHello: function () {
        alert("hello");
    }
});

Ext.define("AnimalExtention", {
    override: "Animal",
    sayHello: function () {
        alert("hello world");
    },
    sayHello2: function () {
        alert("new function");
    }
});

widget(aliasName, json)
//快速创建Ext组件
Ext.define(\'Ext.panel.Panel\', {
    extend: \'Ext.container.Container\',
    alias: \'widget.p\' //alias：设置Panel类的别名为p，即Panel的xtype为p
});

Ext.widget(\'p\', { //不使用Ext.Create方法，快速创建组件实例
    renderTo: Ext.getBody(),
    title: \'Panel\'
});

getClass(obj)
//如果参数对象是通过Ext.define创建的，返回该对象的类型，否则返回null类似的有getClassName
var employee = new Employee("korn", "35");
var cl = Ext.getClassName(employee);
alert(cl); // print Employee

require(configArray)
//异步加载Ext组件，如果当前页面只需要用到某几个组件时
//使用此方法就可以只加载指定的组件而不需要全部加载，这样就提高了加载效率
//在Ext.OnReady()之外写：
Ext.require([
    \'Ext.tab.*\', //*号表示当前命名空间下的所有类
    \'Ext.window.*\',
    \'Ext.data.Connection\',
    \'Ext.layout.container.Border\'
]);

 

exclude(configStr)
Ext.exclude(\'Ext.data.*\').require(\'*\'); //加载所有的Ext的类，但排除Ext.data命名空间下的类

Base
//返回一个Ext基类，默认所有Ext类都是从此类派生

访问父类的成员

var Animal = Ext.define("Animal", {
    sayHello: function () {
        alert("hello");
    },
    sayHello2: function () {
        alert("hello2");
    }
});

var Employee = Ext.define("Employee", {
    extend: "Animal",
    sayHello: function () {
        Employee.superclass.sayHello(); //调用父类的任意某个方法
    },
    sayHello2: function () {
        this.callParent(); //调用父类的与当前类的方法同名的方法
    },
});

var employee = new Employee();
employee.sayHello();
employee.sayHello2();

为类定义别名

Ext.define(\'Ext.panel.Panel\', {
    extend: \'Ext.container.Container\',
    alias: \'widget.p\'//Panel类的别名为p
});

get、set访问器 

使用Ext的define方法创建的类会获得Ext原型对象上定义的get、set访问器，用于获取（get）和设置（set）对象的属性或方法。如果要使用get、set访问器，则必须将成员定义在config匿名对象中，否则无效。ExtJs组件的属性都可以通过get("property")、set("property","newValue")进行读取或修改。

Ext.define("Animal", {
    config: {
        name: "sam",
        age: 32,
        sayHello:function() {alert("hello");}
    }
});

var a = new Animal();

alert(a.getName()); //获取name
alert(a.getAge()); //获取age
alert(a.getSayHello()); //获取方法

a.setName("leo"); //设置name
a.setAge(35); //设置age        
a.setSayHello(function () {//设置sayHello
    alert("hello world");
});

对象继承

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

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

类多重派生

利用minxins混入可解决类只能派生自一个类，mixins是将多个类的原型上的所有成员copy给需要多重继承的类。

Ext.define("Animal", {
    name:"sam"
});

Ext.以上是关于Javascript - ExtJs - 类的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript Extjs：根据其他字段的条件，使用自定义类渲染网格中的单元格

jQuery

javascript介绍

Javascript - ExtJs - 数据

ExtJS 3：创建自定义类的两种方式：有啥区别？

Javascript - ExtJs - GridPanel组件 - 编辑