创建 MSN 界面式的 Ext JS 布局

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

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

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

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

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

Ext JS tutorial

样子好像有点熟悉吧?:-)

好的,马上开工!

通讯器窗体

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

截图如下:

messenger-4

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

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

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

看起来还不错吧!?

messenger-5

用户改变其状态

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

结果如下:

messenger-6

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

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

messenger-7

 

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

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

菜单效果如下:

messenger-8

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

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

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

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

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

Ext JS window

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

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

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

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

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

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

 ExtJS layout   Ext JS window

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

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

favMenu 菜单就会像这样:

ext js tutorial favorites menu

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

contactMenu 菜单就会这样:

extjs tutorial contact menu

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

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

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

请注意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

目录
相关文章
用html+javascript打造公文一键排版系统1:设计界面
用html+javascript打造公文一键排版系统1:设计界面
|
1月前
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
90 33
|
2月前
Next.js 实战 (二):搭建 Layouts 基础排版布局
本文介绍了作者在Next.js v15.x版本发布后,对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择(最终选择了Ant-Design)、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果,并提供了GitHub仓库链接供读者参考学习。
Next.js 实战 (二):搭建 Layouts 基础排版布局
|
3月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
197 8
|
9月前
|
存储 JavaScript 前端开发
使用Vue.js构建交互式前端界面的技术探索
【5月更文挑战第20天】Vue.js是一款渐进式JavaScript框架,擅长构建交互式前端界面。其核心特性包括响应式数据绑定、组件化开发、指令系统和虚拟DOM,简化开发并提升性能。通过Vue CLI创建项目,拆分组件,结合数据绑定和事件处理实现交互,使用Vue Router管理路由,Vuex进行状态管理,能高效构建现代Web应用。
|
8月前
|
Web App开发 前端开发 JavaScript
技术心得记录:瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
技术心得记录:瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
88 0
|
4月前
|
JavaScript 前端开发 容器
js之弹性布局使用方法
js之弹性布局使用方法
50 0
|
5月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
6月前
|
JavaScript 前端开发 容器
js之弹性布局使用方法
js之弹性布局使用方法
87 0
|
7月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    49
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    57