2、EXT框架基础

最新推荐文章于 2022-07-09 10:12:18 发布

原创最新推荐文章于 2022-07-09 10:12:18 发布 · 453 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext

EXTJS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用EXTJS快速创建事件驱动的应用程序。通过示例代码展示了如何创建按钮和窗口，设置事件监听器，并实现点击事件的功能。此外，还讲解了如何使用Ext.get方法获取DOM元素并为其绑定事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

EXT的事件和类

快速编写

创建event.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 第一步引入Ext的样式文件 -->
<link type="text/css" rel="stylesheet"
    href="ext-3.4.1/resources/css/ext-all.css"></link>
<!-- 引入Ext库文件，底层驱动 -->
<script src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<!-- 引入ext-all -->
<script src="ext-3.4.1/ext-all.js"></script>
<script src="event.js"></script>
</head>
<body>
    <div id="hello">asdasd</div>
    <div id="btn"></div>
    <div id="btn2"></div>
    <a id="link1">普通连接</a>
</body>
</html>

创建event.js

function btnClick(b, e) {
    var win = new Ext.Window({
                title : "win1" + b.text,
                width : 300,
                height : 200,
                defaultType : "button",
                items : [{
                            text : "按钮1"
                        }, {
                            text : "按钮2"
                        }]
            });
    win.on("beforeshow", function() {
                return confirm("是否要显示？");
            });
    win.show();
}
Ext.onReady(function() {
    Ext.get("link1").on("click", function(e) {
                alert("dasd");
            }, this, {
                buffer : 500
            });
    var btn = new Ext.Button({
                text : "我的按钮1",
                // disabled:true，
                listeners : {
                    click : btnClick
                }
            });
    btn.render("btn");
    var btn2 = new Ext.Button({
                text : "我的按钮2"
            });
    btn2.render("btn2");
        // btn.on("click", btnClick);
        // btn2.on("click", btnClick);
    });

知识点解析

new Ext.Window({…})
创建一个新的窗口，({…})这里面写的是窗口的配置项，例如宽高、标题等。

Ext.get(“link1”)
获得HTMl中id=”link1”对应的按钮

浏览器事件

浏览器事件即传统意义上的鼠标单击、移动等事件。

on(‘click’,function(){})

这种形式为按钮添加事件监听函数，这个函数会在单击（click）事件时执行。
on()用于将事件监听函数绑定到元素对应的事件上
buffer

延迟一段时间执行对应的监听函数，执行了函数，在等待的过程中，如果我们再次出发了事件，那么上次的任务就会被取消，并把新的函数放入任务队列里，这样就可以保证函数不会重复执行多次。