ExtJS Button按钮.docx

实用ExtJS教程100例-022:ExtJSButton(按钮)用法发布时间:2013-12-1710: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(){("提示","通过handler配置项添加的事件");}}使用listeners添加事件{xtype:"button",id:"btn2",text:"中按钮",scale:"medium",listeners:{click:function(){("提示","通过listeners配置项添加的事件");}}}("btn3").on("click",function(){("提示","通过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