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

最新推荐文章于 2018-11-10 14:02:14 发布

chenyan6557

最新推荐文章于 2018-11-10 14:02:14 发布

阅读量79

点赞数

原文链接：https://my.oschina.net/tester/blog/670526

版权

工作中项目需要extjs，所以学习一下，做个笔记防止遗忘了。以后回忆起来也方便。
首先下载extjs官网地址：http://extjs.org.cn/
下载以后的目录结构：
ext目录结构

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

新建web项目。
导入js文件。
项目中引用。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Hello Extjs4.2</title>  
<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());

});

测试：
测试1
很简单的主要就是类的实例化和调用。
测试一下类的实例化和调用的过程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");

});

测试：
实例化对象并调用