89. Ext.Button 按钮

转自：http://www.cnblogs.com/lipan/archive/2011/12/13/2274797.html

从本篇开始讲基础控件，ExtJs对所有的UI控件都有它自己的一套封装。本篇要讲到的是ExtJs的按钮。主要包括按钮事件、带分割线、带图标、带菜单的按钮，下拉选项式按钮和按钮组合等。我们先看看效果图:

预览

如下是用到的html：

[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

<h1>     三种方式实现事件： </h1> <div id="div1" class="content">     <ul>         <li id="li1"></li>         <li id="li2"></li>         <li id="li3"></li>     </ul> </div> <h1>     带图标菜单： </h1> <div id="div2" class="content"> </div> <h1>     带分割线的按钮</h1> <div id="div3" class="content"> </div> <h1>     菜单式按钮</h1> <div id="div4" class="content"> </div> <h1>     按钮组合</h1> <div id="div5" class="content"> </div>

一、基本按钮，三种方式实现按钮事件

这里介绍了最基本的按钮生成代码，第一个按钮具备弹起和按下两种状态，三个按钮分别别设置成三种大小。每个按钮的单击事件都是通过一种新的实现方式。下面看看Js代码：

[Js]

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

Ext.create("Ext.Button", {     renderTo: Ext.get("li1"),     text: "事件实现1",     allowDepress: true,     //是否允许按钮被按下的状态     enableToggle: true,     //是否允许按钮在弹起和按下两种状态中切换     handler: function () {         Ext.Msg.alert("提示", "第一个事件");     },     id: "bt1" });   Ext.create("Ext.Button", {     renderTo: Ext.get("li2"),     text: "事件实现2",     listeners: { "click": function () {         Ext.Msg.alert("提示", "第二个事件");     }     },     id: "bt2",     scale: 'medium' });   var bt3 = Ext.create("Ext.Button", {     renderTo: Ext.get("li3").dom,     text: "事件实现3",     id: "bt3",     scale: 'large' }); bt3.on("click", function () {     Ext.Msg.alert("提示", "第三个事件"); });

二、带图标菜单

按钮可以带图标和菜单，我们可以在配置项里面配置：

[Js]

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

Ext.create("Ext.Button", {     renderTo: Ext.get("div2"),     id: "bt4",     text: "带菜单带图标",     iconCls: "add16",     menu:     {         items: [             {                 text: '选项1'             }, {                 text: '选项2'             }, {                 text: '选项3',                 handler: function () {                     Ext.Msg.alert("提示", "来自菜单的消息");                 }             }         ]     } }).showMenu();   Ext.create("Ext.Button", {     renderTo: Ext.get("div2"),     id: "bt5",     text: "上图标下菜单",     iconCls: "add16",     iconAlign: 'top',     menu:     {         items: [             {                 text: '选项1'             }, {                 text: '选项2'             }, {                 text: '选项3',                 handler: function () {                     Ext.Msg.alert("提示", "来自菜单的消息");                 }             }         ]     },     arrowAlign: 'bottom'   });

三、带分割线的按钮

注意的地方：分割线的按钮来自于类Ext.SplitButton

[Js]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

Ext.create("Ext.button.Split", {     renderTo: Ext.get("div3"),     text: "右图标下菜单",     iconCls: "add16",     iconAlign: 'right',     menu:     {         items: [             {                 text: '选项1'             }, {                 text: '选项2'             }, {                 text: '选项3',                 handler: function () {                     Ext.Msg.alert("提示", "来自菜单的消息");                 }             }         ]     },     arrowAlign: 'bottom'   });

四、菜单式按钮

按钮式菜单Ext.CycleButton与下拉不同的是，它具备选中状态，当选中下拉项时，选中文本会相应变化。

[Js]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

Ext.create('Ext.button.Cycle', {     renderTo: Ext.get("div4"),     showText: true,     prependText: '请选择：',     menu:     {         items: [{             text: '选项1',             checked: true         }, {             text: '选项2'         }, {             text: '选项3'         }]     },     changeHandler: function (btn, item) {         Ext.Msg.alert('修改选择', item.text);     } });

四、按钮组合

定义了一组按钮，并可以控制按钮排版。

[Js]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Ext.create("Ext.ButtonGroup",{      renderTo: Ext.get("div5"),      title: "按钮组合",      columns: 3,      //defaultType:'splitbutton',      items: [{          text: '按钮1',          iconCls: 'add16',          scale: 'large',          rowspan: 2      }, {          text: '按钮2', iconCls: 'add16', rowspan: 2, scale: 'large'      }, {          text: '按钮3', iconCls: 'add16'      }, {          xtype: 'splitbutton', text: '分割线按钮', iconCls: 'add16', menu: [{ text: '菜单1'}]      }]  });