Ext JS学习第六天 Ext自定义类(一)

此文来记录学习笔记

•我们在之前的学习,已经对ExtJS有了一个初步的认识,那么如果要学好ExtJS,对于javascript是必须的,也就是说,对于理解ExtJS底层基础架构的理解也是必须的。那么我们现在就开始学习ExtJS的基础架构。

–如何创建一个Ext的类、创建类的复杂流程

•定义类的方法:define

•对于Ext4.X版本来说,采用了新定义类的define方法,而不是延续旧版本的extend方法,那么对于定义一个新的类。我们来了解下define的使用。

•Ext.define(classname,properties,callback);

–classname:要定义的新类的类名

–properties:新类的配置对象

–callback:回调函数,当类创建完后执行该函数

•对于Ext定义一个新的类,那么我们可以想象到,既然是利用Ext.define去创建类,那么创建的类一定是Ext所特有的类,不同于传统的javascript创建一个类,也就是说我们要对于define方法的第二个参数properties配置项进行配置,需要找到Ext对于类支持的API并进行配置

好了,依照惯例该到举栗子的时候了,请看栗子代码

 1 Ext.onReady(function () {
 2     //config 、constructor 构造器
 3
 4     //在Ext中如何去定义一个类: Ext.define(className , properties , callback)
 5     Ext.define(‘Person‘,{
 6     //这里是对于这个类的一些配置信息
 7     //config属性 就是配置当前类的属性内容,并且会加上get和set方法
 8     config:{
 9         name:‘z3‘ ,
10         age: 20
11     },
12     //自己定义的方法
13     say:function(){
14         alert(‘我是方法...‘);
15     },
16     //给当前定义的类加一个构造器 ,目的就是为了初始化信息
17     constructor:function(config){
18         var me = this ;
19         me.initConfig(config);    // 真正的初始化传递进来的参数
20     }
21     });
22
23     //Ext.create 实例化一个对象
24     var p = Ext.create(‘Person‘,{
25     name:‘王五‘ ,
26     age:30
27     });
28     alert(p.getName());//王五
29     alert(p.getAge());//30
30     p.say(); //我是方法...
31
32 })

一个类就定义好了,今天就到这里吧,有问题欢迎大家给我留言,明天给大家说一下ext类的继承

给各位推荐个文章网www.fishcmonkey.com,学习之余提高文学修养

时间: 2024-10-09 20:18:51

Ext JS学习第六天 Ext自定义类(一)的相关文章

Ext JS学习第六天 Ext_window组件(三)

此文用来记录学习笔记: 今天再来一个例子巩固一下学习的window: –例2: 在window中添加子组件,并讲解常用查找组件的方式: •重点分析:该实例主要针对于组件的查找进行详细的讲解,在以后的应用开发中,同学们应该学会各种方式去查找所需要的组件,不要拘泥于某种特定形式,这样会给开发思路带来很多好处. –ownerCt –up/down方法 –Ext.getCmp方法 附上栗子代码1 Ext.onReady(function(){ //ex002 : 在组件中添加子组件 ,并进行一系列针对于

Ext JS学习第五天 Ext_window组件(一)

此文来记录学习笔记 •第一个组件:Ext.window.Window.对于组件,也就是Ext最吸引开发者的地方,那么我们要真正的使用Ext的组件,首先必须学会阅读API文档. –xtype:组件的别名 –Hierarchy 层次结构 –Inherited mixins 混入的类 –Requires 该组件需要使用的类 –configs:组件的配置信息 –properties:组件的属性 –methods:组件的方法 –events:组件的事件 •window组件常用属性和方法讲解: •confi

Ext JS学习第五天 我们所熟悉的javascript(四)

此文用来记录学习笔记: •javascript之对象.面向对象 •可能对于高级语言你可能了解甚至精通OOP面向对象,那么对于javascript你又熟悉多少呢?我们一起来学习javascript面向对象,这样非常有帮助我们理解Ext的基础架构,Ext本身就是一个JS面向对象的框架. •使用json对象(JavaScript Object Notation) –JS对象的特性 –对于js来说json对象非常的重要,我们要学会如何操作json对象 •面向对象的概念 –如何定义一个类.如何实例化对象.

Ext JS学习第五天 Ext_window组件(二)

此文用来记录学习笔记 •上一讲我们已经学过了window的使用,那么在这将中,我们将结合然后把Ext中需要注意的地方,以及组建的使用给予介绍.indow做几个Web开发的经典示例. •ExtWeb实战300例: –例1:点击按钮打开一个window,window重复创建的问题 •重点分析:这个问题是初学者经常会犯错的地方,一般来说简单的代码不会产生此问题,但是如果以后代码复杂以后,这个问题如果发生调试起来会非常麻烦!! 附上栗子代码 1 Ext.onReady(function () { 2 3

Ext JS学习第三天 我们所熟悉的javascript(二)

•javascript之函数 •对于Ext开发者,我还是希望你能对javascript原生的东西非常了解.甚至熟练掌握运用.那么函数,无疑是非常重要的概念.首先在前面一讲,我们知道了函数也是一种数据类型,创建函数一共有三种方式.每种方式他们都会有区别,分别为: –function语句形式 –函数直接量形式 –构造函数形式 •函数中的arguments对象 –argument的作用一:接受函数的实际参数 –argument的作用二:用于做递归操作 栗子代码 1 //Function 函数 2 //

Ext JS学习第二天 我们所熟悉的javascript(一)

此文用来记录学习笔记: •ExtJS是一个强大的javascript框架,如果想真正的掌握ExtJS,那么我们必须要对javascript有一定的认识,所以很有必要静下心来,抱着一本javascript书籍,恶补一番.推荐书籍<javascript高级程序设计>.<javascript设计模式>. •在这里我们学习一下可能你从未接触过的javascript,这些javascript知识是我们要学好ExtJS这个框架非常有必要的.必备的知识.我们需要掌握的内容有: –javascri

Ext JS学习第四天 我们所熟悉的javascript(三)

此文用来记录学习笔记: •javascript之函数 •this关键字的使用 –this关键字总是指向调用者,谁调用函数,this就指向谁 •call.apply的使用 –call和apply主要应用与框架底层,用于绑定函数的执行环境/作用域 •块的概念 –和高级程序语言不同,js里没有块的概念,我们一般用小括号包裹块级作用域 •闭包:掌握闭包必须要深入清楚的概念 –执行环境 –作用域链 –垃圾回收机制 附上栗子 代码 1 // This 关键字 在javascript里的使用 2 //this

Ext JS学习第七天 Ext自定义类,继承(二)

此文来记录学习笔记 一个简单ext继承的栗子 Ext.onReady(function () { Ext.define('Person',{ config:{ name:'z3' } , constructor:function(config){ var me = this ; me.initConfig(config); } }); //Sub Class Ext.define('Boy',{ //使用Ext的继承 extend:'Person', config:{ sex:'男', age:

Ext JS学习第十二天 Ext基础之操作dom ; get与fly 方法

此文用来记录学习笔记 •嗯!首先,什么是DOM(Document Object Model) –W3C对DOM的定义:文档对象模型是一个平台,一个中立于语言的应用程序编程接口(API),允许程序访问并更改文档的内容.结构和样式. –其实DOM是一种通用的模型.不止在我们的HTML中存在,也可以在其他文件中存在,相信你最熟悉的就是XML了吧,其实还有很多... –DOM的发展也非常的漫长,版本延续,产生了0级DOM.1级DOM.2级DOM和最新的3级DOM,那么相对成熟的就是从2级DOM以后了.每