从本篇开始讲基础控件，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,
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框架的多个核心功能，包括DOM操作、JS语法扩展、Ajax支持、模板系统、按钮、消息对话框、提示、滚轴与进度条控件、面板与窗口、布局管理、选项卡、数据视图、工具栏、分页栏、状态栏、菜单...
### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架，专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...
Ext.menu.Menu可以创建下拉菜单，Ext.Button创建按钮，而Toolbar则用于放置各种功能按钮。通过这些组件，可以实现用户交互的基本操作。 在使用ExtJS进行开发时，还有一些经验总结值得注意。例如，在布局时，推荐...
- **传统式登记**：通过JavaScript获取元素并设置其事件处理函数，例如`button.onclick = popUp;`。这种方法允许在脚本中组织代码，便于维护。 - **IE式登记**（attachEvent）：仅适用于IE浏览器，可以为同一个...
1. Ext.onReady函数：在EXTJS库文件及页面内容加载完后，EXTJS会执行Ext.onReady中指定的函数。 2. 控件的使用：使用EXTJS提供的控件，如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等。 三、EXTJS控件 ...
5. **Ext.MessageBox.show()**：这是一个非常灵活的方法，允许你自定义显示信息提示框的配置，如标题、消息、宽度、是否可关闭、模态等。例如： ```javascript Ext.Msg.show({ title: '自定义提示', msg: '这是...
1. **引入EXT_JS库**：在使用EXT_JS开发时，首先需要在HTML页面中引入EXT_JS的CSS样式文件和JavaScript库文件，例如`extjs/resources/css/ext-all.css`、`extjs/adapter/ext/ext-base.js`和`extjs/ext-all.js`。EXT_...
通常，这包括`extjs/resources/css/ext-all.css`用于样式，`extjs/adapter/ext/ext-base.js`作为适配器，以及`extjs/ext-all.js`包含EXT_JS的核心功能。`Ext.onReady`函数在页面加载完成后执行，是EXT_JS应用的启动...
4. `<script src="extjs/ext-lang-zh_CN.js" type="text/javascript"></script>` - 如果需要中文支持，引入语言包。 然后，你可以使用`Ext.onReady`函数来确保ExtJS库加载完成后再执行特定的JavaScript代码。这是一...
var button = new Ext.Button({ renderTo: 'button', text: 'OK' }); ``` 这里，一个新的按钮组件将会被渲染到id为`button`的div元素内部，即`<div id="button">sadfa</div>`。 相反，`applyTo` 配置则是在指定...
在示例代码中，我们看到`<link>`标签引入了CSS样式表，而`<script>`标签则引入了`ext-base-debug.js`和`ext-all-debug.js`两个JavaScript文件，这是ExtJS的基础库和完整组件库。引入顺序至关重要，基础库必须先于...
`Ext.extend`是ExtJS提供的一种继承机制，用于创建类的层次结构，使得子类能够继承父类的特性。 在JavaScript中，构造函数用于初始化新创建的对象。例如，`Person`是一个构造函数，通过`new Person('Tom')`创建了一...
Extjs工具栏（Toolbar）和菜单（Menu）组件的学习笔记提供了丰富的知识点，帮助开发者在Web开发中实现类似桌面程序的用户界面。以下详细解析了Extjs在构建工具栏和菜单方面的关键知识点。 首先，Extjs是一个基于...
ExtJS中的控件（Components）是构建UI的基础，包括按钮（Button）、表格（Grid）、面板（Panel）等。每个控件都有多种配置项（Properties），例如尺寸（width, height）、样式（style）、事件监听器（listeners）等...
例如，可以通过添加按钮（button）或其他控件来自定义工具栏。 Ext JS的设计哲学之一是利用JSON对象配置组件，使得开发者只需要关注关心的参数，不必担心参数顺序的问题。这一点在PagingToolbar的构造中也得到了...