ExtJs4 笔记(5) Ext.Button 按钮
来源:互联网 发布:算法导论第三版中文版 编辑:程序博客网 时间:2024/06/05 02:28
从本篇开始讲基础控件,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'}] }]
0 0
- ExtJs4 笔记(5) Ext.Button 按钮
- ExtJs4 笔记(5) Ext.Button 按钮
- ExtJs4 笔记(5) Ext.Button 按钮
- ExtJs4 笔记(5) Ext.Button 按钮
- ExtJs4 笔记(5) Ext.Button 按钮
- ExtJs4学习(十五)Button(按钮)用法
- Extjs4 API文档阅读--Ext.button.Button
- ExtJs4 笔记(4) Ext.XTemplate 模板
- ExtJs4 笔记(4) Ext.XTemplate 模板
- ExtJs4 笔记(4) Ext.XTemplate 模板
- ExtJs4 笔记(4) Ext.XTemplate 模板
- Extjs4 grid 行添加按钮(button)的方法
- ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
- ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
- ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
- ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
- ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
- ExtJs4 笔记(7) Ext.tip.ToolTip 提示
- zoj 2405 (专业的四位数字)(水水)
- php重定向后需要exit
- 理解RESTful架构
- 扩展jQuery EasyUI 的表单验证
- iOS- 打包
- ExtJs4 笔记(5) Ext.Button 按钮
- Android 去掉Power键按钮 锁屏界面 休眠时间
- 在CMD下用java命令出现“找不到或无法加载主类”问题
- hdu 2037_贪心
- ExtJs4 笔记(6) Ext.MessageBox 消息对话框
- Eclipse中配置Maven
- ExtJs4 笔记(7) Ext.tip.ToolTip 提示
- 用于启动 Windows Phone 8 内置应用的 URI 方案
- ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件