ExtJs4笔记(5)Ext.Button按钮

1、ExtJs4笔记（5 ）Ext.Button按钮从本篇开始讲基础控件，ExtJs对所有的UI控件都有它自己的一套封装。本篇要讲到的是ExtJs的按钮。主要包括按钮事件、带分割线、带图标、带菜单的按钮，下拉选项式按钮和按钮组合等。我们先看看效果图:预览如下是用到的html ：html?12三种方式实现事件：3456789101112带图标菜单：1314151617带分割线的按钮 18192021菜单式按钮 22232425按钮组合 2627一、基本按钮，三种方式实现按钮事件这里介绍了最基本的按钮生成代码，第一个按钮具备弹起和按下两种状态，三个按钮分别别设置成三种大小。每个按钮的单击事件都是通过一

2、种新的实现方式。下面看看Js 代码：Js?1Ext.create(Ext.Button, 2renderTo: Ext.get(li1),3text: 事件实现 1,4allowDepress: true,/是否允许按钮被按下的状态5enableToggle: true,/是否允许按钮在弹起和按下两种状态中切换6handler: function () 7Ext.Msg.alert(提示, 第一个事件 );8,9id: bt110);1112Ext.create(Ext.Button, 13renderTo: Ext.get(li2),14text: 事件实现 2,15listeners: c

3、lick: function () 16Ext.Msg.alert(提示 , 第二个事件 );1718,19id: bt2,20scale: medium21);2223var bt3 = Ext.create(Ext.Button, 24renderTo: Ext.get(li3).dom,25text: 事件实现 3,26id: bt3,27scale: large28);29bt3.on(click, function () 30Ext.Msg.alert(提示 , 第三个事件 );31);二、带图标菜单按钮可以带图标和菜单，我们可以在配置项里面配置：Js?1Ext.create(Ext

4、.Button, 2renderTo: Ext.get(div2),3id: bt4,4text: 带菜单带图标 ,5iconCls: add16,6menu:78items: 910text: 选项 111, 12text: 选项 213, 14text: 选项 3,15handler: function () 16Ext.Msg.alert(提示, 来自菜单的消息 );1718192021).showMenu();2223Ext.create(Ext.Button, 24renderTo: Ext.get(div2),25id: bt5,26text: 上图标下菜单 ,27iconCls:

5、 add16,28iconAlign: top,29menu:3031items: 3233text: 选项 134, 35text: 选项 236, 37text: 选项 3,38handler: function () 39Ext.Msg.alert(提示, 来自菜单的消息 );40414243,44arrowAlign: bottom4546);三、带分割线的按钮注意的地方：分割线的按钮来自于类Ext.SplitButtonJs?1Ext.create(Ext.button.Split, 2renderTo: Ext.get(div3),3text: 右图标下菜单 ,4iconCls:

6、add16,5iconAlign: right,6menu:78items: 910text: 选项 111, 12text: 选项 213, 14text: 选项 3,15handler: function () 16Ext.Msg.alert(提示, 来自菜单的消息 );17181920,21arrowAlign: bottom2223);四、菜单式按钮按钮式菜单 Ext.CycleButton与下拉不同的是，它具备选中状态，当选中下拉项时，选中文本会相应变化。Js?1Ext.create(Ext.button.Cycle, 2renderTo: Ext.get(div4),3showTe

7、xt: true,4prependText: 请选择： ,5menu:67items: 8text: 选项 1,9checked: true10, 11text: 选项 212, 13text: 选项 31415,16changeHandler: function (btn, item) 17Ext.Msg.alert(修改选择 , item.text);1819);四、按钮组合定义了一组按钮，并可以控制按钮排版。Js?1Ext.create(Ext.ButtonGroup,2renderTo: Ext.get(div5),3title: 按钮组合 ,4columns: 3,5/defaultType:splitbutton,6items: 7text: 按钮 1,8iconCls: add16,9scale: large,10rowspan: 211, 12text: 按钮 2, iconCls: add16, rowspan: 2, scale: large13