ExtJS Button(按钮).docxVIP

实用ExtJS教程100例-022：ExtJS Button(按钮)用法发布时间：2013-12-17 10:30 浏览量：454今天这篇内容将介绍ExtJS中Button的用法。更多的ExtJS教程，点击进入《ExtJS 教程目录》，持续更新中……简单的按钮使用ExtJS创建一个按钮的代码非常简单：{ xtype: button, id: btn1, text: 小按钮}使用scale绘制不同大小的按钮ExtJS提供了三种大小的按钮，通过配置项scale实现绘制不同大小的按钮，scale的值有：small：小按钮，默认值medium：中等按钮large：大按钮接下来我们用scale来实现三种不同大小的按钮：{ xtype: button, id: btn1, text: 小按钮},{ xtype: button, id: btn2, text: 中按钮, scale: medium},{ xtype: button, id: btn3, text: 大按钮, scale: large}第一个按钮为小按钮，由于small为默认值，所以我们可以不写。为按钮添加事件ExtJS为按钮添加事件的方法有三种，分别是：使用handler添加事件使用listeners添加事件动态绑定事件接下来我们将分别进行演示使用handler添加事件{ xtype: button, id: btn1, text: 小按钮, handler: function () { Ext.MessageBox.alert(提示, 通过handler配置项添加的事件); }}使用listeners添加事件{ xtype: button, id: btn2, text: 中按钮, scale: medium, listeners: { click: function () { Ext.MessageBox.alert(提示, 通过listeners配置项添加的事件); } }}动态绑定事件Ext.get(btn3).on(click, function () { Ext.MessageBox.alert(提示, 通过on方法动态添加的事件);});为Button添加menubutton可以包含一个菜单列表，在点击的时候显示出来：我们来看看代码：{ xtype: button, id: btnAction, text: 操作, iconCls: qicon-user, arrowAlign: right, menu: [ { text: 新增, iconCls: qicon-add }, { text: 修改, iconCls: qicon-edit }, { text: 保存, iconCls: qicon-save },-, { text: 删除, iconCls: qicon-remove } ]}iconCls配置项用来设置icon图标的css属性arrowAlign配置项用来设置下拉列表箭头的位置，一般为right或bottomenableToggle配置项和toggle事件enableToggle配置项用来控制按钮的按下状态，当按钮按下的时候，它的样式将会保持：enableToggle默认为false，设置为true将开始toggle功能。只有在开启toggle功能之后，toggle事件才会被触发，我们来看一下Toggle Button的代码：{ xtype: button, id: btnToggle, text: Toggle Button, enableToggle: true, listeners: { toggle: function (sender, pressed, opts) {if (pressed) { Ext.MessageBox.alert(提示, 按下); }else { Ext.MessageBox.alert(提示, 释放); } } }}我们为它添加了toggle事件，当点击以后，会弹出一个提示框：