ExtJS 中类的选项 - config

首先看一个例子,我们在ExtJS中定义一个Window对象,代码如下:

var win = Ext.create("Ext.window.Window", {
    title: ‘示例窗口‘,
    width: 300,
    height: 200
});
win.show();

  在上面的代码中,我们通过Ext.create方法创建了一个Window 对象,Ext.create 方法的第一个参数是类名,第二个参数是类的选项,它是一个JSON格式的对象,用来初始化Window对象。我们的窗口运行如下:

试想一下,如果我们的类中有几十个属性,那么我们使用构造函数就要传入几十个参数来对它完成初始化,这是一件很恐怖的事情。还好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类对象的时候,使用Ext.create方法,传入类名Person以及配置项,然后调用Tom的Say方法,运行效果如图:

除了代码更加清晰简洁以外,ExtJS 还为我们生成了访问器,我们可以通过下面的方式访问Tom的属性:

Tom.setAge(20);
alert(Tom.getAge());

ExtJS 生成了get、set方法,我们可以通过这样的方式来访问对象的属性。

时间: 2024-10-07 09:22:17

ExtJS 中类的选项 - config的相关文章

ExtJS 中类的继承

ExtJS 允许对现有的类进行扩展,其扩展可以通过继承来实现.接下来我们就对刚刚使用ExtJS定义的Person类进行继承,定义一个Developer类,它继承自Person,同时还拥有Coding方法,代码如下: Ext.define("Developer", { extend: 'Person', Coding: function (code) { Ext.Msg.alert(this.Name + " 正在编码", code); }, constructor:

EXTJS--使用Ext.define自定义类

Javascript自定义类 var person = function(name,age){ this.Name = ""; this.Age = 26: this.Say = function(msg){ alert(this.Name + " Says : " + msg); } this.init = function(name,age){ this.Name = name; this.Age = age; } this.init(name, age); }

集成 extjs 和 highcharts

highcharts 库的画图效果比 ExtJS 好,但 ExtJS 拥有强大的类管理.两者都很不错. 通常在商业项目上,尽量只选择一个库,以减少成本.但如果只是用于非盈利项目上,那么,可以把两者结合起来,既可以用到 extjs 强大的类管理,又可以用到 highcharts 强大的图像功能.各取两者的优势,也是一种不错的使用办法哦. 利用了 extjs panel 的标题,又使用了 highchart 的画图 1 导入库 如下代码所示:具体就是引用 extjs,jquery, highchar

【ExtJS】一些基本概念的梳理

学习ExtJS有一段时间了,一些相关知识点虽然每天都在用,不过如果猛的一问起来还是会一愣,趁现在好好梳理下吧.长期修改添加,弄清楚什么就加入什么. 1.Ext.onReady(): onReady()方法是Ext.loader.onReady()方法的别名.这个方法用于监听ExtJS以及HTML页面是否加载完成.当一切都加载完成以后,执行Ext.onReady()指定的方法. Ext.onReady(Object fn, object scope, Object options) 其中,参数fn

records.config文件配置模板

# # # Process Records Config File # # <RECORD-TYPE> <NAME> <TYPE> <VALUE (till end of line)> # # RECORD-TYPE: CONFIG, LOCAL # NAME: name of variable # TYPE: INT, STRING, FLOAT # VALUE: Initial value for record # # # *NOTE*: All opt

config parser 模块

config parser -- 用于解析配置文件的模块 何为配置文件? 包含配置程序信息的文件就称为配置文件 什么样的数据应该作为配置信息 需要改 但是不经常改的信息   例如:数据文件的路径 配置文件中 只有两种内容: 一种是 section 分区 一种是  option  选项  就是一个 key=value 形式 我们用的最多的就是get功能 - 用来从配置文件获取一个配置选项 实例如下: # test.cfg 文件内容如下: # 路径相关的配置 [path] db_path = C:/

构建施耐德楼控系统数据库后台服务器示例工程三(Web端展示)

最近看到Extjs的示例中有仿操作系统桌面的代码,并且展示效果很美观,结合楼控这个系统的Web端展示需求,目前前端采用Extjs.楼控相关的操作会设计成桌面中的不同应用. Extjs初次入手看起来很复杂,但是由于其自带的示例代码很丰富,通常在了解一些基本概念后,参照着示例代码一步一步去做,我认为是最好的学习方式了. 目前我参照着Extjs中仿照桌面的示例代码,做出了如下的画面: 从图中我们可以看出,我目前在仿照着这个示例代码中的GridPanel.TabPanel.Window这些基本的组件,做

ExtJs4基础概念总结

Ext.application 代表一个ExtJs富客户端的应用程序的入口点.从Ext4.0开始提出一个新的概念:Ext MVC application Architecture. 这个概念用于帮助开发者以最快的速度组织起一个高效.稳定的的Ext前端.定义Ext.application的文件脚本一般起名为 app.js.将这个文件加载到index.html中.app.js文件的作用如下: 指定Ext Framework类加载路劲 定义全局命名空间 定义自动创建视图属性 罗列控制器 app.js在

XenServer7.0创建本地ISO库

在6.5版本上创建ISO仓库不会牵扯到创建lvm时权限错误,但是再7.0版本却会出现这种错误,如下: [[email protected] ~]# lvcreate -L 20G -n local_iso `vgs|awk 'NR==2{print $1}'`   lvcreate -L 20G -n local_iso VG_XenStorage-8e812398-6d55-b06a-2907-ac95c4c12533: Command not permitted while global/m