<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>示例2-1 Hello World</title>
<!--
(1)使用ExtJs需要引入的文件
★ext-all.css样式文件。这里替换为其他的css样式文件 则程序的整体css风格就会随之改变。
改变主题的下来选择框。最终也是切换CSS样式文件
★bootstrap.js自动根据实际情况来引入ext-all.js或者是ext-all-dev.js
★ext-lang-zh_CN.js 实现ext的本地化。如提示框不引入此文件 按钮为 ok，添加之后为 确定。
-->
<link rel="stylesheet" type="text/css" href="../js/ext4.2/resources/css/ext-all.css"/>
<script type="text/javascript" src="../js/ext4.2/bootstrap.js"></script>
<script type="text/javascript" src="../js/ext4.2/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
/*
★Javascript自定义类
原生的Javascript中自定义类
在这段代码中，我们定义了Person类，它具有Name 和 Age 两个属性，具有 Say 和 init 公有方法。
当类创建的时候，会定义通过调用init方法实现类的初始化（所以init方法可以看作是类的构造函数）。
我们看一下该类的用法：
var Tom = new Person("Tom", 26);
Tom.Say("Hello");
*/
var Person = function (name, age) {
this.Name = "";
this.Age = 0;
this.Say = function (msg) {
alert(this.Name + " Says : " + msg);
}
this.Cry = function(){
alert("cry....");
}
this.init = function (name, age) {
this.Name = name;
this.Age = age;
alert("init....");
}
//初始化(new Person对象的时候执行 init方法 给name和age赋值 和 执行Cry方法)
this.init(name, age);
this.Cry();
}
var Tom = new Person("Tom", 26);
Tom.Say("Hello");
/**
★ ExtJS 中自定义类
ExtJS 中自定义类的方法 使用ExtJS.define 方法自定义类
我们使用了Ext.define方法自定义一个Ext.Person类，它同样具有Name 和 Age 属性，具有Say 方法，
constructor 则为它的构造函数，有了专用的构造函数，我们就省去了写init方法的代码，直接在构造函数中完成对类的初始化，
它的使用方法没有改变
error:
1、Uncaught TypeError: Cannot read property ‘dom’ of null
原因：如果代码段没有放入Ext.onReady中
*/
Ext.onReady(function(){
Ext.define("PersonExt",{
name:'',
age:0,
Say:function(msg){
Ext.Msg.alert(this.Name + " Says:", msg);
},
constructor:function(name,age){
this.Name = name;
this.Age = age;
}
});
var person = new PersonExt("Tom2", 18);
person.Say("Hello2");
/////////////////////////////////////////////////////////////////////////////////
/*
★ ExtJS 中类的继承
ExtJS 允许对现有的类进行扩展，其扩展可以通过继承来实现。接下来我们就对刚刚使用ExtJS定义的Person类进行继承，
定义一个Developer类，它继承自Person，同时还拥有Coding方法。
从代码中可看出，ExtJS 使用 extend来实现继承。我们为Developer 类添加了Coding 方法，这是我们对Person类进行的扩展。
在构造函数中，通过调用this.callParent(arguments)方法，实现对属性的初始化。
需要说明的是，如果此处只调用了父类的构造方法，则可以省略掉，ExtJS 会自动为我们调用父类的构造函数。所以进行简化去掉constructor部分
需要注意的是，如果你在子类中使用了构造函数，ExtJS 则不会再自动调用父类的构造函数。
*/
Ext.define("Developer",{
extend:"PersonExt",//继承自Person
Coding:function(code){
Ext.Msg.alert("Developer","I can coding -->"+code);
},
constructor:function(){
this.callParent(arguments); //在构造函数中，通过调用this.callParent 方法，实现对属性的初始化
}
});
var dev = new Developer("Tom3",8);
dev.Coding("abc");
dev.Say("??????????");
/*
★ ExtJS 中类的选项 - config (初始化配置参数，自动生成get set方法)
List of configuration options with their default values, for which automatically accessor methods are generated.
Ext.create方法创建了一个Window 对象，Ext.create 方法的第一个参数是类名，第二个参数是类的选项，它是一个JSON格式的对象，用来初始化Window对象。
试想一下，如果我们的类中有几十个属性，那么我们使用构造函数就要传入几十个参数来对它完成初始化，这是一件很恐怖的事情。还好ExtJS 为我们提供了这种便利，
我们可以在定义类的时候为它添加配置项，然后调用ExtJS 内置的方法完成初始化，并可以生成访问器（类似于C#里面的get和set方法）。
*/
var win = Ext.create("Ext.Window",{ //Ext.Window它对应类的全称是 Ext.window.Window
title: '示例窗口',
width: 300,
height: 200
});
win.show();
//新定义PersonNew类，使它可以通过config初始化。 两个地方：config和构造函数this.initConfig(config)
Ext.define("PersonNew", {
config: {
Name: '',
Age: 0,
},
Say:function (msg) {
Ext.Msg.alert(this.Name + " Says:", msg);
},
constructor: function (config) {
this.initConfig(config); //注意：this.initConfig(config)
}
});
//定义personNew类对象的时候，使用Ext.create方法，传入类名PersonNew以及配置项，
var personNew = Ext.create("PersonNew", {
Name: 'Tom',
Age: 26
});
//1方法 personNew.Say("I am PersonNew")
personNew.Say("I am PersonNew");
//2 属性personNew.Name personNew.Age
alert(personNew.Name+"~~~.~~"+personNew.Age); //Tom~~~~~26
alert(personNew.getName()+"~~~get~~"+personNew.getAge()); //Tom~~~~~26
//3修改属性 (通过config ExtJS 为我们生成了访问器get和set方法)
personNew.setName("OldMan");
personNew.setAge(88);
alert(personNew.Name+"~~.~~~"+personNew.Age); //OldMan~~~~~88
alert(personNew.getName()+"~~get~~~"+personNew.getAge())
/*
★ExtJS 中类的别名 - alias
error:
1http://localhost:8080/TestExt4.2/phdq/PersonNew2.js?_dc=1418196387104 404 (Not Found)
2Uncaught Error: [Ext.Loader] Failed loading synchronously via XHR: 'PersonNew2.js';
please verify that the file exists. XHR status code: 404
第一个错误，ExtJS的动态加载检测到系统当前没有PersonNew2类的定义，于是就自动加载（当前路径的）PersonNew2.js，
这个路径是不存在的，于是出现了404未找到错误。
第二个错误，Person 未被定义，所以系统抛出类型错误信息。要想解决这个问题，我们需要将Ext.create方法的第一个参数修改为 "MyApp.PersonNew"。
但我们在这里不这样做，因为我们依然希望通过使用PersonNew2来完成，那么怎么办呢？
这时就用到别名了。
*/
Ext.define("MyApp.PersonNew", {
config: {
Name: '',
Age: 0,
},
alias:"PersonNew2", //这时就用到别名了。
Say: function (msg) {
Ext.Msg.alert(this.Name + " Says:", msg);
},
constructor: function (config) {
this.initConfig(config);
}
});
var Tom = Ext.create("PersonNew2", { //这时就用到别名了。PersonNew2等价于MyApp.PersonNew
Name: 'Tom',
Age: 26
});
Tom.Say("HelloXXXXXXXX");
});
</script>
</head>
<body>
</body>
</html> ExtJs4.2 类的定义、继承相关 define extend config constructor alias等
猜你喜欢
转载自blog.csdn.net/whb054/article/details/80476654
今日推荐
周排行