從本篇開始講基礎控件，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'}]
}]
