ExtJs之Ext.util.ClickRepeater

ExtJS点击重复器示例

最新推荐文章于 2018-07-24 13:14:37 发布

转载最新推荐文章于 2018-07-24 13:14:37 发布 · 83 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/45170

文章标签：

#javascript #ViewUI

本文介绍了一个使用ExtJS创建的简单示例，演示如何实现一个点击重复器功能。该示例通过定义一个面板并在其中放置一个按钮，当用户长时间按住按钮时，将触发重复点击事件并弹出提示框。

<!DOCTYPE html>

<html>

<head>

    <title>ExtJs</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">

        <script type="text/javascript" src="ExtJs/ext-all.js"></script>

        <script type="text/javascript" src="ExtJs/bootstrap.js"></script>

        <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
 
    <script type="text/javascript">

            Ext.onReady(function(){

        var panel = new Ext.Panel({

          title: 'SAMPLE',

          height: '400px',

          width: '500px',

          html: '<div id="my-div"><input type="button" value="click me" name="but"/></div>'

          });

          panel.render('sub1');

          var el = Ext.get("my-div");

          var cl = new Ext.util.ClickRepeater(el, {

            delay:3000,

            interval: 3002,

            stopDefault: true,

            pressClass: 'p1',

            handler: function rep(){

              Ext.Msg.alert("notice", "点击触发了！！");

            }

          })

      });

    </script>

</head>

<body>

<div id=sub1></div>

</body>

</html>