首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

构建 Ext JS 扩展和插件(2)

构建 Ext JS 扩展和插件(2)

构建一个 Ext JS 扩展在这一小节,您将学习如何构建 Ext JS 扩展。首先您将学习如何创建预配置的类,通过创建将配置选项预设为默认值的子类来使您的代码易于重用,而且使您的计算机保持在一个可维护的状态。然后,您将学习如何创建一个更复杂的扩展,可以修改一个已有 Ext JS 类的功能以及添加一些新特性。
创建预配置类正如上文所述,预配置类是 Ext JS 类最基本的形式。它们简单定义了一个预配置选项值集合,允许您使用一个组件,不需要每次都传递默认值。其中一个示例是 Ext.Window 组件,在您的应用程序中很多窗口属性都是相同的,例如,宽度、高度和标题。举个这样的例子,看这个具体场景,不使用一个预配置类(见 )。
清单 1. unextended.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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<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 中有 3 个按钮,每一个将显示一个独立的 Ext.Window 组件,对于下列属性,每一个窗口值都是相同的:
  • width
  • height
  • modal
  • closeAction
  • resizable
  • maximizable
  • collapsible
  • draggable
在清单 1 中,您可以清楚的看到在配置中要为 3 个 Ext.Window 对象的每一个都设置这个 8 个属性。这样做不仅会产生多行代码,而且当您决定修改 Ext.Window 的这些默认属性值时,需要在 3 个不同的地方进行修改,不是很理想。在这一方面预配置类可以发挥作用,如  所示。
返回列表