『ExtJS』01 001. ExtJS 4 类的定义

最新推荐文章于 2021-10-25 10:50:47 发布

weixin_30914981

最新推荐文章于 2021-10-25 10:50:47 发布

阅读量62

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sitemanager/archive/2012/11/23/2784634.html

本文详细介绍了如何使用ExtJS4定义类、配置属性、添加方法及实例化类的过程，并通过示例代码展示了类配置、方法调用及属性操作。包括自动生成属性相关方法和使用config参数进行属性配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ExtJS 4 类的定义

类的定义与类方法的调用

样例代码

// Define new class 'Vehicle' under the 'Cookbook' namespace
Ext.define('Cookbook.Vehicle', {
    // class configuration goes here
    Manufacturer : 'Aston Martin',
    Model : 'Vanquish',

    getDetails : function() {
        alert('I am an ' + this.Manufacturer + ' ' + this.Model);
    }
}, function(){
    Console.log('Cookbook.Vehicle class defined!');
});

var myVehicle = Ext.create('Cookbook.Vehicle');
alert(myVehicle.Manufacturer);
myVeicle.getDetails();

说明

第二行，使用Ext.define定义了一个Cookbook.Vehicle类，Cookbook是命名空间。
第四行、第五行，加入了两个属性。
第七行，加入了一个getDetails方法。
第十行，加入了callback方法，这个方法将在类定义之后执行。

样例代码２// Define new class 'Vehicle' under the 'Cookbook' namespace
Ext.define('Cokbook.Vehicle', {
    config : {
        // class configuration goes here
        Manufacturer : 'Aston Martin',
        Model : 'Vanquish',
    },

    constructor : function(config) {
        // initialise our config object
        this.initConfig(config);
    },

    getDetails : function() {
        alert('I am an ' + this.Manufacturer + ' ' + this.Model);
    }
}, function() {
    Console.log('Cookbook.Vehicle class defined!');
});

// create a new instance of Vehicle class
var myVehicle = Ext.create('Cokbook.Vehicle');
// display its details
myVeicle.getDetails();
// update Vehicle details
vehicle.setManufacturer('Volkswagen');
vehicle.setModel('Golf');
// display its new details
vehicle.getDetails();

说明

如果在类的定义内，使用config标明配置属性，则Ext会自动生成属性相关的set、get、apply方法。

样例代码3Ext.define('Cookbook.Vehicle', {
    Manufacturer : 'Aston Martin',
    Model : 'Vanquish',

    getManufacturer : function() {
        return this.Manufacturer;
    },
    setManufacturer : function() {
        this.Manufacturer = value;
    },
    resetManufacturer : function() {
        this.setManufacturer('Aston Martin');
    },
    applyManufacturer : function(manufacturer) {
        // perform some action to apply the value(e.g. update a DOM element
        return manufacturer;
    },
    getModel : function() {
        return this.Model;
    },
    setModel : function(value) {
        this.Model = value;
    },
    resetModel : function() {
        this.setModel('Vanquish');
    },
    applyModel : function(model) {
        // perform some action to apply the value (e.g. update a DOM element)
        return model;
    },
    getDetails : function() {
        alert(' ... ')
    }
});