构建一个 Ext JS 插件在本小节，我们将学习如何构建一个 Ext JS 插件。为了简便起见，我将为您介绍如何创建同样的功能（与上一节相同），但是这次是作为一个插件创建，而不是一个扩展。在一个外部 JavaScript 源文件中创建一个插件是一种惯例，因此，先创建一个新文件 BrowserPlugin.js，其内容如 所示。
清单 4. BrowserPlugin.js1
2
3
4
5
6
7
8
9
10
11
12
13
| 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. plugin.html1
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
| <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 文件也被加载。扩展和插件使用的主要区别在单击两个按钮的事件处理程序时可以看到。当我们创建了一个扩展时，我们初始化新扩展的子类（ExtBrowserWindow）的一个对象，但是如果使用一个插件时，您使用的是您想要显示的规则 Ext JS 组件。在这个组件的配置选项中，您可以使用 “plugins” 配置选项指定您想要加载的 “browserPlugin” 插件。
这同我们在上一小节创建的扩展的结果是一样的，在 中您可以看到它的屏幕截图，如前所述。在这一小节中，我们将介绍创建 Ext JS 插件的基础。可以这样说，关于这一主题的文档和阅读材料是相当的少，因此学习更先进的技术的最好方法是下载、使用、和随意修改 Ext JS 社区中其他用户创建的插件和扩展。下一节，您将学习如何在您的应用程序中使用现有的扩展。 |
