57ed1fc60469de81f5fc732e2aaf02f0.jpg


晚上看书的感悟：学习转化为能力的过程：学习-复习-体会-实践-理解-能力。不要以为自己够聪明，其实学习只能记住20%，复习记住30%，体会得到40%，实践得出50%，理解得到60%，理解了70%后转换为能力的才有80%。智慧才是力量，因为智慧对行动的影响更大。将知识变成智慧地过程常常是一个痛苦的过程。
好了，言归正传，我们开始学习ExtJS4.2需要的JS包可以从官网下载，这里不多说。这里为什么先说数据基本方式，不要觉得无聊，因为只有这些最重点弄懂了，其他的一些属性用到的时候查下就好了。
1、创建一个新类 
//demo 01 
Ext.define('demo.Demo',{ 
    name:'ThinkDiary', 
    hello:function(){ 
        return 'Hello'+this.name; 
    } 
}); 
//demo 02 
Ext.define('demo.DemoWindow',{ 
    extends:'Ext.Window', 
    title:'demo hello', 
    initComponent:function(){ //初始化 
        Ext.apply(this,{//将一批属性复制给当前对象 
            items:[{ 
                html:'panel1' 
            },{ 
                html:'panel2' 
            }] 
        }); 
        this.callParent();//快捷调用父类函数 
    }, 
    mixins:['demo.Demo'], //多重继承 
    config:{ //辅助功能属性 
        title:'demo' 
    }, 
    statics:{ //定义静态成员 
        TYPE_DEFAULT:0 
    }, 
    constructor:function(){ //自定义初始化构造函数，先执行此再执行initComponet 
        //do something init 
    } 
});

我们在外部可以这样调用new demo.DemoWindow();
这样更倾向于面向对面的思想了，这正是4.2的新特性之一，下面来个例子：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<!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>Hello Extjs4.2</title> 
<link href="../ExtJS4.2/resources/css/ext-all.css" rel="stylesheet"> 
<!-- <script src="../ExtJS4.2/locale/ext-lang-zh_CN.js"></script> --> 
<script src="../ExtJS4.2/ext-all.js"></script> 
<script type="text/javascript"> 
/* Start ExtJS 中自定义类 **/ 
Ext.define("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(){ 
    var Tom = new Person("束洋洋", 22); 
    Tom.Say("你好，ExtJs4.2"); 
}); 
/* END ExtJS 中自定义类 **/ 
      
</script> 
</head> 
<body> 
<h1>我的ExtJS4.2学习之路</h1> 
<hr /> 
作者：束洋洋 
开始日期：2013年10月29日 00:51:00 
<h2>第二个例子：ExtJS 中自定义类</h2> 
</body> 
</html>

弹出效果：
b24bdcf63a7dcb700c760878c1f710f8.jpg

连载中，请大家继续关注！本文出自我的个人网站思考者日记网