EXTJS实现MSN风格界面布局教程

"这篇教程将介绍如何使用EXTJS框架来实现一个类似MSN的界面布局，主要关注用户界面的构建，包括联系人区域的设计，如显示联系人信息、状态切换、个性化签名以及联系人列表的展示。教程通过逐步构建一个简单的通讯器窗口来演示EXTJS的布局和组件使用方法。" 在EXTJS中，布局（Layout）是关键概念，它决定了组件如何在容器内排列和调整大小。在本教程中，我们将使用EXTJS的`fit`布局，这种布局方式使得容器内的唯一子组件完全填充整个容器空间。 首先，创建一个`Ext.Window`对象作为通讯器的基础窗口，设置其宽度、高度和标题，如下所示： ```javascript var wnd = new Ext.Window({ width: 300, height: 450, layout: 'fit', // 使用fit布局 title: 'InstantMessenger' }); ``` 接着，为窗口添加一个工具栏（toolbar）来显示用户信息。工具栏允许我们方便地组织和展示多个组件。在这里，我们创建了一个`buttonGroup`，分为两列，一列用于显示头像，另一列用于显示用户名： ```javascript var wnd = new Ext.Window({ // ...其他配置 tbar: [{ xtype: 'buttongroup', columns: 2, items: [ // 这里将添加头像和用户名的按钮 ] }] }); ``` 头像和用户名按钮可以设置为工具栏的项，以便点击时触发相应的操作。这可以通过在`items`数组中定义按钮来实现，同时可以为按钮绑定点击事件处理器。 为了模拟MSN界面，我们需要在窗口中进一步添加更多组件，例如状态选择器（在线、忙、离开或离线）、个性化签名文本框，以及联系人列表。这些可以通过EXTJS的其他组件如`checkboxGroup`（状态选择器）、`textareafield`（签名文本框）和`grid`（联系人列表）来实现。 联系人列表可以使用`Ext.grid.Panel`，并根据状态（在线、离线等）进行分组。我们还可以使用`Ext.data.Store`来管理数据，并通过`Ext.data.Model`定义每个联系人的字段。 随着教程的深入，作者将逐步添加这些功能，并解释如何配置和交互这些EXTJS组件，从而完成一个基本的MSN风格的通讯器界面。这个教程对于学习EXTJS布局和组件使用非常有用，可以帮助开发者掌握EXTJS构建复杂用户界面的技巧。