1. 首页
  2. 文章中心
  3. 前端extjs

EXT 学习(一)EXTJS 学习(一) :类和对象的概念

113 阅读 0 评论
我是靠谱客的博主 爱撒娇硬币，这篇文章主要介绍EXT 学习(一)EXTJS 学习(一) :类和对象的概念，现在分享给大家，希望可以做个参考。

EXTJS 学习(一) :类和对象的概念

1. 入门Demo

1.1 在开发工具中引入相关的ext的js源码文件,比如使用idea开发,则web目录下引入关键js文件

以下是必须要有的,其他的看情况选择.,js源码文件可以上ext官网下载
ext-all.css , ext-all.js ,并且如果有用到 ext-base.js,必须放到 ext-all.js
前面 ,因为加载时是先加载 ext-base.js,后加载ext-all.js

1.2 Extjs 版HelloWorld(这里使用的是ext5)

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#在idea的web工程的web目录下创建首页index.jsp或者index.html,例如,注意文件路径一定要引对

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>MyExt</title>
    <link rel="stylesheet" type="text/css" href="ext/css/ext-theme-crisp-all.css">
    <script type="text/javascript" src="ext/js/ext-all.js"></script>
    <script type="text/javascript" src="ext/js/ext-locale-zh_CN.js"></script>
    <script type="text/javascript" src="app/appjs/app.js"></script>
</head>
<body>
        
</body>
</html>

#最后引入的是我们自己的应用app.js,在app.js中写入以下信息,ext版本的 HelloWorld就写好了
Ext.onReady(function(){
   Ext.MessageBox.alert("信息","Hello world");
});

2 .EXTJS 中的一些基本概念

2.1 EXTJS中类的定义

复制代码
1
2
3
4
5
6
7
8
#定义类的语法
Ext.define(class name, class members/properties, callback function); *常用语法* 
    还可以用Ext.apply(...)定义
#类名是根据应用程序结构的类名 .
1.class name(类名):appName.folderName.ClassName (程序名.类存放目录.类名)
例:studentApp.view.StudentView。
2.class members/properties(成员/属性):

2.1.1 Ext.apply()方法 和Ext.define()方法

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//1.定义命名空间 并创建一个类
Ext.namespace("Ext.myspace");
Ext.myspace.Person = Ext.emptyFn;

Ext.apply(Ext.myspace.Person.prototype,{//2.使用apply()方法 将指定属性的值赋给Person类的原型属性(prototype)
    name:'王五',
    age:18,
    sex:'男'
}); 

Ext.define('Ext.myspace.Person',{//2.1 使用define() 创建类
    name:'王五',
    age:18,
    sex:'男'
}); 

//3.创建实例,和给实例的属性重新赋值
Ext.onReady(function(){
    var _person = new Ext.myspace.Person();//创建对象
    alert(_person.name);
    _person.name = '李四'; //给属性重新赋值
    alert(_person.name);
    alert(_person.age); //判断没重新赋值的属性是否会有变化
});

2.1.2 使用Ext.apply()方法 和Ext.define()方法 创建类的区别

相同不同
作用给一个类的属性赋值,或增加属性/
参数apply()第一个参数是 类名.prototypedefine() 第一个参数 是类名并且是字符串类型的

2.2 EXT中类 的构造方法

2.2.1 构造函数的不同写法

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Ext.fine('Ext.myspace.Person',{
    name: '',
    age: 0,
    sex: '',   
    say:function(){
        alert('good boy')
    },
    /*
    constructor: function (config) {// 构造函数第一种写法 
         Ext.apply(this, config) 
    }
    */
    constructor: function (config) {// 构造函数第二种写法 
        var me = this;
        me.initConfig(config);
    }
});

2.3 EXTJS 中成员变量的声明

2.3.1 EXTJS中 定义类时成员变量的两种写法

2.3.1.1 成员变量的第一种写法
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Ext.define('Ext.myspace.Person',{
    config: {      					//成员变量的第一种写法
        name: '王五',
        age:18
    },
    constructor:function (config) {//在初始化类的时候构造函数无法初始化成员
        var me = this;
        me.initConfig(config)
    }
});

var  p = new Ext.myspace.Person();
alert(p.name) -->undfind
alert(p.age)-->undfind
alert(p.getName())-->王五
alert(p.getAge())-->18

p.setName('李四')
p.setAge(12)
alert(p.getName())-->李四
alert(p.getAge())-->12
2.3.1.2 成员变量的第二种写法
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Ext.define('Ext.myspace.Person',{
    name: '王五',    				 //成员变量的第二种写法,省略config
    constructor:function (config) {//在初始化类的时候构造函数可以初始化成员
        var me = this;
        me.initConfig(config)
    }
});

var  p = new Ext.myspace.Person();
alert(p.name) -->王五
alert(p.age)-->18

p.setName('李四')--> is not a function
p.setAge(12)--> is not a function
alert(p.getName())--> is not a function
alert(p.getAge())--> is not a function
2.3.1.3 成员变量不同写法的区别
有config{}没有config{}
类对应的对象是否有setXxx() ,getXxxv() 方法有无
能否通过对象名点属性名取值(例如:p.name)不能能

第一种是常用的

2.4 EXTJS 中类的自定义成员方法

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    config: {
        name: '王五',
        age: 18
    },
    sing:function(){
        alert('sing a song')
    },
    constructor:function (config) {
        var me = this;
        me.initConfig(config)
    }
});

var  p = new Ext.myspace.Person();
alert(p.getName()) -->王五
alert(p.getAge()) -->18
p.sing() --> sing a song

2.5 EXTJS 中对象的创建

2.5.1 创建对象的不同方法

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//1.有一个类如下
Ext.define('Ext.myspace.Person',{
    config: {      					
        name: '王五',
        age:18
    },
    constructor:function (config) {
        var me = this;
        me.initConfig(config)
    }
});


//2创建他的对象
//2.1 new 创建
var p = new Ext.myspace.Person(); 
alert(p.getName()) -->王五
alert(p.getAge()) -->18

//2.2 Ext.creat() 创建
var p = Ext.create('Ext.myspace.Person',{ 
    name:'李四',
    age:12
});

alert(p.getName()) --> 李四
alert(p.getAge()) --> 12

EXTJS 推荐使用 Ext.create()

2.6 EXTJS 类的扩展(继承)

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
//父类
Ext.define('Ext.myspace.Person',{
    config: {      					
        name: '王五',
        age:18
    },
    constructor:function (config) {
        var me = this;
        me.initConfig(config)
    }
});

//1.写一个Student类继承Person类,不做任何扩展功能
Ext.define('Ext.myspance.Student', {
    extend: 'Ext.myspace.Person'
});

alert(s.getName()) --> 王五
alert(s.getAge()) -->18  
#出现这个结果说明使用 extend 继承父类,会自动调用父类的构造函数

//2.写一个Student类继承Person类,新增自己独有的属性和方法
Ext.define('Ext.myspance.Student', {
    extend: 'Ext.myspace.Person',
    config:{
        sex:'man',
        job:'learn'
    },
    sing:function () {
        alert('sing a song')
    },
    constructor: function (config) {
        var me = this;
        me.initConfig(config)
    }
});

alert(s.getName()) -->王五
alert(s.getAge()) -->18
//下面是子类的属性和方法
alert(s.getSex()) --> man
alert(s.getJob()) --> learn
s.sing() --> sing a song
#出现这个结果说明继承父类后 子类还可以有自己的构造函数不会影响父类的加载

//3.如果子类重写了父类的属性 和方法 父类对应的属性和方法会被覆盖(自行验证)

以上仅是个人认知

最后

以上就是爱撒娇硬币最近收集整理的关于EXT 学习(一)EXTJS 学习(一) :类和对象的概念的全部内容，更多相关EXT内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(75)

相关文章

Ext学习心得（一）
Ext学习心得（一）
数据结构之Deque
数据结构之Deque
环形链表C/C++数据结构什么是环？例题 141. 环形链表公式推导：环形链表二
环形链表C/C++数据结构什么是环？例题 141. 环形链表公式推导：环形链表二
数组实现环形(循环)队列的关键部分总结 获取队列有效元素数，空满判断数组实现环形(循环)队列的关键部分总结
数组实现环形(循环)队列的关键部分总结 获取队列有效元素数，空满判断数组实现环形(循环)队列的关键部分总结
EXT 学习(一)EXTJS 学习(一) :类和对象的概念
EXT 学习(一)EXTJS 学习(一) :类和对象的概念
Ext学习资料
Ext学习资料
ExtJs学习之路（一）
ExtJs学习之路（一）
Ext Js框架的学习向导
Ext Js框架的学习向导

评论列表共有 0 条评论

立即
投稿
返回
顶部