快捷搜索:

ExtJs4 笔记(5) Ext.Button 按钮<BR>预览

从本篇开始讲根基控件,ExtJs对所有的UI控件都有它自己的一套封装。本篇要讲到的是ExtJs的按钮。主要包括按钮事故、带瓜分线、带图标、带菜单的按钮,下拉选项式按钮和按钮组合等。我们先看看效果图:

预览

如下是用到的html:

[html]

三种要领实现事故:

带图标菜单:

带瓜分线的按钮

菜单式按钮

按钮组合

一、基础按钮,三种要领实现按钮事故

这里先容了最基础的按钮天生代码,第一个按钮具备弹起和按下两种状态,三个按钮分手别设置成三种大年夜小。每个按钮的单击事故都是经由过程一种新的实现要领。下面看看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("提示", "第三个事故");

});

三、带瓜分线的按钮

留意的地方:瓜分线的按钮来自于类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'

});

您可能还会对下面的文章感兴趣: