`

ExtJS之面向对象编程基本知识

编程EXTprototype 
阅读更多
1：支持命名空间      <script type="text/javascript">
        // 定义一个命名空间
        Ext.namespace("Ext.wentao");
        // 在命名空间上定义一个类
        Ext.wentao.helloworld = Ext.emptyFn;
        // 创建一个类的实例
        new Ext.wentao.helloworld();  
    </script>
其中

    Ext.wentao.helloworld = Ext.emptyFn;
等价于 

    Ext.wentao.helloworld = function(){};



2：支持类实例属性

    <script type="text/javascript">
        Ext.namespace("Ext.wentao"); // 自定义一个命名空间
        Ext.wentao.Person = Ext.emptyFn; // 在命名空间上自定义一个类
        // 为自定义的类 增加一个 name 属性，并赋值
        Ext.apply(Ext.wentao.Person.prototype, {
            name : "刘文涛"
        });

        var _person = new Ext.wentao.Person();// 实例化 自定义类
        alert(_person.name);
        _person.name = "张三";// 修改类name属性
        alert(_person.name);

    </script>



3：支持类实例方法 

    <script type="text/javascript">
        Ext.namespace("Ext.wentao"); // 自定义一个命名空间
        Ext.wentao.Person = Ext.emptyFn; // 在命名空间上自定义一个类
        // 演示类实例方法
        Ext.apply(Ext.wentao.Person.prototype, {
            name : "刘文涛",
            sex : "男",
            print : function() {
                alert(String.format("姓名:{0},性别:{1}", this.name, this.sex));
            }
        });

        var _person = new Ext.wentao.Person();// 实例化 自定义类
        _person.print();


    </script>



4：支持类静态方法 

<script type="text/javascript">

        Ext.namespace("Ext.wentao"); // 自定义一个命名空间
        Ext.wentao.Person = Ext.emptyFn; // 在命名空间上自定义一个类

        // 演示类实例方法
        Ext.apply(Ext.wentao.Person.prototype, {
            name : "刘文涛",
            sex : "男",
            print : function() {
                alert(String.format("姓名:{0},性别:{1}", this.name, this.sex));
            }
        });

        // 演示 类静态方法
        Ext.wentao.Person.print = function(_name, _sex) {
            var _person = new Ext.wentao.Person();
            _person.name = _name;
            _person.sex = _sex;
            _person.print(); // 此处调用类 实例方法，上面print是类 静态方法
        };

        Ext.wentao.Person.print("张三", "女"); // 调用类 静态方法

    </script>



5：支持构造方法 

<script type="text/javascript">
        Ext.namespace("Ext.wentao"); //自定义一个命名空间

    //构造方法
        Ext.wentao.Person = function(_cfg){
            Ext.apply(this,_cfg);
        };

    //演示类实例方法
        Ext.apply(Ext.wentao.Person.prototype, {
            print:function(){
                alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
            }
        });
   
    //演示 类静态方法
        Ext.wentao.Person.print = function(_name,_sex){
            var _person = new Ext.wentao.Person({name:_name,sex:_sex});
            _person.print(); //此处调用类 实例方法，上面print是类 静态方法
        };

    Ext.wentao.Person.print("张三","女"); //调用类 静态方法
    </script>



6：支持类继承 

<script type="text/javascript">

        Ext.namespace("Ext.wentao"); // 自定义一个命名空间

// *******************父类*********************
        // 构造方法
        Ext.wentao.Person = function(_cfg) {
            Ext.apply(this, _cfg);
        };

        // 演示类实例方法
        Ext.apply(Ext.wentao.Person.prototype, {
            job : "无",
            print : function() {
                alert(String.format("姓名:{0},性别:{1},角色:{2}", this.name,
                    this.sex, this.job));
            }
        });   

// *******************子类1*********************
        Ext.wentao.Student = function(_cfg) {
            Ext.apply(this, _cfg);
        };

        Ext.extend(Ext.wentao.Student, Ext.wentao.Person, {
            job : "学生"
        });

        var _student = new Ext.wentao.Student({
            name : "张三",
            sex : "女"
        });
        _student.print(); // 调用 父类方法

</script>



7：支持类实例方法重写 

    <script type="text/javascript">    
        Ext.namespace("Ext.wentao"); // 自定义一个命名空间

// *******************父类*********************
        // 构造方法
        Ext.wentao.Person = function(_cfg) {
            Ext.apply(this, _cfg);
        };

        // 演示类实例方法
        Ext.apply(Ext.wentao.Person.prototype, {
            job : "无",
            print : function() {
                alert(String.format("姓名:{0},性别:{1},角色:{2}", this.name,
                    this.sex, this.job));
                }
        });

// *******************子类1*********************
        Ext.wentao.Student = function(_cfg) {
            Ext.apply(this, _cfg);
        };

        // 重写父类的 实例 方法
        Ext.extend(Ext.wentao.Student, Ext.wentao.Person, {
            job : "学生",
            print : function() {
                alert(String.format("{0}是一位{1}{2}", this.name, this.sex,
                    this.job));
            }
        });

        var _student = new Ext.wentao.Student({
            name : "张三",
            sex : "女"
        });
        _student.print(); // 调用 父类方法

    </script>


8：支持命名空间别名 

    <script type="text/javascript">

        Ext.namespace("Ext.wentao"); // 自定义一个命名空间

        Wt = Ext.wentao; // 命名空间的别名

// *******************父类*********************
        // 构造方法
        Wt.Person = function(_cfg) {
            Ext.apply(this, _cfg);
        };

        // 演示类实例方法
        Ext.apply(Wt.Person.prototype, {
            job : "无",
            print : function() {
                alert(String.format("姓名:{0},性别:{1},角色:{2}", this.name,
                     this.sex, this.job));
            }
        });

// *******************子类1*********************
        Wt.Student = function(_cfg) {
            Ext.apply(this, _cfg);
        };

        // 重写父类的 实例 方法
        Ext.extend(Wt.Student, Ext.wentao.Person, {
            job : "学生",
            print : function() {
            alert(String.format("{0}是一位{1}{2}", this.name, this.sex,
                     this.job));
            }
        });

        var _student = new Wt.Student({
            name : "张q三",
            sex : "女"
        });
        _student.print(); // 调用 父类方法


    </script>


9：支持类别名

<script type="text/javascript">

        Ext.namespace("Ext.wentao"); // 自定义一个命名空间

        Wt = Ext.wentao; // 命名空间的别名

// *******************父类*********************
        // 构造方法
        Wt.Person = function(_cfg) {
             Ext.apply(this, _cfg);
        };

        PN = Wt.Person; // 类别名

        // 演示类实例方法
        Ext.apply(PN.prototype, {
            job : "无",
            print : function() {
            alert(String.format("姓名:{0},性别:{1},角色:{2}", this.name,
                    this.sex, this.job));
            }
        });

// *******************子类1*********************
        Wt.Student = function(_cfg) {
            Ext.apply(this, _cfg);
        };

        ST = Wt.Student;

        // 重写父类的 实例 方法
        Ext.extend(ST, PN, {
            job : "学生",
            print : function() {
                alert(String.format("{0}是一位{1}{2}", this.name, this.sex,
                     this.job));
            }
        });

        var _student = new ST({
            name : "张q三",
            sex : "女"
        });
        _student.print(); // 调用 父类方法

    </script>
分享到：
| JSP自定义标签库
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ext面向对象和继承

    在JavaScript的世界里，面向对象（Object-Oriented Programming, OOP）是一种常用的设计模式，它允许我们通过类和对象来组织代码，实现代码的复用和模块化。本篇文章将探讨EXTJS框架中的面向对象机制，特别是继承的...

    传智播客EXTJS视频下载地址

    这部分资料重点讲解了JavaScript的基本语法、面向对象编程、DOM操作等内容。 - **资源推荐**：《JavaScript基础回顧》（PPT格式），包含了JavaScript语言的核心特性、函数、数组等基础知识点。 ### ExtJS核心概念 ...

    php+ExtJS 开发实战

    面向对象编程（OOP）是ExtJS框架的核心设计理念之一。通过采用面向对象的方法，开发者可以更好地组织代码结构，提高代码的复用性和维护性。 - **类与继承**: 在ExtJS中，可以通过定义类来创建组件，并通过继承机制...

    extJS 一些简单实例

    在源码方面，ExtJS 使用面向对象的编程方式，基于类的体系结构使得代码组织清晰且易于维护。例如，你可以定义一个自定义组件，继承自`Ext.Component`，并重写或扩展其方法和配置项来满足特定需求。 工具集是ExtJS的...

    ExtJS-3.0.0.rar

    通过`javascript基础.ppt`和`javascript加强.ppt`，你可以进一步巩固JavaScript知识，而`javascript面向对象编程.ppt`将深入探讨JavaScript的OOP特性。结合这些资料，你将能够全面掌握使用ExtJS 3.0.0进行Web开发所...

    js语法之extjs

    #### 二、类的封装与面向对象编程 尽管JavaScript本身是一种面向对象的语言，但在类的定义和支持方面不如其他语言如Java或C#。因此，Extjs提供了对类的封装以增强面向对象特性。 ##### 2.1 类的定义 类的定义通过...

    EXTJS视频教程说明

    与Java不同，Java是一种通用的面向对象的编程语言，通常用于后端开发，如JSP（Java Server Pages）和J2EE（Java 2 Enterprise Edition）。JSP是用于动态生成网页内容的技术，而J2EE则是一个用于构建大型企业级应用的...

    javascript面向对象的编程.docx

    JavaScript 面向对象编程是该语言的核心特性之一，它允许开发者通过对象和它们的属性、方法来组织代码，提高代码的复用性和可维护性。面向对象编程（Object-Oriented Programming，简称 OOP）的基本概念包括封装、...

    轻松搞定Extjs

    - **ExtjsOOP**: 讲解了Extjs中如何利用面向对象编程实现组件的封装和重用。 - **配置(config)选项**: 详细解释了Extjs中配置选项的作用及使用方式。 - **Ext.apply()和Ext.applyIf()**: 这两个方法用于合并对象属性...

    ExtJS中文手册.pdf

    - **继承机制**：ExtJS支持面向对象编程中的继承特性，可以扩展现有的组件类。 - **继承示例**：文档中给出了一些具体的继承示例，帮助理解继承的用法。 #### 22. 补充资料 - **Ext2概述**：介绍了ExtJS 2版本的...

    extJS4 MVC demo项目入门

    在学习extJS4 MVC时，开发者还应掌握JavaScript面向对象编程的思想，以及如何高效利用extJS提供的各种组件和插件来构建用户界面。最后，通过项目实践不断优化和重构代码，提高应用的性能和用户体验。

    Java + ExtJs示例

    Java是一种多平台的、面向对象的编程语言，常用于后端服务器开发，提供强大的数据处理和业务逻辑支持。而ExtJS是一个JavaScript库，专用于构建富客户端应用，它提供了丰富的用户界面组件和强大的数据绑定机制。 ...

    extjs简单例子

    这涉及到面向对象编程的概念，如继承、覆写方法和属性，以及如何利用ExtJS的类系统来实现模块化和代码复用。 3. **《TutorialTabPanel Basics (Chinese)》** TabPanel是ExtJS中的一个常见组件，用于展示多个视图在...

Magicbox
Global site tag (gtag.js) - Google Analytics