ExtJs4 笔记（5） Ext.Button 按钮

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

转载于:https://www.cnblogs.com/liubo/p/3363626.html

ExtJs4 笔记（5） Ext.Button 按钮相关推荐

ExtJs4 笔记（3） Ext.Ajax 对ajax的支持
原文地址为: ExtJs4 笔记(3) Ext.Ajax 对ajax的支持 <回到系列目录本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持,包括Ajax封装,函数事件操作封装,还有扩展 ...
[转载]ExtJs4 笔记（3） Ext.Ajax 对ajax的支持
作者:李盼(Lipan) 出处:[Lipan] (http://www.cnblogs.com/lipan/) 本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持,包括Ajax封装,函数事件操作 ...
.Net 转战 Android 4.4 日常笔记（4）--按钮事件和国际化
原文:.Net 转战 Android 4.4 日常笔记(4)--按钮事件和国际化我们知道资源被注册到R.java我们通过R.java就可以读取到界面中的组件.跟我们.net一样,通过ID来读取组件 ...
CocosCreator之Button按钮
按钮添加监听: 当按钮销毁时,这些监听也会自动销毁. // 必须要挂载Button组件.node_btn是携带button的按钮.comp_btn是按钮组件. node_btn.on(cc.Node. ...
每日分享html之两个input搜索框、两个button按钮、一个logo效果
我是c站的一个小博主,近期我会每天分享前端知识包括(原生的web语句,以及vue2和vue3,微信小程序的写法及知识点)本篇文章收录于html特效专栏中,如果想每天在我这学到一些东西,请关注我并订阅专 ...
去掉button按钮原有样式
微信小程序--去掉button按钮原有样式问题: 为什么要去掉其原有样式呢? 是因为不去掉,就修改不了自己想要的样式了 .item button{width: 100%;background-col ...
EditText控件的基本使用（点击Button按钮，Toast提示EditText中的内容）
EditText是程序用于和用户进行交互的另一个重要控件,它允许用户在空间里输入和编辑内容,并可以在程序中对这些内容进行处理.EditText的应用场景非常普遍,在进行发短信.发微博.聊QQ等操作时, ...
前端问题：button按钮在form表单的时候会当成submit提交
button按钮在form表单的时候会当成submit提交 input type="button" PS:遇到了一个坑是,button按钮在form表单的时候会当成submit提交 ...
Winform中使用代码编写Button按钮的点击事件
场景一般在进行Winform窗体开发时都会拖拽一个Button,然后双击进入Button按钮的点击事件中,进行点击事件的编写. 如果窗体上事先没有Button按钮,是在代码中生成的Button按钮 ...

ExtJs4 笔记（5） Ext.Button 按钮

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

二、带图标菜单

三、带分割线的按钮

四、菜单式按钮

四、按钮组合

ExtJs4 笔记（5） Ext.Button 按钮相关推荐

最新文章

热门文章