ExtJS学习(一)Ext自定义类实现

工作中项目需要extjs,所以学习一下,做个笔记防止遗忘了。以后回忆起来也方便。
首先下载extjs官网地址:http://extjs.org.cn/
下载以后的目录结构:
ExtJS学习(一)Ext自定义类实现_第1张图片

先写一个入门的程序吧自定义类实现

  1. 新建web项目。
  2. 导入js文件。
  3. 项目中引用。

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Hello Extjs4.2title>  
<link href="../ExtJS4.2/resources/css/ext-all.css" rel="stylesheet">  
<script src="../ExtJS4.2/ext-all.js">script> 
<script src="d1.js">script> 
head>
<body>
<h1>ExtJS4.2学习h1>  
<hr />  
作者:springok  
<h2>ExtJS 中自定义类h2>  
body>
html>

d1.js:

Ext.define('springok.Demo',{  
    name:'springok',  
    hello:function(){  
        return 'Hello'+this.name;  
    }  
});  


Ext.onReady(function(){
    alert(new springok.Demo().hello());

});

测试:
ExtJS学习(一)Ext自定义类实现_第2张图片
很简单的主要就是类的实例化和调用。
测试一下类的实例化和调用的过程oo思想的体现:
d1.js修改为:

Ext.define('springok.Demo',{  
    name:'ThinkDiary',  
    hello:function(){  
        return 'Hello'+this.name;  
    }  
}); 


Ext.define('springok.Window',{  
    extends:'Ext.Window',  
    title:'springok',  
    initComponent:function(){ //初始化  先执行initComponent 再执行自定义初始化构造函数
        document.write( "initComponent执行......." );
        Ext.apply(this,{//将一批属性复制给当前对象  
            items:[{  
                html:'11111'  
            },{  
                html:'2222222'  
            }]  
        });  
        this.callParent();//快捷调用父类函数  
    },  
    mixins:['springok.Demo'], //多重继承  
    config:{ //辅助功能属性  
        title:'demo'  
    },  
    statics:{ //定义类静态成员  
        TYPE_DEFAULT:1  
    },  
    constructor:function(){ //自定义初始化构造函数,先执行此再执行initComponet  
        //do something init  
        document.write( "constructor执行......." );
    }  ,
    layout : 'fit'
}); 

new springok.Window();
Ext.onReady(function(){
    //new springok.DemoWindow();

});

**

接下来看下面向对象如何实现:

**

Ext.define("springok.Person", {  
    Name: '',  
    Age: 0,  
    //普通的方法
    Say: function (msg) {  
        Ext.Msg.alert(this.Name + " Says:", msg);  
    },  
    //构造器
    constructor: function (name, age) {  
        this.Name = name;  
        this.Age = age;  
    }  
});

Ext.onReady(function(){
//实例化类调用方法
    new springok.Person('springok.Person',18).Say("springok");

});

测试:
ExtJS学习(一)Ext自定义类实现_第3张图片

你可能感兴趣的:(web前端,ext,extjs,工作,结构,class)