根据提供的文件信息，我们可以深入探讨Extjs中几个关键组件及其用法。Extjs是一个用于构建交互式Web应用程序的JavaScript框架，特别适用于创建复杂的用户界面。接下来将详细介绍文档中提到的几个核心概念，包括`Ext.MessageBox`、`Ext.Panel`、`Ext.Window`、`Ext.FormPanel`、`Ext.TabPanel`、`Ext.XTemplate`和`Ext.TreePanel`以及如何在Extjs中实现主题（换肤）功能。
### Ext.MessageBox
#### 1. `Ext.MessageBox.alert()` 方法
`Ext.MessageBox.alert()` 用于显示一个带有自定义标题和消息的警告对话框。它接受三个参数：
- `title`：对话框的标题。
- `msg`：要显示的消息文本。
- `fn`：可选的回调函数，在用户点击“确定”按钮关闭对话框时执行。
示例代码：
```javascript
Ext.MessageBox.alert("提示", "这是一个警告对话框", function() {
alert("对话框已关闭");
});
```
#### 2. `Ext.MessageBox.confirm()` 方法
此方法与`alert()`非常相似，不同之处在于它会显示一个确认对话框，用户可以选择“是”或“否”。除了常规的`title`和`msg`参数外，还支持一个回调函数`fn`来处理用户的响应。
示例代码：
```javascript
Ext.MessageBox.confirm("确认", "您确定要继续吗？", function(btn) {
if (btn == 'yes') {
alert("用户选择了'是'");
} else {
alert("用户选择了'否'");
}
});
```
#### 3. `Ext.MessageBox.prompt()` 方法
此方法用于显示一个提示对话框，允许用户输入数据。它提供了一个文本输入字段和一个可选的验证函数。
示例代码：
```javascript
Ext.MessageBox.prompt("请输入名称", "请输入您的姓名", function(btn, value) {
if (btn == 'ok') {
alert("您输入的姓名是：" + value);
}
});
```
### Ext.Panel
`Ext.Panel` 是一个容器组件，可以包含其他Extjs组件，并可以设置边框、标题等属性。它可以作为基本布局单元，用于组织更复杂的应用程序界面。
示例代码：
```javascript
var panel = new Ext.Panel({
title: '基本信息',
width: 300,
height: 200,
layout: 'fit',
items: [new Ext.form.TextField({fieldLabel: '姓名'})]
});
panel.render('content');
```
### Ext.Window
`Ext.Window` 提供了一个灵活的、可拖动的对话框，可以包含任何Extjs组件。它常用于显示模态对话框或弹出窗口。
示例代码：
```javascript
var win = new Ext.Window({
title: '我的窗口',
width: 300,
height: 200,
layout: 'fit',
items: [new Ext.form.TextField({fieldLabel: '地址'})]
});
win.show();
```
### Ext.FormPanel
`Ext.FormPanel` 是一个专门用于创建表单的面板，它可以轻松地管理表单数据的提交和验证。
示例代码：
```javascript
var form = new Ext.FormPanel({
title: '用户登录',
bodyStyle: 'padding:5px 5px 0',
url: 'save-form.php',
method: 'POST',
frame: true,
items: [{
xtype: 'textfield',
fieldLabel: '用户名',
name: 'username'
}, {
xtype: 'textfield',
fieldLabel: '密码',
name: 'password',
inputType: 'password'
}],
buttons: [{
text: '提交',
handler: function() {
form.getForm().submit({
success: function(form, action) {
Ext.Msg.alert('成功', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('失败', action.result.msg);
}
});
}
}]
});
form.render('form');
```
### Ext.TabPanel
`Ext.TabPanel` 提供了一种简单的方式来创建选项卡界面。每个选项卡都是一个面板，可以包含任何类型的组件。
示例代码：
```javascript
var tabPanel = new Ext.TabPanel({
renderTo: 'tabpanel',
activeTab: 0,
items: [{
title: '第一页',
html: '这是第一页的内容'
}, {
title: '第二页',
html: '这是第二页的内容'
}]
});
```
### Ext.XTemplate
`Ext.XTemplate` 是一个强大的模板引擎，用于动态生成HTML内容。它支持简单的语法和表达式，使得渲染数据到HTML变得十分简单。
示例代码：
```javascript
var tpl = new Ext.XTemplate(
'<ul>',
'<tpl for=".">',
'<li>{name}</li>',
'</tpl>',
'</ul>'
);
var data = [
{name: '苹果'},
{name: '香蕉'},
{name: '橙子'}
];
tpl.overwrite(document.getElementById('list'), data);
```
### Ext.TreePanel
`Ext.TreePanel` 是一个树形视图组件，非常适合展示具有层次结构的数据。它支持异步加载节点和各种事件监听。
示例代码：
```javascript
var tree = new Ext.tree.TreePanel({
renderTo: 'tree',
root: {
nodeType: 'async',
text: '根节点',
expanded: true,
children: [{
text: '子节点1',
leaf: true
}, {
text: '子节点2',
leaf: true
}]
}
});
```
### Extjs换肤
Extjs提供了强大的主题功能，允许开发者轻松更改应用程序的整体外观和感觉。这通常通过修改CSS样式表和图像资源来实现。可以通过以下步骤更换主题：
1. **选择主题**：首先确定要使用的主题。Extjs提供了多种预设的主题，例如“neptune”、“gray”等。
2. **配置主题**：在项目的主配置文件中指定要使用的主题名称。
3. **自定义主题**：如果需要进一步定制主题，可以通过编辑CSS文件来修改颜色、字体等样式。
以上就是Extjs文档中提到的关键知识点的详细解释。希望这些信息能够帮助初学者更好地理解和使用Extjs框架。
lvchyg2011-10-11感觉不怎么样， 没有帮助文档好看。
