ExtJS Button简单应用

最新推荐文章于 2025-07-07 10:59:34 发布

转载最新推荐文章于 2025-07-07 10:59:34 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Mr-Joe/archive/2012/02/21/2361079.html

本文介绍如何使用ExtJS创建一个包含下拉菜单的按钮组件。通过设置按钮的样式、大小及位置，并定义下拉菜单的内容。同时，文章展示了如何为按钮添加点击和鼠标悬停事件监听。

Ext.create("Ext.Button", {

               text: "click",    //文字
               renderTo: Ext.getBody(),    //页面展示
               height: 40,
               width: 100,
               style: { marginLeft: '100px' },   //样式

               //下拉效果
               arrowAlign: 'bottom',
               //下拉项
               menu: [
                       { text: 'Item 1' },
                       { text: 'Item 2' },
                       { text: 'Item 3' },
                       { text: 'Item 4' }
                    ],

               //添加事件侦听
               //具体事件:click toggle mouseover mouseout mouseshow menuhide menutriggerover menutriggerout
               listeners: {
                   click: function () {
                       //this == the button, as we are in the local scope
                       this.setText('I was clicked!');
                   },
                   mouseover: function () {
                       //set a new config which says we moused over, if not already set
                       if (!this.mousedOver) {
                           this.mousedOver = true;
                           alert('2');
                       }
                   }
               }

})

转载于:https://www.cnblogs.com/Mr-Joe/archive/2012/02/21/2361079.html