《回到系列目录

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

预览

如下是用到的html：

[html]

      <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]

      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]

      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]

      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]

      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]

     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'}]          }]      });