ExtJs4 笔记(5) Ext.Button 按钮
来源:互联网 发布:mac windows10截图 编辑:程序博客网 时间:2024/06/04 19:57
从本篇开始讲基础控件,ExtJs对所有的UI控件都有它自己的一套封装。本篇要讲到的是ExtJs的按钮。主要包括按钮事件、带分割线、带图标、带菜单的按钮,下拉选项式按钮和按钮组合等。我们先看看效果图:
预览
如下是用到的html:
[html]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<
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]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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'
}]
}]
});
作者:李盼(Lipan)
出处:[Lipan] (http://www.cnblogs.com/lipan/)
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。
出处:[Lipan] (http://www.cnblogs.com/lipan/)
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。
- 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 提示
- 浅谈C/C++内存泄漏及其检测工具
- 用GetLastError()来定位出错信息
- 【性能分析】初探VS2010中的Profile(性能剖析)功能
- 设计模式之一:组合模式
- android-Service和Thread的区别
- ExtJs4 笔记(5) Ext.Button 按钮
- Android 去掉横竖屏切换时的转屏动画
- lxc调用init流程
- 堆和栈的区别
- 正则提取PHP代码里的部分数据
- 在应用程序级别之外使用注册为 allowDefinition='MachineToApplication' 的节是错误的。如果在 IIS 中没有将虚拟目录配置为应用程序,则可能导致此错误
- haskell(26)
- HTML标签初识
- ExtJs4 笔记(6) Ext.MessageBox 消息对话框