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

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

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

在清单 1 中,您可以清楚的看到在配置中要为 3 个 Ext.Window 对象的每一个都设置这个 8 个属性。这样做不仅会产生多行代码,而且当您决定修改 Ext.Window 的这些默认属性值时,需要在 3 个不同的地方进行修改,不是很理想。在这一方面预配置类可以发挥作用,如  所示。
清单 2. extended.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>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>




清单中的很多代码和  中的完全一样。然而,您会注意到 Ext.onReady 调用,我创建了一个新子类 MyWindow。这是使用 Ext.extend 函数创建的,指定在 3 个 Ext.Window 对象中普遍存在的 8 个属性的默认值。正如您所看到的,您可以创建这个新子类的对象,指定两个在每个窗口中各不相同的属性(title 和 html)。两个清单中的代码生成的应用程序看上去完全一样(见 ),但是  是一个更容易维护的方法,我相信您也同意这一点。
图 1. 运行中的预配置类示例
返回列表