`
liyiye
  • 浏览: 423911 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

extjs的扩展

阅读更多

有时候你打算生成一个带有若干配置项(config options)的组件(component),这些配置项你会想是让它可复的。就好像一种情况,有一部分的面板是已经固定好高、宽的,其中只有标题是不同的,我们可以把它做成预配置类(preconfigured class)。
使用构造器函数

构造器函数是完成该任务的方法之一,如下例:

// 构造器函数
var MyPanel = function(config) {
    Ext.apply(this, {
        // 在这里设定预配置的参数项
 
        width: 300,
        height: 300
    });
    MyPanel.superclass.constructor.apply(this, arguments);
};
// My Panel继承了Ext.Panel
Ext.extend(MyPanel, Ext.Panel, {});
 
var myfirstpanel = new MyPanel({
    title: 'My First Panel'
});
 
var mysecondpanel = new MyPanel({
    title: 'My Second Panel'
});


工厂模式

生成“预配置对象”的一种途径是使用工厂模式(Factong Design Pattern)。透过工厂函数返回一个全新的实例(该函数包含了预先配置好的参数项),工厂模式的方法不需要类的继承。如果纯粹为了制定固定的配置项参数来讲工厂模式是一个不错的方法,其内部原理比继承、覆盖某个类来得简单。

function createMyPanel(config) {
    return new Ext.Panel(Ext.apply({//在这里设定预配置的参数项
        width: 300,
        height: 300
    }, config));
};
 
var myfirstpanel = createMyPanel({
    title: 'My First Panel'
});
 
var mysecondpanel = createMyPanel({
    title: 'My Second Panel'
});


扩展功能

使用OO的类的其中一个原因是你打算从另外一个类的基础上扩展新的功能,假设现在有一面板类,我们在此基础上增加一个新的方法并重写(override)父类的一个方法,过程如下:

// Constructor
var MyPanel = function(config) {
    //这里复用配置项
    Ext.apply(this,
        width: 300,
        height: 300
    });
    // 调用父类的构造函数,提取父类的功能
    MyPanel.superclass.constructor.apply(this, arguments);
    // 在这里你可以为当前对象新添加功能
    // 如事件:
    this.on('click', function() {alert("You Clicked " + this.title);}, this);
};
// My Panel继承了Ext.Panel
Ext.extend(MyPanel, Ext.Panel, {
    // 在这里你可以为当前的类加入静态的变量,所有这个类生成的实例都是使用这里声明的变量
    // 如果你不确定请在构造器内设定。不要在这里放置由'new'或'xtype'操作而成的对象。在构造器内设定配置项对象会更安全。
 
    // 新添加的函数
    myNewFunction: function() {
    },
    // 重写原有函数
    onRender: function() {
        MyPanel.superclass.onRender.apply(this, arguments);
        this.myNewFunction();
    }
});
 
var myfirstpanel = new MyPanel({
    title: 'My First Panel'
});
 
var mysecondpanel = new MyPanel({
    title: 'My Second Panel'
});

另一种方法是用构造器的方式写出代码:

var MyPanel = function(config) {
    // 调用父类的构造函数,提取父类的功能
    MyPanel.superclass.constructor.call(this, Ext.apply({
        //这里复用配置项
        width: 300,
        height: 300
    }, config));
 
    // 位于构造器之后,在这里你可以为当前对象新添加功能(如处理如事件)
    this.on('click', function() {alert("你已点击" + this.title);}, this);
};


以上的方法是重写构造器的方式实现继承的,另外我们还可以重写initComponents方法写出相同的功能,但需要指出是initComponent方法是属于 Ext.Components的方法,只能在组件上使用,不是一个通用的方法。这里是一个示例:

var MyPanel = Ext.extend(Ext.Panel, {
    // 在这里你可以为当前的类加入静态的变量,所有这个类生成的实例都是使用这里声明的变量
    // 如果你不确定请在构造器内设定。不要在这里放置由'new'或'xtype'操作而成的对象。在构造器内设定配置项对象会更安全。
 
    initComponent: function() {
        //Reusable config options here
        Ext.apply(this,
            width: 300,
            height: 300
        });
       // 调用父类的构造函数,提取父类的功能
       MyPanel.superclass.initComponent.apply(this, arguments);
        // 位于构造器之后,在这里你可以为当前对象新添加功能(如处理如事件)
        this.on(
            'click',
            function() {
                alert("你已点击" + this.title);
            },
            this
        );
    },
    // 新添加的函数
    myNewFunction: function() {
    },
    // 重写原有函数
    onRender: function() {
        MyPanel.superclass.onRender.apply(this, arguments);
        this.myNewFunction();
    }
});



你首先可能会观察到的是这儿没有构造函数。Ext会为你创建构造函数。这个构造函数有点不同,叫initComponent。

这在高级教程和例子常见的使用方法。只要简单记住它做的事情与构造函数是差不多的。

推荐在调用父类的构造器或initComponent方法之后,为当前对象新添加事件。

MyPanel.superclass.constructor.apply(this, arguments);
    // 位于构造器之后,在这里你可以为当前对象新添加功能(如处理如事件)
    this.on(
        'click',
        function() {
            alert("你已点击" + this.title);
        },
        this
    );


工厂模式的案例中你可以在工厂方法以外的地方登记事件的处理函数。

myFirstPanel.on(
        'click',
        function() {
            alert("你已点击" + this.title);
        },
        myFirstPanel //作用域
    );


另外,除了添加listeners配置项还有其他处理监听器的方法,不过我推荐高级用户使用。

完成同一件事在Ext中有不同的方式。挑选一种你较倾向的方法。

分享到:
评论

相关推荐

    EXTJS扩展例子集

    这个"EXTJS扩展例子集"显然是一个包含EXTJS3.0相关扩展组件的资源包,旨在帮助开发者理解和学习如何使用这些扩展。 在EXTJS中,扩展(Extensions)通常是指对框架原有功能的增强或定制,它们可以是新的组件、小部件...

    ExtJs:收集基于ExtJs扩展的一些控件

    本压缩包文件中收集了基于ExtJs扩展的一些控件,这些控件能够进一步增强应用程序的功能和用户体验。 首先,我们来看看“ExtJs:收集基于ExtJs扩展的一些控件”。这个文件可能是对一些自定义或第三方开发的ExtJs控件...

    extjs扩展教程 网页版

    extjs扩展教程 extjs扩展教程extjs扩展教程

    ExtJS扩展包(ExtJsExtenderControl)

    ExtJS扩展包(ExtJsExtenderControl)是针对ExtJS框架的一个增强工具,它扩展了ExtJS的功能,特别是在与.NET框架结合使用时,为开发者提供了更丰富的控件和功能。ExtJS是一个流行的JavaScript库,用于构建富客户端...

    extjs扩展年度控件,EXTJS里的时间控件的年度重写

    总结来说,EXTJS扩展年度控件是一项涉及到组件继承、模板修改、事件处理和UI设计的任务。通过这样的定制,我们可以为用户提供更符合业务需求的时间选择体验,同时也展示了EXTJS强大的可扩展性和灵活性。在实践中,...

    dreamweaver Extjs 扩展插件语法提示

    dreamweaver Extjs 扩展插件语法提示 在dreamweaver中可以显示Extjs语法提示,提升开发效率,用起来很方便 分.zxp和.mxp两种扩展 cc2015,cs6均可用。 扩展安装需要到用Adobe Extension Manager,请自行在网上百度,...

    Extjs扩展DateTimeField时间初始化及点击日期显示Bug

    本文将深入探讨“Extjs扩展DateTimeField时间初始化及点击日期显示Bug”这一主题,帮助开发者解决实际开发中遇到的难题。 DateTimeField是EXTJS中用于处理日期和时间选择的组件,它允许用户同时选择日期和时间,...

    extjs扩展标记

    EXTTLD(EXTJS Tag Library Descriptors)则是EXTJS扩展标记的元数据,它定义了这些自定义标签的行为和属性。 以下是对EXTJS扩展标记中涉及的一些主要知识点的详细解释: 1. **EXTJS组件**:EXTJS的核心是它的组件...

    ExtJS扩展:垂直页签tabPanel

    在“ExtJS扩展:垂直页签tabPanel”这个主题中,我们将探讨如何在ExtJS中实现一个创新的垂直布局的页签(tab)组件,这在很多情况下可以提供更好的用户界面体验。 首先,我们看到有两个JavaScript文件,TabPanel.js...

    extjs扩展包

    本文是extjs的扩展包,可以在页面中插入图片,把这个js文件放入相应的目录下,extjs就是引用这个类型,就可以插入图片

    ExtJS扩展:lovcombo(已解决Bug版)

    在这个"ExtJS扩展:lovcombo(已解决Bug版)"中,开发者已经修复了原有版本可能存在的问题,使得该组件在实际应用中更加稳定可靠。文件名中的“-已解决Bug版-带操作详解”意味着包含了详细的使用指南,帮助用户理解...

    extjs扩展的月份控件

    同事写的extjs月份扩展控件,可以直接调用,用于只要求显示月份不显示日期的项目

    ExtJs DWR扩展 DWRProxy、DWRTreeLoader、DWRGridProxy

    在标题和描述中提到的“ExtJs DWR扩展”是指将这两者结合使用,以增强数据交换和UI更新的能力。 1. **DWRProxy**: DWRProxy是ExtJs中的一个类,它作为DWR和ExtJs之间的桥梁,使得ExtJs可以利用DWR的远程调用功能。...

    Extjs树分页组件扩展

    "Extjs树分页组件扩展"就是为了解决这一问题而设计的,它通过扩展TreeLoader和PagingToolbar,实现了在树形组件中进行分页加载的效果。 **TreeLoader的扩展** TreeLoader是ExtJS中负责异步加载树节点的类。在原生...

    extjs扩展工具条带选择页数的配置

    扩展ext的分页工具条 带选择页数的配置 采用Ext4.2

    ExtJs扩展之GroupPropertyGrid代码

    在介绍ExtJs扩展之GroupPropertyGrid代码之前,有必要先了解一下ExtJs本身。ExtJs是一个基于JavaScript的前端框架,它提供了一整套丰富的组件库,以便开发者能够创建富互联网应用(RIA)。ExtJs以丰富的组件和数据处理...

    几个不错的EXTJS拓展组件

    在这个"几个不错的EXTJS拓展组件"的压缩包中,你将找到34个经过精心设计和实现的EXTJS扩展组件实例,这些组件可以极大地丰富你的EXTJS应用,并提升用户体验。 首先,EXTJS的扩展组件是对其原生组件功能的增强或特定...

    使用OOP的方式扩展ExtJS UI组建 - 更新版

    更新版的ExtJS扩展可能会涉及到以下几个方面: - **利用ExtJS的最新特性**:随着版本的更新,ExtJS引入了许多新特性,如MVVM模式、DataView动画、TreeGrid等。我们可以利用这些特性来改进原有的组件扩展,提高用户...

    ExtJS 组件扩展

    ### ExtJS 组件扩展知识点详解 #### 一、ExtJS组件扩展概述 ExtJS是一款基于JavaScript的开源前端框架,主要用于构建复杂的企业级Web应用程序。它提供了丰富的UI组件库,可以帮助开发者快速构建美观且功能强大的...

Global site tag (gtag.js) - Google Analytics