构建 Ext JS 扩展和插件（4）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-10-13 17:13 | 只看该作者

构建 Ext JS 扩展和插件（4）

扩展一个 Ext JS 组件为组件预定义配置选项当然好，但是如何扩展组件的功能以提供其他特性呢？在这一小节，您将学习如何创建一个具有 web 浏览器窗口性质的 Ext.Window 子类。
您可以使用 <iframe> HTML 元素来在另一个 web 页面中显示 web 页面，我们正好利用这一优势来创建一个新 ExtBrowserWindow 类，该类可以在 Ext.Window 中显示这个 web 页面。目标是简化处理过程。要创建一个弹出的 Ext 浏览器窗口，您所要做的只是提供一个惟一 ID 和一个 URL 来显示。事实上，在这个示例中，您只需提供一个默认 URL 来导航，除此之外不需要提供什么。
展示了该示例的完整源代码。
清单 3. extbrowser.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<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。该属性确定将要在窗口中显示的 web 页面 URL。在示例中，默认设置为 Sencha 主页面（见）。
ExtBrowserWindow 子类也重写 onRender 事件函数，并将一个配置应用到 Ext.Window 之中，通知它应该使用 iframe 标签，iframe 标签的 src 属性应被设置为 url 配置选项、style 设置为无边框。最后，超类中相应的 onRender 事件处理程序将被调用。
实际上，ExtBrowserWindow 对象的实例化和前面的示例一样，只是这次我们需要传递我们的第一个按钮调用（将打开 Google）中的用户定义配置选项 url。在第 2 个示例中，我们只使用在类中指定的默认值，这将显示 Sencha 主页面。显示了实际运行的 ExtBrowserWindow 扩展。
图 2. 实际运行的 ExtBrowserWindow 扩展

这是 Ext JS 扩展的一个最基础的示例，但是它很容易进一步扩展来包括一些更多的特性。例如，您可以添加典型的 web 浏览器功能，比如，前进和后退按钮、一个地址栏、或者书签。

收藏分享评分

回复引用

订阅 TOP

返回列表