目录
1. ExtJs2.0学习系列(1)--Ext.MessageBox
2. ExtJs2.0学习系列(2)--Ext.Panel
3. ExtJs2.0学习系列(3)--Ext.Window
4. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式
5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式
6. ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇)
7. ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇)
8. ExtJs2.0学习系列(8)--Ext.FormPanel之第五式(综合篇)
9. ExtJs2.0学习系列(9)--Ext.TabPanel之第一式
10. ExtJs2.0学习系列(10)--Ext.TabPanel之第二式
11. ExtJs2.0学习系列(11)--Ext.XTemplate
12. ExtJs2.0学习系列(12)--Ext.TreePanel之第一式
13. ExtJs2.0学习系列(13)--Ext.TreePanel之第二式
14. ExtJs2.0学习系列(14)--Ext.TreePanel之第三式(可增删改的树)
15. ExtJs2.0学习系列(15)--extjs换肤
### ExtJs2.0入门实例知识点详解
#### 1. Ext.MessageBox
- **Ext.MessageBox.alert()**
- **用途**: 显示一个简单的警告框。
- **参数**:
- `title` (必需): 弹出框的标题。
- `msg` (必需): 显示的信息。
- `fn` (可选): 关闭对话框后执行的函数。
- **示例**:
```javascript
Ext.MessageBox.alert('提示', '这是一条信息', function() {
alert('对话框已关闭');
});
```
- **Ext.MessageBox.confirm()**
- **用途**: 显示一个确认框，带有“确定”和“取消”按钮。
- **参数**:
- `title` (必需): 弹出框的标题。
- `msg` (必需): 显示的信息。
- `fn` (可选): 关闭对话框后执行的函数，参数`e`表示用户点击的按钮（`'yes'`, `'no'`, `'cancel'`）。
- **示例**:
```javascript
Ext.MessageBox.confirm('确认', '你确定要执行此操作吗？', function(e) {
if (e === 'yes') {
// 用户点击了确定
} else {
// 用户点击了取消
}
});
```
- **Ext.MessageBox.prompt()**
- **用途**: 显示一个输入框，用于获取用户的输入。
- **参数**:
- `title` (必需): 弹出框的标题。
- `msg` (必需): 显示的信息。
- `fn` (可选): 关闭对话框后执行的函数，参数`e`表示用户点击的按钮（`'ok'`, `'cancel'`），`value`表示输入框中的值。
- `value` (可选): 输入框的默认值。
- `multiLine` (可选): 是否启用多行输入模式。
- **示例**:
```javascript
Ext.MessageBox.prompt('请输入', '请输入用户名', function(e, value) {
if (e === 'ok') {
console.log('用户名:', value);
}
}, null, false, 'admin');
```
- **Ext.MessageBox.show()**
- **用途**: 显示一个自定义的对话框，通过配置参数来灵活控制其外观和行为。
- **常用配置参数**:
- `animEl`: 动画元素ID，用于指定对话框出现或消失时的动画效果。
- `buttons`: 按钮配置，可选值包括`Ext.Msg.OK`, `Ext.Msg.OKCANCEL`, `Ext.Msg.CANCEL`, `Ext.Msg.YESNO`, `Ext.Msg.YESNOCANCEL`。
- `closable`: 是否显示关闭按钮。
- `msg`: 对话框中的消息文本。
- `title`: 对话框的标题。
- `fn`: 关闭对话框后执行的回调函数。
- `icon`: 对话框图标类型，如`Ext.MessageBox.INFO`, `Ext.MessageBox.ERROR`等。
#### 2. Ext.Panel
- **基本属性**:
- `title`: 面板的标题。
- `width`/`height`: 面板的宽度和高度。
- `bodyStyle`: 面板主体的CSS样式。
- `border`: 是否显示边框。
- `layout`: 布局管理器类型，例如`fit`, `card`, `vbox`, `hbox`等。
- **使用示例**:
```javascript
var panel = new Ext.Panel({
title: '我的面板',
width: 400,
height: 300,
layout: 'fit',
items: [/* 添加面板内的子项 */]
});
panel.render(document.body);
```
#### 3. Ext.Window
- **基本属性**:
- `title`: 窗口标题。
- `width`/`height`: 窗口尺寸。
- `modal`: 是否为模式窗口，即其他控件不可交互。
- `closeAction`: 关闭窗口后的动作，如`hide`、`destroy`等。
- `items`: 子项集合。
- **使用示例**:
```javascript
var win = new Ext.Window({
title: '窗口标题',
width: 400,
height: 300,
modal: true,
items: [/* 添加窗口内的子项 */]
});
win.show();
```
#### 4. Ext.FormPanel
- **基本属性**:
- `title`: 表单标题。
- `width`/`height`: 表单尺寸。
- `bodyStyle`: 主体样式。
- `items`: 子项集合，如文本框、按钮等。
- `buttons`: 底部按钮集合。
- **使用示例**:
```javascript
var formPanel = new Ext.FormPanel({
title: '登录表单',
width: 300,
bodyStyle: 'padding:10px',
items: [
{ xtype: 'textfield', fieldLabel: '用户名' },
{ xtype: 'textfield', inputType: 'password', fieldLabel: '密码' }
],
buttons: [
{ text: '提交', handler: function() { /* 提交逻辑 */ } },
{ text: '重置', handler: function() { /* 重置逻辑 */ } }
]
});
formPanel.render(document.body);
```
#### 5. Ext.TabPanel
- **基本属性**:
- `title`: 选项卡面板的标题。
- `activeTab`: 当前激活的选项卡索引。
- `items`: 选项卡集合。
- `tabPosition`: 选项卡的位置，可以是`top`、`bottom`、`left`、`right`。
- **使用示例**:
```javascript
var tabPanel = new Ext.TabPanel({
title: '选项卡面板',
activeTab: 0,
items: [
{ title: '选项卡1', html: '这是选项卡1的内容' },
{ title: '选项卡2', html: '这是选项卡2的内容' }
]
});
tabPanel.render(document.body);
```
#### 6. Ext.XTemplate
- **基本概念**:
- `XTemplate` 是一种用于数据绑定的模板引擎。
- 可以将数据动态渲染到HTML文档中。
- **使用示例**:
```javascript
var template = new Ext.XTemplate(
'<div>',
'<span class="name">{name}</span>',
'<span class="age">{age}</span>',
'</div>'
);
var data = { name: '张三', age: 25 };
var html = template.apply(data);
document.body.innerHTML = html;
```
#### 7. Ext.TreePanel
- **基本属性**:
- `title`: 树形面板的标题。
- `rootVisible`: 是否显示根节点。
- `root`: 树结构的根节点对象。
- `useArrows`: 是否使用箭头指示展开状态。
- `listeners`: 监听事件，如`'click'`、`'expand'`等。
- **使用示例**:
```javascript
var treePanel = new Ext.TreePanel({
title: '树形面板',
rootVisible: false,
root: {
expanded: true,
children: [
{ text: '节点1', leaf: false, children: [{ text: '子节点1' }] },
{ text: '节点2', leaf: true }
]
}
});
treePanel.render(document.body);
```
以上是ExtJs2.0中的一些基础控件和方法的详细介绍，通过这些内容可以帮助初学者快速入门，并掌握如何使用这些控件进行Web应用程序开发。
- 1
- 2
- 3
- 4
- 5
前往页