ExtJs学习笔记01

最近在学习DojoChina的陈治文老师讲解的视频ExtJs，在这里记录一些学习笔记，方便日后查看，有兴趣的朋友欢迎共同探讨，也请老鸟们多多指教，如果我的理解有什么不正确的地方，也请大家帮助也改正，帮我指出一条明路，先在这里谢过了。

如果要想运行ExtJs的程序需要在HTML文件中引入基本的三个Ext文件：

1. <link type="text/css" rel="stylesheet" href="ext/resources/css/ext-all.css">  
2. <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>  
3. <script type="text/javascript" src="ext/ext-all.js"></script>

先测试一下是否引入正确：

    在HTML文件中加入如下javascript代码：

   <script type="text/javascript">
    Ext.onReady(function() {
        var win;
        win = new Ext.Window( {
            applyTo : 'wy',
            title : 'HelloWorld',
            width : '400',
            height : '200',
            items : new Ext.Component( {
                xtype : 'textarea',
                html : 'ExtJs 的HelloWorld'

            }),
            buttons : [ {
                text : '关闭',
                handler : function() {
                    win.close();
                }

            } ],
            frame : true
        });
        win.show(this);
    });
</script>

然后再写一个：<div id="wy"></div>

ok，运行一下，如出现提示说明环境搭建正确！

NameSpace

把定义NameSpace的JS写到一个单独的js文件中 ：

//定义命名空间
Ext.namespace("dojochina");
dojochina.Person = Ext.emptyFn;//写法相当于dojochina.Person = new function() {};

然后就可以在通过new来创建Person类的一个实例

<script type="text/javascript">  

    new dojochina.Person();  

</script> 

OK，类的实例创建成功，当然，运行起来会没有任何反应，因为我们在类的定义中只给出了一个空的function。

程序通过命名空间可以具有很好的组织形式，在java中命名空间的形式是通过package来实现的，Ext命名空间实际上是使用JavaScript的对象和对象属性级联来模拟的，和java的命名空间实现方式是不同的。将Ext的NameSpace用java的package来理解就容易多了。

类实例属性

类实力属性：对于一个实例的特征描述。

类实例：按照java中的概念来理解一下，java中类的一个实例，其实就是一个对象，java是面向对象的语言，Ext是用JavaScript实现的面向对象（这样的说法不是很严谨，意会一下），那么这里的“类实例”其实就是我们通常所说的“对象”。那么“类实例属性”，其实也就是对象的属性。

类实例属性的创建：

 //定义命名空间
Ext.namespace("dojochina");
dojochina.Person = Ext.emptyFn;//写法相当于dojochina.Person = new function() {}; 
//类的实例属性
Ext.apply(dojochina.Person.prototype,{name:"北斗"});

prototype 是JavaScript中的函数原型，apply 方法是JavaScript中提供的对象绑定的方法（JavaScript中常用的对象绑定方法有两种：apply和call），Ext.apply是对JavaScript提供的apply方法进行了一层封装。

来看一下调用：

  在HTML中加入以下代码：

<!-- 类实例属性 -->
<script type="text/javascript" src="Extjs/Extjs1.js"></script>
<script type="text/javascript">
    var person = new dojochina.Person();
    alert(person.name);
    person.name = "Extjs";
    alert(person.name);
</script>

结果：当进入页面的时候，会弹出对话框，内容是“北斗”，点击确定以后又弹出对话框，内容是“Extjs”。这是因为在创建类Person的时候，创建了name属性，并赋给它一个默认值“ 北斗”， 在调用的时候我们更改了person对象的name属性，并赋值“Extjs”，这样两次alert的结果就不相同了。

类实例方法

 类实例方法：一个对象所具有的功能与动作。

//定义命名空间
Ext.namespace("dojochina");
dojochina.Person = Ext.emptyFn;//写法相当于dojochina.Person = new function() {};
//类的实例方法
Ext.apply(dojochina.Person.prototype,{name:'',sex:'',print:function(){
    alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
}});

   

"String.format"是Ext封装的一个字符串处理方法，"String.format"方法中的参数格式，写法很方便，不用做繁琐的字段拼接。

上面代码中Person类中定义了两个类实例属性name和sex，并且它们的默认值为空，在构造Person对象实例的时候可以为它们进行赋值操作。提供了一个类实例方法，将属性输出。

来看一下调用：

<!-- 类实例方法 -->
<script type="text/javascript" src="Extjs/Extjs2.js"></script>
<script type="text/javascript">
    var person = new dojochina.Person();
    //设置属性  
    person.name = "纯属虚构";
    person.sex = "男";
    //调用方法  
    person.print();
</script>

结果：可以看到弹出对话框中显示：“姓名：纯属虚构，性别：男”，是经过格式化以后的文本输出样式，也就是类实例方法中定义的样式，从这里也可以看到Ext封装的"String.format"方法的使用效果。

类静态方法

   类静态方法：:在一个类级别上的共享方法。

  //定义命名空间
Ext.namespace("dojochina");
dojochina.Person = Ext.emptyFn;
//类静态方法
dojochina.Person.print = function(name,sex){
    var person = new dojochina.Person();
    person.name = name;
    person.sex = sex;
    person.print();
}

来看一下调用：

  <!-- 类静态方法 -->
<script type="text/javascript" src="Extjs/Extjs3.js"></script>
<script type="text/javascript">
     dojochina.Person.print("北斗", "男");
</script>

调用的过程是 new dojochina.Person.print(name, sex)，而不是先new dojochina.Person()，在调用它的print()方法。构造对象的过程是在静态方法内部完成的。