**Coolite 学习笔记**
Coolite 是一个用于构建 Web 应用程序的框架，它提供了丰富的用户界面组件和功能，使得开发人员可以方便地创建交互式的前端应用。本笔记将探讨 Coolite 中的一些核心控件及其使用方法。
我们来看一下 `<ext:Button>` 控件。这是一个用于创建按钮的组件，它支持设置图标（如 `Icon="ApplicationCascade"`）和文本（如 `Text="Submit"`）。按钮还可以绑定事件监听器，例如，`<Listeners>` 标签内的 `Click` 事件可以触发一个 JavaScript 函数，像这样定义点击按钮后的操作：
```xml
<Listeners>
<Click Handler="Ext.Msg.confirm('Confirm', '你想删除它?', function(btn) { if (btn == 'yes') window.location.href = 'Delete.aspx'; });" />
</Listeners>
```
这段代码会在按钮被点击时弹出一个确认对话框，询问用户是否要执行删除操作。如果用户点击 "Yes"，页面将重定向到 `Delete.aspx`。
接下来，我们看到 `<ext:Label>` 控件，它可以用来展示静态文本或图片。例如：
```xml
<ext:Label runat="server" Html="<img src='login/Images/eHR-logo.png' />" />
```
这将在页面上显示指定的图像。
此外，Coolite 还支持 AJAX 事件，比如 `<AjaxEvents>` 标签内的 `Click` 事件，允许我们在服务器端处理点击事件并传递参数。下面是一个示例：
```xml
<AjaxEvents>
<Click OnEvent="ChangThem">
<UserParams>
<ext:Parameter Name="name" Value="123" />
</UserParams>
</Click>
</AjaxEvents>
```
这里，`ChangThem` 是服务器端方法的名称，`name` 参数的值被设置为 `123`，当按钮被点击时，这些参数会被发送到服务器。
在布局方面，`<ext:Toolbar>` 控件允许我们创建工具栏，并通过 `<ext:ToolbarFill />` 来填充空间，实现控件的对齐。例如：
```xml
<ext:Toolbar>
<ext:ToolbarFill />
</ext:Toolbar>
```
这会让前面的控件向左靠齐，后面的控件向右靠齐。
`<ext:TabPanel>` 控件用于创建带有选项卡的面板，通过设置 `EnableTabScroll="true"` 可以启用选项卡的滚动功能：
```xml
<ext:TabPanel ID="tabMain" runat="server" Icon="ArrowEw" EnableTabScroll="true" />
```
在 JavaScript 操作中，Coolite 提供了一些内置的对话框，如 `Ext.Msg.confirm()` 和 `Ext.Msg.alert()`，它们分别用于创建带确认按钮的对话框和只显示信息的对话框。例如：
```javascript
Ext.Msg.confirm('标题', '确定删除？');
Ext.Msg.alert('标题', '内容');
```
此外，还有一些实用的文本框操作，如 `getValue()` 和 `setValue()` 方法，可以获取或设置文本框的值：
```javascript
// 获取文本框的值
#{txtNewPwd2}.getValue();
// 设置文本框的值
#{txtNewPwd2}.setValue('你要设置的值');
```
总结来说，Coolite 提供了一系列强大且易于使用的控件，如按钮、标签、工具栏、选项卡面板以及各种对话框，帮助开发者构建功能丰富的 Web 应用程序。同时，它还支持 AJAX 事件处理和 JavaScript 操作，使得前端交互更加灵活。通过深入学习和实践，开发者可以充分利用 Coolite 的功能，提高开发效率和用户体验。
