idea ext.js插件_构建Ext JS扩展和插件

最新推荐文章于 2024-05-15 16:57:03 发布

cuyi7076

最新推荐文章于 2024-05-15 16:57:03 发布

阅读量1.2k

点赞数

文章标签： vue python css js javascript ViewUI

原文链接：https://www.ibm.com/developerworks/web/library/wa-extjs/index.html

版权

idea ext.js插件

Ext JS是一个全面JavaScript框架，其中包含大量功能，包括用于DOM遍历和操纵以及数据对象存储的跨浏览器兼容JavaScript帮助器实用程序。它还处理Ajax和直接Web远程处理，具有令人印象深刻的UI控件和小部件，图表和图形集合，强大的数据网格控件等等。

当使用Ext JS或实际上任何JavaScript库或框架开发应用程序时，可以确定需要使用现成的或不存在但功能无法正常使用的功能你想要它。幸运的是，Ext JS包含一个强大的类和组件生态系统，可以轻松扩展现有功能或完全构建新组件。在本文中，我们将探讨这种可扩展性，特别是研究扩展和插件的概念。您将了解这些概念的含义以及两者之间的区别。然后，您将看到如何构建自己的扩展程序和插件，以及如何获取其他开发人员构建的现有插件以在自己的应用程序中使用，从而避免了重新设计轮子的麻烦。

什么是扩展名？

Ext JS的扩展是派生类或子类，旨在允许将附加功能包含到现有Ext JS类中。扩展可以作为“预配置类”的基础，后者基本上为现有的类配置提供了一组默认值，如果在使用特定组件时经常需要提供这些参数，则很有用。例如，您的应用程序可以使用Ext.Window类使用一系列弹出窗口，但是这些窗口将始终具有相同的宽度和高度值。不必每次使用Ext.Window都指定此宽度和高度，而是可以使用预先配置的大小设置属性来创建Ext.Window的扩展。这不仅使您免于一遍又一遍地重复相同的代码，而且还使您的应用程序易于维护。而且，如果您需要更改应用程序弹出窗口的默认大小，则只需在代码中的一个位置而不是几个不同的位置进行更改。

预先配置的类是扩展的最基本类型。子类除了为类中的现有属性提供值外，还可以添加父类（即，被子类化或派生自该类的类）中未包含的新属性和方法。

如果您熟悉面向对象编程的基础知识，您将知道在实例化对象时，将自动调用类构造函数。该函数通常执行一些初始化例程，例如设置类属性的默认值。默认情况下，当您创建子类时，其构造函数仅调用其父类的构造函数。但是，通过为子类创建构造函数，您可以覆盖父类的构造函数，执行特定于子类的功能（例如，设置由子类添加的默认值属性）。 Ext JS使执行此操作非常简单，并确保您可以从子类构造函数轻松地调用父类或父类的构造函数，从而不必将代码从父类构造函数添加到子类中构造函数。

父类中的重写方法不限于构造方法。您还可以覆盖子类中的常规函数，并从子类中调用被覆盖的父函数。

什么是插件？

插件是用于向现有组件提供附加功能的类。插件不是直接实例化插件类的对象，而是使用该组件的“插件”配置选项将其附加到该组件。使用插件的主要优点之一是，该插件不仅可以被它所连接的组件使用，而且还可以被该组件派生的所有子类使用。

在Ext JS中使用插件的一个不错的功能是可以将多个插件连接到单个组件，并根据需要提供其他功能。这意味着可以分解其他功能，并仅在需要时使用，以提高应用程序的性能。当然，插件的编写方式应不与其他插件冲突，否则它们将无法在组件中同时使用。

扩展和插件之间的区别

首先，很难理解Ext JS中扩展和插件之间的区别，尤其是考虑到它们在功能上的相似之处。最终，两者都为Ext JS类提供了扩展功能。主要区别在于编写方式。

Ext JS扩展被编写为现有类的子类。它们可以提供其他属性或函数，甚至可以通过重写构造函数和其他函数来修改父类的行为。要使用扩展，可以直接创建扩展子类的对象，然后可以在其派生的父类中使用，添加或覆盖功能。当您需要更改现有Ext JS组件或功能的核心功能时，或者当您想要完全构建一个全新的组件时，最好使用扩展。

Ext JS插件被编写为始终具有init函数的类。与扩展不同，您不会直接创建插件类的对象，而是会使用其附加到的组件注册插件。然后，插件中定义的选项和功能将对组件本身可用。当您需要向组件添加功能时，最好使用插件。由于扩展与它们派生的类紧密耦合，因此，当您希望附加组件易于拆卸并与多个组件和派生组件互操作时，插件还提供了一种可行的选择。由于插件必须附加到现有组件上，因此它们通常不适合从头开始构建新组件。

构建一个Ext JS扩展

在本节中，您将学习如何构建Ext JS扩展。您将首先学习如何创建预配置的类，通过创建将配置选项预设为默认值的子类，可以轻松地重用代码并使应用程序保持可维护状态。然后，您将学习如何创建更复杂的扩展，该扩展将更改现有Ext JS类的功能并添加一些新功能。

创建预配置的类

如前所述，预配置的类是Ext JS扩展的最基本形式。它们仅定义了一组预设配置选项值，使您可以使用组件而不必每次都传递默认值。例如Ext.Window组件，在您的应用程序中，窗口的许多属性总是相同的，例如width，height和title。有关此示例，请在不使用预配置类的情况下查看此特定场景（请参见清单1 ）。

清单1. unextended.html

<html>
    <head>
        <title>Popup Window - Unextended Version</title>
        <link rel="stylesheet" type="text/css" href="ext/resources/
css/ext-all.css" />
        <script type="text/javascript" src="ext/adapter/ext/
ext-base.js"></script>
        <script type="text/javascript" src="ext/ext-all.js"></script>
        <script type="text/javascript">
        Ext.onReady(function() {
            var win1 = new Ext.Window({
                width: 500,
                height: 300,
                modal: true,
                closeAction: 'hide',
                resizable: false,
                maximizable: true,
                collapsible: true,
                draggable: false,
                title: 'Window 1',
                html: '<h2>Window 1</h2>'
            });

            var win2 = new Ext.Window({
                width: 500,
                height: 300,
                modal: true,
                closeAction: 'hide',
                resizable: false,
                maximizable: true,
                collapsible: true,
                draggable: false,
                title: 'Window 2',
                html: '<h2>Window 2</h2>'
            });

            var win3 = new Ext.Window({
                width: 500,
                height: 300,
                modal: true,
                closeAction: 'hide',
                resizable: false,
                maximizable: true,
                collapsible: true,
                draggable: false,
                title: 'Window 3',
                html: '<h2>Window 3</h2>'
            });

            var button1 = Ext.get('button1');
            var button2 = Ext.get('button2');
            var button3 = Ext.get('button3');

            button1.on('click', function() {
                win1.show(this);
            });

            button2.on('click', function() {
                win2.show(this);
            });

            button3.on('click', function() {
                win3.show(this);
            });
        });
        </script>
    </head>

    <body>
        <button id="button1">Show Window 1</button>
        <br />
        <button id="button2">Show Window 2</button>
        <br />
        <button id="button3">Show Window 3</button>
    </body>
</html>

在上面的清单1中，有三个按钮，每个按钮将显示一个单独的Ext.Window组件。对于以下属性，这些窗口中的每个窗口均具有相同的值：

width
height
modal
closeAction
resizable
maximizable
collapsible
draggable

如清单1所示，这八个属性中的每一个都在配置中为三个Ext.Window对象的每一个设置。这不仅会导致额外的代码行，而且还意味着，如果您决定更改Ext.Window的默认属性值，则需要在三个不同的位置进行此更改，这并不理想。这是预配置的类发挥作用的地方，如清单2所示。

清单2. extended.html

<html>
    <head>
        <title>Popup Window - Extended Version</title>
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext/ext-all.js"></script>
        <script type="text/javascript">
        MyWindow = Ext.extend(Ext.Window, {
            width: 500,
            height: 300,
            modal: true,
            closeAction: 'hide',
            resizable: false,
            maximizable: true,
            collapsible: true,
            draggable: false
        });

        Ext.onReady(function() {
            var win1 = new MyWindow({
                title: 'Window 1',
                html: '<h2>Window 1</h2>'
            });

            var win2 = new MyWindow({
                title: 'Window 2',
                html: '<h2>Window 2</h2>'
            });

            var win3 = new MyWindow({
                title: 'Window 3',
                html: '<h2>Window 3</h2>'
            });

            var button1 = Ext.get('button1');
            var button2 = Ext.get('button2');
            var button3 = Ext.get('button3');

            button1.on('click', function() {
                win1.show(this);
            });

            button2.on('click', function() {
                win2.show(this);
            });

            button3.on('click', function() {
                win3.show(this);
            });
        });
        </script>
    </head>

    <body>
        <button id="button1">Show Window 1</button>
        <br />
        <button id="button2">Show Window 2</button>
        <br />
        <button id="button3">Show Window 3</button>
    </body>
</html>

此清单中的许多代码与清单1相同。但是，您会在Ext.onReady调用上方注意到我创建了一个新的子类MyWindow 。这是使用Ext.extend函数创建的，它为我的Ext.Window对象的所有三个对象共有的八个属性指定了默认配置值。如您所见，然后您可以创建此新子类的对象，并指定在每个窗口之间变化的两个属性（ title和html ）。对于两个代码清单，最终的应用程序看起来都相同（请参见图1 ），但是我相信您会同意清单2是更易于维护的方法。

图1.运行中的预配置类示例

Mozilla Firefox中MessageBox的屏幕快照，显示Window 1

扩展Ext JS组件

预定义组件的配置选项固然很好，但是如何扩展组件的功能以提供其他功能呢？在本节中，您将学习如何创建行为类似于Web浏览器窗口的Ext.Window的子类。

您可以使用<iframe> HTML元素在另一个网页中显示网页，因此我们将利用它来创建一个新的ExtBrowserWindow类，该类将在Ext.Window显示该网页。目的是简化过程。要创建一个弹出的Ext浏览器窗口，您需要做的就是提供一个唯一的ID和要显示的URL。实际上，在此示例中，如果没有提供默认URL，则您甚至会提供要导航的默认URL。

清单3显示了该示例的完整源代码。

清单3. extbrowser.html

<html>
    <head>
        <title>Ext Browser Window Extension</title>
        <link rel="stylesheet" type="text/css" 
href="ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="ext/adapter/ext
/ext-base.js"></script>
        <script type="text/javascript" src="ext/ext-all.js"></script>
        <script type="text/javascript">
        ExtBrowserWindow = Ext.extend(Ext.Window, {
            closeAction: 'hide',
            width: 500,
            height: 300,
            title: 'Sencha',
            url: 'http://www.sencha.com',
            onRender: function() {
                this.bodyCfg = {
                    tag: 'iframe',
                    src: this.url,
                    cls: this.bodyCls,
                    style: { border: '0px none' }
                };
                ExtBrowserWindow.superclass.onRender.apply(this, arguments);
            }
        });

        Ext.onReady(function() {
            var win1, win2;

            var button1 = Ext.get('button1');
            var button2 = Ext.get('button2');

            button1.on('click', function() {
                if(!win1) {
                    win1 = new ExtBrowserWindow({
                        id: '1',
                        title: 'Google',
                        url: 'http://www.google.com'
                    });
                }
                win1.show(this);
            });

            button2.on('click', function() {
                if(!win2) {
                    win2 = new ExtBrowserWindow({
                        id: '2',
                    });
                }
                win2.show(this);
            });
        });
        </script>
    </head>

    <body>
        <button id="button1">Show Google</button>
        <br />
        <button id="button2">Show Sencha</button>
    </body>
</html>

与预配置的类示例类似，您将创建Ext.Window类的子类并提供一些默认的配置选项，例如宽度，高度和标题。但是，在这种情况下，您还要设置一个特定于此新类url的新选项。此属性将确定要在窗口中显示的网页URL。在这个例子中，它被设置为默认为煎茶主页（请参阅相关主题）。

ExtBrowserWindow子类还重写onRender事件函数，并将配置应用于Ext.Window的主体，告诉它应使用iframe标记，并将src属性设置为url配置选项，并将样式设置为无边框。最后，将调用超类中相应的onRender事件处理程序。

ExtBrowserWindow对象的实际实例与前面的示例几乎相同，除了这次我们在第一个按钮调用中传递了用户定义的配置选项url （这将打开Google）。在第二个示例中，我们仅使用在类中指定的默认值，它将显示Sencha主页。图2显示了ExtBrowserWindow中的ExtBrowserWindow扩展。

图2.运行中的ExtBrowserWindow扩展

Mozilla Firefox中的Ext Browser Window扩展的屏幕快照，在新窗口中显示Sencha主页

这是Ext JS扩展的一个非常基本的示例，但是可以很容易地将其扩展为包含更多功能。例如，您可以添加典型的Web浏览器功能，例如后退和前进按钮，地址栏甚至书签。

构建一个Ext JS插件

在本节中，您将学习如何构建Ext JS插件。为了简单起见，我将向您展示如何创建与上一节相同的功能，但是这次将其创建为插件而不是扩展。按照惯例，在外部JavaScript源文件中创建插件，因此首先创建一个名为BrowserPlugin.js的新文件，其内容如清单4所示。

清单4. BrowserPlugin.js

BrowserPlugin = Ext.extend(Object, {    
    init: function(component) {        
        component.width = 500;
        component.height = 300;
        component.bodyCfg = {
            tag: 'iframe',
            src: component.url,
            cls: component.bodyCls,
            style: { border: '0px none' }
        };
    }
});
Ext.preg('browserPlugin', BrowserPlugin);

该插件非常简单：它包含Ext JS插件的基本要求。 init函数相应地设置组件的宽度和高度，并告诉组件它应呈现为<iframe>元素，并且src属性来自URL配置选项，如扩展示例中所示。最后，将BrowserPlugin类注册为插件，以允许其延迟加载。基本上，这意味着您不需要手动实例化该对象。 Ext JS会为您处理。

接下来，创建plugin.html，该文件将使用您刚创建的插件。清单5中列出了其内容。

清单5. plugin.html

<html>
    <head>
        <title>Ext Browser Window Extension</title>
        <link rel="stylesheet" type="text/css" href="ext/resources/css
/ext-all.css" />
        <script type="text/javascript" src="ext/adapter/ext
/ext-base.js"></script>
        <script type="text/javascript" src="ext/ext-all.js"></script>
        <script type="text/javascript" src="BrowserPlugin.js"></script>
        <script type="text/javascript">
        Ext.onReady(function() {
            var win1, win2;

            var button1 = Ext.get('button1');
            var button2 = Ext.get('button2');

            button1.on('click', function() {
                if(!win1) {
                    win1 = new Ext.Window({
                        title: 'Google',
                        closeAction: 'hide',
                        plugins: ['browserPlugin'],
                        url: 'http://www.google.ie'
                    });
                }
                win1.show(this);
            });

            button2.on('click', function() {
                if(!win2) {
                    win2 = new Ext.Window({
                        title: 'Sencha',
                        closeAction: 'hide',
                        plugins: ['browserPlugin'],
                        url: 'http://www.sencha.com'
                    });
                }
                win2.show(this);
            });
        });
        </script>
    </head>

    <body>
        <button id="button1">Show Google</button>
        <br />
        <button id="button2">Show Sencha</button>
    </body>
</html>

同样，此代码相当熟悉。您会注意到，在ext-all.js加载之下，新的BrowserPlugin.js文件正在加载。可以在两个按钮的click事件处理程序中看到扩展和插件使用之间的主要区别。创建扩展时，我们实例化了新扩展的子类（ ExtBrowserWindow ）的对象，但是当使用插件时，可以使用希望显示的常规Ext JS组件。在这种情况下，它就是Ext.Window组件。然后，在组件的配置选项中，指定要使用“插件”配置选项加载“ browserPlugin”插件。

其结果与我们在上一节中创建的扩展的结果相同，并且您可以在图2中看到它的屏幕截图，如本文前面所述。在本节中，我们介绍了创建Ext JS插件的基础知识。至少可以说，有关该主题的文档和阅读材料非常稀少，因此，学习更多高级技术的最佳方法是下载，使用和修补由Ext JS社区中其他用户创建的插件和扩展。在下一部分中，您将学习如何在自己的应用程序中使用现有扩展。

使用现有的Ext JS插件

您可以通过两种方式找到现有的Ext JS扩展和插件。第一个（也是最完整的）来源是煎茶网站（见的Ext用户扩展和插件论坛相关主题）。还提供了非官方的用户扩展存储库（请参阅参考资料）。大多数插件和扩展程序只是一个JavaScript源文件，您可以下载或复制它们并在自己的应用程序中使用。这些插件和扩展中的大多数都可以在宽松的许可证下免费使用，但是在商业项目中使用之前，请务必检查相关扩展的许可证。

包括扩展程序或插件时，请确保在包含Ext JS本身的源JavaScript和CSS文件之后执行此操作。扩展和插件通常会覆盖默认的Ext JS组件功能，并要求在加载它们之前先加载它们。

Ext JS项目示例包括一系列自定义扩展的演示。在这些演示中，查看页面HTML源代码以查找扩展名或插件JavaScript源文件的URL（如果您使用的是JavaScript，则可以单击链接直接打开源文件）。复制此代码并将其粘贴到文件中以在您自己的项目中使用。每个演示都有指向实际将插件实现JavaScript代码的链接，因此请单击该链接以查看示例的工作方式。

请参阅相关信息的链接，Ext JS的样本构建在用户扩展。

如您所见，大量的官方Ext JS示例和演示都基于用户提供的扩展。用户社区在Ext JS框架的增强中起着关键作用，并且一些用户扩展已逐渐成为框架本身的标准组件。

花一些时间浏览上面的演示并查看扩展源代码，以了解Ext JS扩展或插件的复杂程度。 Ext JS中的用户扩展通常位于命名空间Ext.ux中，因此在尝试查找扩展的源代码时请注意这一点。

结论

在本文中，您学习了Ext JS扩展和插件开发的基础。您发现了这两个概念的含义，它们之间的区别以及如何实际创建它们。您创建了一个预配置的类，该类节省了时间和宝贵的代码行，这些代码行可以导致更高效的应用程序，更易于维护。然后，您学习了如何创建Ext JS扩展-一种将Ext.Window组件子类化的浏览器窗口。您学习了如何在超类中定义新属性和调用相应的函数，以及如何在应用程序代码中使用新类。然后，您以Ext JS插件的形式学习了如何做同样的事情。您学习了如何创建插件，定义强制性的init函数，以及如何注册该插件以使其可用于Ext JS组件。有了本文中学到的基础知识，您现在应该准备开始学习Ext JS扩展和插件开发中的更复杂的概念。

翻译自: https://www.ibm.com/developerworks/web/library/wa-extjs/index.html