创建 MSN 界面式的 Ext JS 布局

今天开始的几篇帖子都是关于 Ext JS 布局的。伴随这一系列开始，我打算以制作一个 MSN 式的界面展开内容，也就是一个通讯器，通讯器它有展现联系人、联系人状态的地方，还有展现回话的区域。我们的目标不是实现一个消息传递系统，只是介绍其用户界面的构建过程，并有一些教学为目的的代码完成全文。

首先介绍通讯器的“联系人”区域部分，以 Ext.Window 作为容器。位于 Window 之中我会放置若干控件，控件应符合以下需求：

  • 显示用户名称、头像和当前的状态。
  • 可以让用户改变她当前的状态，可选：“在线、忙、离开或离线”。
  • 可以让用户分享一段简洁的信息（译注：类似于 QQ 的签名功能），并告知她在听着什么的音乐/歌曲。
  • 可以让用户进入她的个人信息、联系卡片或空间。
  • 显示用户的联系列表，以“是否最爱、是否在线、是否离线”划分。

接下来的帖子我会继续增强这界面。到该贴介绍完毕之时，我们所弄的 Window 应该会是像这样子：

样子好像有点熟悉吧？：-）

好的，马上开工！

通讯器窗体

前面已经说过了，我们采用 Window 作为容器。现在所做的只是设置窗体的标题和尺寸。

var wnd = new Ext.Window({
width: 300,
height: 450,
layout:'fit',
title: 'Instant Messenger'
});

截图如下：

显示用户名称、头像和当前的状态

显示用户名称、头像和状态的话就使用窗体的工具条 toolbar。第一步我是第一个工具条（如代码中的 tbar ）,并创建一个按钮组把工具条分为两列(columns)，一列用于头像，一列用于显示用户的名称：

var wnd = new Ext.Window({
width: 300,
height: 450,
layout:'fit',
title: 'Instant Messenger',
tbar: [{ xtype: 'buttongroup', columns: 2 }]
});

头像和用户名都做成为工具条中的按钮。这样做的目的是我想用户点击头像和用户名的时候，就会执行一些函数。Window现在就变为：

<pre>
var wnd = new Ext.Window({
width: 300, height: 450,
layout:'fit',
title: 'Instant Messenger',
tbar: [{
xtype: 'buttongroup',
columns: 2,
items: [
{
xtype: 'button', scale: 'large', iconCls: 'icon-user', rowspan: 2
},

{
xtype: 'splitbutton', text: 'Jorge (available)'
}
]
}]
});</pre>

看起来还不错吧！？

用户改变其状态

要改变某种状态，我们在用户名的按钮中插入一个菜单，如下代码：

var wnd = new Ext.Window({
width: 300,
height: 450,
layout:'fit',
title: '即時信息',
tbar: [{
xtype: 'buttongroup',
columns: 2,
items: [{ xtype: 'button', scale: 'large', iconCls: 'icon-user', rowspan: 2 },
{ xtype: 'splitbutton', text: 'Jorge (available)',
menu: [{ text: 'Available', iconCls: 'ico-sts-available' },
{ text: 'Busy', iconCls: 'ico-sts-busy' },
{ text: 'Away', iconCls: 'ico-sts-away' },
{ text: 'Appear Offline', iconCls: 'ico-sts-offline'}]
}]
}]
}); 结果如下：

让用户分享一段简洁的信息，或她在听着什么的音乐/歌。

要实现该功能，我使用了split 按钮，就放在用户名按钮的下面：

var wnd = new Ext.Window({
width: 300,
height: 450,
layout:'fit',
title: 'Instant Messenger',
tbar: [{
xtype: 'buttongroup',
columns: 2,
items: [{ xtype: 'button', scale: 'large', iconCls: 'icon-user', rowspan: 2 },
{ xtype: 'splitbutton', text: 'Jorge (available)',
menu: [{ text: 'Available', iconCls: 'ico-sts-available' },
{ text: 'Busy', iconCls: 'ico-sts-busy' },
{ text: 'Away', iconCls: 'ico-sts-away' },
{ text: 'Appear Offline', iconCls: 'ico-sts-offline'}]
},{ xtype: 'splitbutton', text: 'Share a quick message',
menu: [{ text: 'Show what I am listening to'}]
}]
}]
});

 

让用户进入她的个人信息、联系卡片或空间

我将如上的功能加到头像的那个按钮中去：

var wnd = new Ext.Window({
width: 300,
height: 450,
layout:'fit',
title: 'Instant Messenger',
tbar: [{
xtype: 'buttongroup',
columns: 2,
items: [{ xtype: 'button', scale: 'large', iconCls: 'icon-user', rowspan: 2,
menu: [{ text: 'Show profile' }, { text: 'View contact card' },
{ text: 'Go to your space'}]
},{ xtype: 'splitbutton', text: 'Jorge (available)',
menu: [{ text: 'Available', iconCls: 'ico-sts-available' },
{ text: 'Busy', iconCls: 'ico-sts-busy' },
{ text: 'Away', iconCls: 'ico-sts-away' },
{ text: 'Appear Offline', iconCls: 'ico-sts-offline'}]
},{ xtype: 'splitbutton', text: 'Share a quick message',
menu: [{ text: 'Show what I am listening to'}]
}]
}]
});

菜单效果如下：

可以让用户改变她当前的状态，可选：“在线、忙、离开或离线”

联系人的列表就是一个TreeView。我会创建一个不可见的根节点（root node），拥有三个分支节点，叫做“在线”、“忙”、“离开”或“离线”。那么用户的联系列表将会加入到这些分支节点中。

首先在窗体中置入一个tree：

items: [{ xtype: 'treepanel',
id: 'contacts-tree',
border: false,
useArrows: true,
autoScroll: true,
animate: true,
containerScroll: true,
bodyCssClass: 'tree-body',
dataUrl: 'messenger.aspx',
requestMethod: 'get',
rootVisible: false,
root: {
nodeType: 'async',
text: 'My Reporting Project',
draggable: false,
id: 'root-node'
}}]

上面就是定义了一个Window窗体，里面还有根节点。这里就是加入“在线”、“忙”、“离开”或“离线”分支节点了，当然还有一些演示用途的联系人。afterrender 事件将会用来获取根节点的引用，在它身上加入子的节点。

var tree = Ext.getCmp('contacts-tree');
tree.on('afterrender', function(loader, node) {
var root = tree.getRootNode();
var node = root.appendChild({ id: 'favorites', text: 'Favorites', expanded: true, iconCls: 'ico-fav' });
node.appendChild({ text: 'Susie', leaf: true, iconCls: 'ico-sts-available' });
node.appendChild({ text: 'Lara', leaf: true, iconCls: 'ico-sts-away' });
node = root.appendChild({ text: 'Available', expanded: true, iconCls: 'ico-grp-available' });
node.appendChild({ text: 'Jonh', leaf: true, iconCls: 'ico-sts-busy' });
node.appendChild({ text: 'Lara', leaf: true, iconCls: 'ico-sts-away' });
node.appendChild({ text: 'Susie', leaf: true, iconCls: 'ico-sts-available' });
node = root.appendChild({ text: 'Offline', expanded: true, iconCls: 'ico-grp-offline' });
})

出来的窗体的确如我们所料：

差不多这样子了，接下来我们继续对联系人窗体加入更多的功能。

上述内容中，MSN式的通讯器的布局可显示用户的状态，显示用户的联系人列表，并提供修改状态的菜单、分享签名消息和进入用户个人信息或联系人的卡片。

需要重申的是，本文的目标不涵盖后台方面的实现，也就是不讨论整个IM系统的设计，只是设计关于Ext UI部分的内容。

本文的目标是在我构建的窗体上加入几项视觉任务：

  • 当右击联系人TreeView的“熟人”节点时，出现“编辑熟人列表"和“改变布局”。
  • 当任何联系人节点被右击时，出现“发送即时讯息”、“发送邮件讯息”和“加入熟人列表几项”。

完成的时候应该会是这样的：

   

用Ext.Action类代替菜单的处理函数

“编辑熟人列表 Edit favorites” 和“改变布局 Change favorites layout ”这两项功能，对应的功能就是在它们的 Ext.Action实例中。我定义其 tex 以及 handler 两个配置项在对应设置菜单项的 text 文本和 handler 函数。

var editFavAction = new Ext.Action({ text: 'Edit favorites',
handler: function() {
Ext.Msg.alert('Action executed', 'Edit favorites...');
}
});
var changeFavAction = new Ext.Action({
text: 'Change favorites layout',
handler: function() {
Ext.Msg.alert('Action executed', 'Change favorites layout...');
}
});
var favMenu = new Ext.menu.Menu({
items: [editFavAction, changeFavAction]
});

favMenu 菜单就会像这样：

同样的套路，Action 的实例也的实例也可执行“发送即时讯息 Send instant message ”、“发送邮件讯息 Send instant message ”和“加入熟人列表 Send instant message ”的功能：

var sendImAction = new Ext.Action({ text: 'Send instant message',
handler: function() {
Ext.Msg.alert('Action executed', 'Send instant message...');
}
});
var sendMailAction = new Ext.Action({
text: 'Send email message',
handler: function() {
Ext.Msg.alert('Action executed', 'Send email message...');
}
});
var addToFavesAction = new Ext.Action({
text: 'Add to favorites',
handler: function() {
Ext.Msg.alert('Action executed', 'Add to favorites...');
}
});
var contactMenu = new Ext.menu.Menu({
items: [sendImAction, sendMailAction, '-', addToFavesAction]
});

contactMenu 菜单就会这样：

Action 之目的在于允许不同的组件之间均使用同一个 Action，共享这个 Action 的各项功能。尽管在这个例子中不是太明显，但在以后的例子就不一定用不上。假设一个例子，全局菜单有某一菜单项，右键菜单中又会有同样的菜单项，那么就可以把这菜单项的功能独立出来，甚至在其他的地方不断复用。

var globalMenu = new Ext.menu.Menu({
items: [editFavAction, changeFavAction,'-',
sendImAction, sendMailAction,'-', addToFavesAction]
});

创建 Ext.tree.TreePanel 实例的右键菜单

树面板为我们提供了 contextmenu 事件，触发该事件换言之是出现“编辑熟人列表 Edit favorites "和“改变布局 Change favorites layout ”的菜单。要决定哪一种菜单会被显示，我们只需要检查一下所选节点的 id：

listeners: {
contextmenu: function(node, e) {
node.select();
var contextMenu;
if (node.id == 'favorites') {
contextMenu = favMenu;
} else if (node.id != 'available' && node.id != 'offline') {
contextMenu = contactMenu;
}
if (contextMenu) {
contextMenu.contextNode = node;
contextMenu.showAt(e.getXY());
}
}
}

请注意Available 或 Offline 分支被选取的时候，哪个菜单的不活动的。

 

最后，下面给出网友制作的聊天 Session “对话框”，作为 UI 的补充。

 

完整的代码下载：

http://miamicoder.com/file.axd?file=ExtJs_Messenger_Layout_1.zip

http://miamicoder.com/file.axd?file=ExtJs_Messenger_Layout_2.zip

时间： 2025-01-27 17:59:45

创建 MSN 界面式的 Ext JS 布局的相关文章

Ext JS 4官方文档之三 -- 类体系概述与实践_基础知识

Ext JS 4从底层对类体系进行了重构,这是Ext JS历史上的第一次对类体系的巨大重构.新的架构几乎被应用到每一个Ext JS 4的类中,所以希望您在开始编码前能对它有一定的了解,这是非常重要的. 这篇手册适用于任何想创建新类或者继承Ext JS 4中现存类的开发人员,分为4部分: 第一部分: "概述" -- 解释了创建一个强健的类体系的必要性 第二部分: "命名规范" -- 讨论了对类.方法.属性.变量和文件的最佳命名规范 第三部分: "实践&quo

Ext JS动态加载JavaScript创建窗体的方法_javascript技巧

JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS来说明如何从服务器上动态加载JS脚本来动态创建窗体.  1 项目结构: 项目结构如下:其中GetJSUI一般处理程序用来从数据库表中抓取UI配置,并返回到客户端:Contents文件夹下用HTML文件和JS库等.  2 数据库表结构可以用下面的SQL在MSSQL中创建表,其中JavaScriptCo

《Ext JS 4 First Look》翻译之三：布局

第三章 布局      布局用于定义容器如何组织内部子元素和控制子元素的大小.在一个应用程序中,作为定义容器的组织形式,布局是一个十分重要的组件.是显示单个子元素?还 是垂直或水平显示多个子元素?这些均由布局来定义.并且布局将占用应用程序大部分的呈现时间.Extjs4中对布局进行了重大的修整.下面我们将学习并熟 悉Extjs中的布局. 本章目录如下: 3.1. Extjs 4 布局 3.2. Container布局 3.2.1. Auto布局 3.2.2. Anchor布局 3.2.3. Abs

Ext JS 4 Beta2发布 用于创建前端用户界面

ExtJS是一种主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架.功能丰富,无人能出其右.无论是界面之美,还是功能之强,ext的表格控件都高居榜首. 单选行,多选行,高亮显示选中的行,推拽改变列宽度,按列排序,这些基本功能咱们就不提了. 自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能.再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间拖拽一或多行

Ext JS v4.0.1发布 用于创建前端用户界面

ExtJS是一种主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架.功能丰富,无人能出其右.无论是界面之美,还是功能之强,ext的表格控件都高居榜首.单选行,多选行,高亮显示选中的行,推拽改变列宽度,按列排序,这些基本功能咱们就不提了. 自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能.再加上可编辑grid,添加新行,删除一或多行,提示多行数据,推拽改变grid大小,grid之间拖拽一或多行

《Ext JS实战》——第1章 独特的框架 1.1 认识Ext JS

第一部分 Ext JS介绍 欢迎阅读<Ext JS实战>,本书是对Ext JS世界的深度之旅.在本书中,不仅要学习如何利用Ext JS框架完成各种任务,还会学习构成框架的各种组件和部件之间的差异. 通过第1章到第3章的学习,我们能够对框架的基础部分有必要的理解.我们的旅途从第1章正式起航,在第1章会学习框架的基础知识.第2章是"热身"章,会了解一些能让应用程序正确运行的关键要素.第3章会涉及框架的一些内部机制,例如组件模型和容器模型. 学完这一部分后,就可以探索Ext JS

《Ext JS权威指南》——1.1节学习Ext JS必需的基础知识

1.1 学习Ext JS必需的基础知识 1. JavaScript 嗯,这个还用说吗?Ext JS本来就是一个JavaScript的框架,而且使用Ext JS就需要使用JavaScript语法来开发,需要JavaScript的知识是必然的了.问题的关键是,开发人员对JavaScript知识的掌握也有深浅之分.譬如,我碰到一些开发人员,对JavaScript算是很熟悉了,但是不会JSON,不会直接使用JSON对象,在使用Ext JS的过程中,需要使用JSON对象的时候,居然是通过组装字符串的方式,

《Ext JS权威指南》——2.7节Ext JS 4语法

2.7 Ext JS 4语法 1.配置对象 Ext JS的基本语法就是使用树状的配置对象来定义界面,其格式如下: { config_options1:value1, config_options1:value2, - config_optionsn:valuen, layout:{}, items:[ {},//配置对象 {}//配置对象 - ], listeners:{ //定义事件(根据需要而定) click:function(){}, dblclick:function(){} - } }

《Ext JS实战》——导读

**前言**Ext(读作Eee-ecks-tee)JS 3.0是一个功能强大的UI框架,可以构造丰富.健壮的跨浏览器应用,它最初是由Jack Slocum在2006年开发出来的.从那时起,Ext JS就经历了一个爆炸性的增长,因为它满足了Web开发人员对于一个真正的.有完整的组件和事件模型的UI框架的需要.这也使得它在竞争激烈的Web 2.0库领域独树一帜. 本书会带你对框架进行深度探索,会通过大大小小的例子演示Ext JS的高效使用方法.而且本书还使用了许多手绘的插图帮你加快学习的速度. Ex