[转载]ExtJs4 笔记（5） Ext.Button 按钮
2020-12-13 03:32
标签：blog class c java ext http 作者：李盼（Lipan） 从本篇开始讲基础控件，ExtJs对所有的UI控件都有它自己的一套封装。本篇要讲到的是ExtJs的按钮。主要包括按钮事件、带分割线、带图标、带菜单的按钮，下拉选项式按钮和按钮组合等。我们先看看效果图: 如下是用到的html： [html] 这里介绍了最基本的按钮生成代码，第一个按钮具备弹起和按下两种状态，三个按钮分别别设置成三种大小。每个按钮的单击事件都是通过一种新的实现方式。下面看看Js代码： [Js] 按钮可以带图标和菜单，我们可以在配置项里面配置： [Js] 注意的地方：分割线的按钮来自于类Ext.SplitButton [Js] 按钮式菜单Ext.CycleButton与下拉不同的是，它具备选中状态，当选中下拉项时，选中文本会相应变化。 [Js] 定义了一组按钮，并可以控制按钮排版。 [Js] [转载]ExtJs4 笔记（5） Ext.Button 按钮,搜素材,soscw.com [转载]ExtJs4 笔记（5） Ext.Button 按钮 标签：blog class c java ext http 原文地址：http://www.cnblogs.com/BTMaster/p/3726356.html
出处：[Lipan] （http://www.cnblogs.com/lipan/）
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。预览
三种方式实现事件：
带图标菜单：
带分割线的按钮
菜单式按钮
按钮组合
一、基本按钮，三种方式实现按钮事件
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("提示", "第三个事件");
});
二、带图标菜单
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.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.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);
}
});
四、按钮组合
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‘}]
}]
});
文章标题：[转载]ExtJs4 笔记（5） Ext.Button 按钮
文章链接：http://soscw.com/essay/27780.html