认识ExtJs的开发包(基础必备)

野性酷女 2022-08-05 05:20 107阅读 0赞

以下转载自：[http://www.cnblogs.com/knowledgesea/p/3597786.html][http_www.cnblogs.com_knowledgesea_p_3597786.html]

下载路径：http://www.sencha.com/products/extjs/download/

解压有20多兆，别怕，真正运行的没这么大。认识下这个包的文件结构吧。

*  builds目录是ExtJs压缩后的代码，经过压缩后的代码体积小，加载快。
 *  docs中是ExtJs文档，包括ExtJs的API,算是开发过程中必备法宝啦吧。
 *  examples中是官方的演示实例。
 *  locale是多国语言的资源文件，其中ext-lang-zh\_CN.js是简体中文，把他引入页面中，会将提示等显示信息自动转化为中文简体。
 *  overview是ExtJs的功能简述，其中从整体上阐述啦ExtJs的功能和结构。
 *  pkgs中是ExtJs各部分功能的打包文件
 *  resource是ExtJs要用到的图片文件与样式表文件，ExtJs引以为傲的漂亮外观就全部由这个目录中的文件所控制。
 *  src是未压缩的源代码目录。
 *  bootstrap.js是ExtJs库的引导文件，通过参数可以自动切换ext-all.js和ext-all-debyg.js。
 *  ext-all.js文件是ExtJs的核心库，是必须要引入的。
 *  ext-all-debug.js文件是ext-all.js的调试版，在调试时需要使用的调试版本文件。

# ExtJs命名规范 #

1.类的命名规范

*  类名仅可包含字母、数字。数字大多数情况下不推荐使用，除非是在一些技术术语中。不要使用中划线、下划线等非字符
    
        MyCompany.useful_util.Debug_Toolbar //不要使用下划线 
        MyCompany.util.Base64 //技术术语可以包含数字 
 *  类应该通过正确命名的“包（Packages）”来组织。最小包情况时，类名应该紧随最顶层的“名字空间（Namespace）”：
    
        MyCompany.data.CoolProxy //“包”通过“.”来组织 
        MyCompany.Application //最小包情况 
 *  最顶层的“名字空间（Namespaces）”和“类名（ClassNames）”应该使用“驼峰命名法（CamelCased）”，其他都是用小写字母：
    
        MyCompany.form.action.AutoLoad 
 *  非Sencha官方发布的类，不要使用“Ext”作为最顶层名字空间。
 *  缩写词也要遵守“驼峰命名法（CamelCased）” ：
    
        Ext.data.JSONProxy 替换为Ext.data.JsonProxy 
        
        MyCompary.parser.HTMLParser 替换为 MyCompany.util.HtmlParser 
        
        MyCompany.server.HTTP 替换为MyCompany.server.Http

2、源文件的命名规则

*  类名直接映射到文件存储路径，每个类一个文件：
    
        Ext.util.Observable 存储在 path/to/src/Ext/util/Observable.js 
        
        Ext.form.action.Submit 存储在 path/to/src/Ext/form/action/Submit.js 
        
        MyOrg.chart.axis.Numeric 存储在 path/to/src/MyOrg/chart/axis/Numeric.js

3、方法和变量的命名规则

*  方法和变量命名同类一样，仅可包含字母、数字。数字大多数情况下不推荐使用，除非是在一些技术术语中。不要使用中划线、下划线等非字符；

*  方法和变量命名应该使用“驼峰命名法（CamelCased）”，缩写词也一样；
    
    ![复制代码][copycode.gif]
    
        encodeUsingMd5() //技术术语可以包含数字 
        
        getHTML()  //替换为getHtml() 
        
        getJSONResponse()   //替换为getJsonResponse()  
        
        parseXMLContent()   //替换为parseXmlContent()
        
        var isGoodName
        var base64Encoder //技术术语可以包含数字
        var xmlReader 
        var httpServer
    
    ![复制代码][copycode.gif]

4、属性的命名规则

*  非静态的类属性命名规则同上；
 *  静态的类属性命名全部使用大写字母：

# EXT基本方法、属性（onReady、define、create）  #

onReady:只有在Ext框架全部加载完后才能在客户端的代码中使用Ext，而Ext的onReady正是用来注册在Ext框架及页面的html代码加载完后，所要执行的函数。

调用onReady方法时可以带三个参数，

第一个参数是必须的，表示要执行的函数或匿名函数，

第二参数表示函数的作用域，

第三个参数表示函数执行的一些其它特性，比如延迟多少毫秒执行等，大多数情况下只需要第一个参数即可。

![复制代码][copycode.gif]

![复制代码][copycode.gif]

define：创建类，可以继承其他类，也可以被继承

![复制代码][copycode.gif]

Ext.onReady(function () {
                //创建一个类，类名：TextClass，具有两个属性：A、B
                Ext.define('TextClass', {
                    A: 'a',
                    B: 'b'
                });
                //实例化类
                var textClass = new TextClass();
                //输出属性名
                Ext.Msg.alert('类属性', textClass.A + " " + textClass.B);  //textClass.A结果为a，textClass.B结果为b
            });

![复制代码][copycode.gif]

Ext.onReady(function () {
                //创建一个类，类名：TextClass，具有两个属性：A、B
                Ext.define('TextClass', {
                    A: 'a',
                    B: 'b'
                });
                //创建一个类，继承TextClass
                Ext.define("TextClass2", {
                    extend: 'TextClass', //继承TextClass
                    C: 'c'//TextClass2特有的属性
                })
                var textClass2 = new TextClass2();
                Ext.Msg.alert("TextClass2属性", textClass2.A + " " + textClass2.B + " " + textClass2.C)  //输出结果为 a b c
            });

![复制代码][copycode.gif]

create ：实例化类，在EXTJS4中建议用create方法实例化类

![复制代码][copycode.gif]

Ext.onReady(function () {
                //创建一个类，类名：TextClass，具有两个属性：A、B
                Ext.define('TextClass', {
                    A: 'a',
                    B: 'b'
                });
    
                var textClass = Ext.create("TextClass")
    
                Ext.Msg.alert('textClass属性', textClass.A + ' ' + textClass.B)  //输出结果为 a b
            });

![复制代码][copycode.gif]

# EXT基本方法、属性（apply、applyIf、constructor） #

[ExtJS面向对象][ExtJS] 这文中有介绍。

![复制代码][copycode.gif]

Ext.onReady(function () {
                 //创建一个类，类名：TextClass，具有两个属性：A、B
                 Ext.define('TextClass', {
                     A: 'a',
                     B: 'b',
                     constructor: function (o) {
                         //复制o中的所有属性到自身
                         Ext.apply(this, o);
                     }
                 });
    
                 var textClass = Ext.create("TextClass", {
                     A: 'A',
                     B: 'B',
                     C: 'C'
                 })
    
                 Ext.Msg.alert('textClass属性', textClass.A + ' ' + textClass.B + ' ' + textClass.C)  //显示 ： A B C
             });

![复制代码][copycode.gif]

Ext.onReady(function () {
                 //创建一个类，类名：TextClass，具有两个属性：A、B
                 Ext.define('TextClass', {
                     A: 'a',
                     B: 'b',
                     constructor: function (o) {
                         //复制o中的所有属性到自身,如果类中存在同名属性，就不复制
                         Ext.applyIf(this, o);
                     }
                 });
    
                 var textClass = Ext.create("TextClass", {
                     A: 'A',
                     B: 'B',
                     C: 'C'
                 })
    
                 Ext.Msg.alert('textClass属性', textClass.A + ' ' + textClass.B + ' ' + textClass.C)  //显示 a b C
             });

![复制代码][copycode.gif]

# EXT基本方法、属性（mixins、statics、config、require） #

mixins：类似于面向对象中的多继承

![复制代码][copycode.gif]

Ext.onReady(function () {
                 //创建一个类，类名：TextClass，具有两个属性：A、B
                 Ext.define('TextClass', {
                     A: 'a',
                     B: 'b'
                 });
                 //创建一个类，类名：TextClass，具有两个属性：A、B
                 Ext.define('TextClass2', {
                     C: 'c',
                     write: function () {
                         alert('A:' + this.A + ';B:' + this.B + ';C:' + this.C)   
                     }
                 })
                 Ext.define('TextClass3', {
                     //继承TextClass、TextClass2
                     mixins: {
                         TextClass: 'TextClass',
                         TextClass2: 'TextClass2'
                     }
                 })
                 var textClass = Ext.create("TextClass3")
                 textClass.write();   //显示结果：A:a;B:b;C:c
    
             });

![复制代码][copycode.gif]

statics：定义静态变量

![复制代码][copycode.gif]

Ext.onReady(function () {
                 //创建一个类，类名：TextClass，具有两个属性：A、B
                 Ext.define('TextClass', {
                     A: 'a',
                     B: 'b',
                     statics: {
                         C: 'C'
                     }
                 });
                 //没有实例化TextClass类
                 Ext.Msg.alert('TextClass类的静态属性C的值是：', TextClass.C)   //显示结果：C
             });

![复制代码][copycode.gif]

config：属性包装器，为属性提供get和set方法

![复制代码][copycode.gif]

Ext.onReady(function () {
                 //创建一个类，类名：TextClass，具有两个属性：A、B
                 Ext.define('TextClass', {
                     A: 'a',
                     B: 'b',
                     statics: {
                         C: 'C'
                     },
                     config: {
                         configProperty: 'how can i get this property'
    
                     }
                 });
                 var textClass = Ext.create('TextClass');
                 //通过set方法设置属性的值，注意，包装器会把属性的头字母大写
                 textClass.setConfigProperty("set this property's value");
                 //通过get方法展示属性值
                 Ext.Msg.alert('configProperty属性的值是：', textClass.getConfigProperty());  //显示结果：set this property's value
             });

![复制代码][copycode.gif]

require：动态加载js文件，这个页面需要用到哪些组件,然后就预先加载,多余不用加载的组件就不管他.提高运行速度.一般写在脚本开始的地方。

Ext.require([
        'Ext.tab.*',
        'Ext.window.*',
        'Ext.tip.*',
        'Ext.layout.container.Border'
    ]);

# EXT对象选择 #

Ext对象分为3种：htm控件，EXTJS元素，EXTJS组件（html控件--封装-->ExtJs元素--封装-->extjs组件）

*  　选择html控件：Ext.getDom(对象的ID)
 *    选择EXT元素：Ext.get(对象的ID)     
 *  　选择EXT组件：Ext.getCmp(对象的ID)

1、Ext.getDom和Ext.get方法

![复制代码][copycode.gif]

2、Ext.getCmp方法

![复制代码][copycode.gif]

3、通过CSS语法选择EXT组件

![复制代码][copycode.gif]

<html>
    <head>
        <title>Index</title>
        <link href="Extjs4/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
        <script src="Extjs4/ext-all.js" type="text/javascript"></script>
        <script type="text/javascript">
            Ext.onReady(function () {
                //创建一个panel
                Ext.create("Ext.panel.Panel", {
                    //标题
                    title: '第一个panel',
                    //渲染到id为“myPanel1”的<div>标签
                    renderTo: 'myPanel1',
                    //宽
                    width: 300,
                    //高
                    height: 100,
                    items: [{
                        //这个panel包含一个textfield组件
                        xtype: 'textfield',
                        name: 'name',
                        fieldLabel: 'Name'
                    }, {
                        //这个panel包含一个textfield组件
                        xtype: 'textfield',
                        name: 'age',
                        fieldLabel: 'Age'
                    }]
                })
                //创建一个panel
                Ext.create("Ext.panel.Panel", {
                    title: '第二个panel',
                    renderTo: 'myPanel2',
                    width: 300,
                    height: 150,
                    items: [{
                        //这个panel包含另一个panel
                        xtype: 'panel',
                        height: '50',
                        items: [{
                            //被包含的panel包含一个textfield组件
                            xtype: 'textfield',
                            name: 'telephone',
                            fieldLabel: 'Telephone'
                        }]
                    }, {
                        //这个panel包含一个textfield组件
                        xtype: 'textfield',
                        name: 'address',
                        fieldLabel: 'address'
                    }]
                })
    
                var one = Ext.ComponentQuery.query("panel [title=第一个panel]")[0].title;
                //Ext.Msg.alert("Title", one); //显示结果 : 第一个panel
                Ext.ComponentQuery.query("textfield")[0].value = "123";
                var two = Ext.ComponentQuery.query("textfield")[2].name;
                //第一个textfield组件并不是标题为name的那个文本框（第三个才是），
                //这是应为EXT框架会根据需要自动生成一些组件，所以在选择特定组件的时候，最好不要通过索引，而是通过特定的属性
                //Ext.Msg.alert("Title", two); //显示结果 : name
                var three = Ext.ComponentQuery.query('textfield[name=name]')[0].name;
                Ext.Msg.alert("Title", three); //显示结果 : name
                //获取标题为“第二个panel”的panel组件下面的所有textfiled组件
                Ext.ComponentQuery.query('panel[title=第二个panel] textfield')
                //获取标题为“第二个panel”的panel组件下一层的所有textfiled组件
                Ext.ComponentQuery.query('panel[title=第二个panel]>textfield')
    
            });
        </script>
    </head>
    <body>
        <div id="myPanel1">
        </div>
        <div id="myPanel2">
        </div>
    </body>
    </html>

![复制代码][copycode.gif]

4、up、down、child方法

up：根据CSS语法获取当前组件上层的控件，如果有多个符合条件，只返回第一个

down:根据CSS语法获取当前组件下层的控件，如果有多个符合条件，只返回第一个

child:根据CSS语法获取当前组件下一层的控件，如果有多个符合条件，只返回第一个

up方法：

//获取属性name为telephone的textfield组件
                var t = Ext.ComponentQuery.query("textfield[name=telephone]")[0]
                //获取组件t上面的第一个panel组件
                t.up("panel");

child方法：

//获取属性title为"第二个panel"的panel组件
                var t = Ext.ComponentQuery.query("panel[title=第二个panel]")[0]
                //获取组件t下面一层的属性name为“address”的textfield组件
                t.child("textfield[name=address]");

down方法：

//获取属性title为"第二个panel"的panel组件
                var t = Ext.ComponentQuery.query("panel[title=第二个panel]")[0]
                //获取组件t下面一层的属性name为“address”的textfield组件
                //注意，用child方法时无法取到了，因为child方法只能取组件t下面一层的控件
                t.down("textfield[name=telephone]");

[http_www.cnblogs.com_knowledgesea_p_3597786.html]: http://www.cnblogs.com/knowledgesea/p/3597786.html
[copycode.gif]: /images/20220805/51d1bc98dd474c54b82d1edcf66e9468.png
[ExtJS]: http://www.cnblogs.com/knowledgesea/p/3270744.html