- 浏览: 1466300 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
<filter> <filter-name>Set Character Encoding</filter-name> <filter-class>filters.SetCharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>GBK</param-value> </init-param> <init-param> <!-- Ajax important , charset=utf-8 其他都为gbk --> <param-name>ignore</param-name> <param-value>false</param-value> </init-param> </filter> <listener> <listener-class>hyjc.listener.CustomSessionListener</listener-class> </listener>
还是利用了 poll 的 方案 ,定时 刷新信息, 下一步打算利用长连接 来试试
生成了一个 Ext.window 就是聊天窗口了
Ext.onReady(function() { var chatWin = new Ext.Window({ width:800, height:500, title:'Ext聊天窗口测试版', renderTo:document.body, border :false, hidden :true, layout:'border', closeAction :'hide', collapsible :true, constrain :true, iconCls :'my-userCommentIcon', maximizable :true, items:[ { region:'west', id:'chat-west-panel', title:'用户面板', split:true, width: 170, minSize: 100, maxSize: 200, collapsible: true, constrain :true, //margins:'0 0 0 5', layout:'accordion', layoutConfig:{ animate:true }, items: [{ items: new Ext.tree.TreePanel({ id:'im-tree', rootVisible:false, lines:false, border :false, dataUrl: 'chat/updateChat.jsp', singleExpand :true, selModel:new Ext.tree.MultiSelectionModel(), root: new Ext.tree.AsyncTreeNode({ text:'Online', children:[{ text:'Sunrise', id:'SunriseIm', nodeType: 'async', singleClickExpand :true, expandable:true, expanded:true }] }) }) , title:'在线人员', //layout:'form', border:false, autoScroll:true, iconCls:'im_list', tools:[{ id:'refresh', qtip: '刷新在线信息', // hidden:true, handler: function(event, toolEl, panel) { reloadUser(); } }, { id:'close', qtip: '清除选定', // hidden:true, handler: function(event, toolEl, panel) { Ext.getCmp('im-tree').getSelectionModel().clearSelections(); } } ] },{ title:'Settings', html:'<p>Some settings in here.</p>', border:false, iconCls:'settings' }] }, { region:'center', layout:'border', items:[ { region:'center', title:'历史记录 ', id:'history_panel', autoScroll:true, iconCls :'my-userCommentIcon', tools:[{ id:'refresh', qtip: '注意:如果长时间没有收到对方回应,试一下', // hidden:true, handler: function(event, toolEl, panel) { // refresh logic } }] }, { region:'south', title:'聊天啦', layout:'fit', iconCls :'user_edit', autoScroll:true, height: 200, collapsible: true, //margins:'0 0 0 0', items:{ xtype:'form', baseCls: 'x-plain', autoHeight:true, autoWidth:true, bodyStyle: 'padding:10 10px 0;', defaults: { anchor: '95%' }, items:[ { xtype:'htmleditor', height:130, id:'htmleditor', hideLabel :true } ] } ,bbar :[{ text:'发送请输入Ctrl-Enter', handler:function() { sendmsg(); }, iconCls:'my-sendingIcon' } ,'-',{ text:'清除', handler:function() { Ext.getCmp("htmleditor").reset(); } } ] } ] } ] }); var query = location.search.substring(1);//获取查询串 var sessionId = SESSION;//Ext.urlDecode(query).sid; // 发送消息 function sendmsg() { Ext.getCmp("htmleditor").syncValue(); var content_value = Ext.getCmp("htmleditor").getValue(); if (content_value.trim() == '') { alert("您没有输入消息文本内容!"); Ext.getCmp("htmleditor").focus(true); return; } var receivers_values = []; var tree = Ext.getCmp('im-tree'); var receivers = tree.getSelectionModel().getSelectedNodes(); for (i = 0; i < receivers.length; ++i) { receivers_values.push(receivers[i].attributes.sessionId); } if (receivers_values.length == 0) { alert("您没有选择接收者!"); tree.focus(); return; } //alert(receivers_values.length); if (receivers_values.length > 1) { if (!confirm("您选择了多个接收者,是否继续?")) { return; } } var nickname_value = 'forget'; var pars = { "content":content_value, "receivers":"" + receivers_values, "sender":sessionId // "nickname":'forget' }; var conn = new Ext.data.Connection(); // 发送异步请求 conn.request({ // 请求地址 url: 'chat/sendmsg.jsp', method: 'post', params: pars, // 指定回调函数 callback: msgsent }); } function msgsent(options, success, response) { requestCount--; if (success) { try { var jsonObj = Ext.util.JSON.decode(response.responseText); } catch(e) { } if (jsonObj && jsonObj.success) { var cur = jsonObj.cur; var sessions = []; var c = node.childNodes; for (var i = 0; i < c.length; i++) { sessions[c[i].attributes.sessionId] = c[i].attributes; } if (cur) { var a = []; for (var j = 0; j < cur.receivers.length; j++) { a.push(sessions[cur.receivers[j]].loginName); } var msg = '<div style="margin:20px 5px 10px 5px"> <img src="js/ext/user_comment.png"/> {0} <b>{1}</b> 对 <b>{2}</b> 说:<br> </div>' ; var chat_record =new Ext.Element(document.createElement('div')); chat_record.addClass('chat_record'); chat_record.update('<span style="margin:0px 5px 0px 5px">'+cur.content+'</span>'); Ext.getCmp("history_panel").body.appendChild(chat_record); var canvas=new Ext.Element(document.createElement('canvas')); var size_chat=chat_record.getSize(); if(!Ext.isIE && size_chat.height < 100) { chat_record.setHeight(100); size_chat.height=100; } canvas.setSize(size_chat.width-30,size_chat.height); //canvas.setSize(size_chat.width-,40); chat_record.appendChild(canvas); if(window['G_vmlCanvasManager'] ) { G_vmlCanvasManager.initElement(canvas.dom); } draw_m(chat_record.dom.lastChild,'#FFB100'); var mc = String.format(msg, cur.time, sessions[cur.sender].loginName, a); Ext.getCmp("history_panel").body.insertHtml('beforeEnd', mc); Ext.getCmp("history_panel").body.scroll('b', 10000, { duration:0.1 }); } Ext.getCmp("htmleditor").reset(); } else if(response.result) alert(response.result); } else { if(response.responseText) alert(response.responseText); } } //event for source editing mode new Ext.KeyMap(Ext.getCmp("htmleditor").getEl(), [ { key: 13, ctrl:true, stopEvent :true, fn: sendmsg } ]); //event for normal mode Ext.getCmp("htmleditor").onEditorEvent = function(e) { this.updateToolbar(); var keyCode = (document.layers) ? keyStroke.which : e.keyCode; if (keyCode == 13 && e.ctrlKey) sendmsg(); //it'a my handler } var tree = Ext.getCmp('im-tree'); var node = tree.getNodeById('SunriseIm'); var requestCount = 0; function reloadUser() { if (requestCount == 10) { alert('服务器连接失败'); window.location = 'login.jsp'; return; } requestCount++; var conn = new Ext.data.Connection(); // 发送异步请求 conn.request({ // 请求地址 url: 'chat/updateChat.jsp', method: 'post', // 指定回调函数 callback: callback }); //回调函数 function callback(options, success, response) { requestCount--; if (success) { try { var jsonObj = Ext.util.JSON.decode(response.responseText); } catch(e) { } if (jsonObj) { var jsonNodes = jsonObj.nodes; var msgs = jsonObj.msgs; var cs = node.childNodes ; var nodes = {}; var sessions = {}; for (var i = 0; i < cs.length; i++) { nodes[cs[i].id] = cs[i]; } var user; for (var i = 0; i < jsonNodes.length; i++) { user = jsonNodes[i]; // alert(user.sessionId); sessions[user.sessionId] = user; if (nodes[user.id]) { nodes[user.id] = null; continue; } node.appendChild(user); } for (var id in nodes) { if (nodes[id]) node.removeChild(nodes[id]); } var msg = '<div style="margin:20px 5px 10px 5px"> <img src="js/ext/user_comment.png"/> {0} <b>{1}</b> 对 <b>{2}</b> 说:<br> </div>' ; if (msgs) { for (var i = 0; i < msgs.length; i++) { var a = []; for (var j = 0; j < msgs[i].receivers.length; j++) { a.push(sessions[msgs[i].receivers[j]].loginName); } var chat_record =new Ext.Element(document.createElement('div')); chat_record.addClass('chat_record'); chat_record.update('<span style="margin:0px 5px 0px 5px">'+msgs[i].content+'</span>'); Ext.getCmp("history_panel").body.appendChild(chat_record); var canvas=new Ext.Element(document.createElement('canvas')); var size_chat=chat_record.getSize(); if(!Ext.isIE && size_chat.height < 100) { chat_record.setHeight(100); size_chat.height=100; } canvas.setSize(size_chat.width-10,size_chat.height); //canvas.setSize(size_chat.width-,40); chat_record.appendChild(canvas); if(window['G_vmlCanvasManager'] ) { G_vmlCanvasManager.initElement(canvas.dom); } draw_m(chat_record.dom.lastChild,'#FFB100'); var mc = String.format(msg, msgs[i].time, sessions[msgs[i].sender].loginName, a); Ext.getCmp("history_panel").body.insertHtml('beforeEnd', mc); Ext.getCmp("history_panel").body.scroll('b', 10000, { duration:0.1 }); } if(!chatWin.isVisible()){ self.focus(); Ext.example.msg('叮当', '您有新的短消息 <a href="javascript:window.startChatWin()">查看</a>'); } } } else if(response.responseText) alert(response.responseText); } else { if(response.responseText) alert(response.responseText); } } } //chatWin.show(); //chatWin.setSize(0,0); //chatWin.hide(); if(!Ext.isIE) { chatWin.collapse(); } var chatTask = { run:reloadUser, //scope:this, interval: 5000 //1 second }; time_pro = new Ext.util.TaskRunner(); time_pro.start(chatTask); //chatWin.hide(); window.startChatWin = function (){ chatWin.show(); chatWin.center(); //Ext.getCmp('htmleditor').focus(); }; function draw_m(canvas,color){ var context = canvas.getContext("2d"); var width=canvas.width; var height2=canvas.height-4.5; var height=canvas.height; context.beginPath(); context.strokeStyle = color; context.moveTo(0.5,0.5+5); context.arc(5.5,5.5,5,-Math.PI,-Math.PI/2,false); context.lineTo(width-0.5-5,0.5); context.arc(width-0.5-5,5.5,5,-Math.PI/2,0,false); context.lineTo(width-0.5,height2-5); context.arc(width-0.5-5,height2-5,5,0,Math.PI/2,false); context.lineTo(width/2+3,height2); context.lineTo(width/2,height); context.lineTo(width/2-3,height2); context.lineTo(0.5+5,height2); context.arc(0.5+5,height2-5,5,Math.PI/2,Math.PI,false); context.lineTo(0.5,0.5+5); context.stroke(); } });
后台 见附件 ,主要是还要设一下 sessionListener
发表评论
-
Extjs 实践细节备忘 -3
2009-04-12 20:26 24311. dragdrop 继承层次 dd - ... -
Extjs 实践细节备忘 -2
2009-04-12 05:43 27511. grid 列宽问题 可以指定 每列的宽度数值 ... -
Extjs 实践细节备忘 -1
2009-04-11 01:47 2712在使用 extjs 开发 OAOP 应用中 ,除了API文档外 ... -
长字串换行问题
2009-03-01 23:10 5788很久没用过 ,textarea ... -
Extjs portal 应用初探
2009-02-24 23:09 6008近期在研究拖放的实现 ,看了看 Extjs 的 portal ... -
Extjs 模块化动态加载js实践
2009-01-09 18:12 23508前一段转载了一篇 透明加载外部 javascript ... -
Extjs 聊天窗口 -续3 用pushlet来实现
2008-12-23 22:16 16093前一篇 自己实现了http长连接 , 很繁琐,后 ... -
Extjs 聊天窗口 -续2 - http长连接的实现
2008-12-16 00:55 13335认为长连接就是有个http请求被服务器阻塞了 ,这样的话浏览 ... -
Extjs CRUD 模板
2008-12-12 00:52 7813也算是一个总结吧,备忘,总结了一个增删改查的例子,以后要达到的 ... -
Ext 树操作
2008-11-10 23:21 4504后台 树 节点 定义 menu_info { ... -
Ext 一个聊天窗口的设计
2008-11-10 00:26 37741.关键是要 弹性设计,自动适应浏览器 部件要: ... -
Ext.data.Store 与 GridFilters
2008-11-03 16:12 5367Store 每次 reload 会记着上次的参数,比如 pa ... -
Ext 实现 文件上传 进度显示
2008-10-24 18:15 5202利用了 ahxu-commons-fileuploadex-b ... -
Ext official doc - class-event-observer
2008-10-23 18:20 1440....ppt -
Ext 多文件上传面板扩展
2008-10-23 16:53 8381扩展了 Ext.Panel ,加入文件框列表 ,并控制删 ... -
Ext Grid 表头显示问题
2008-09-27 23:51 3344出现问题了,当 Grid div 放在 table 布局下的话 ... -
JSON marsh && unmarsh
2008-09-23 00:46 1988Ext 端用 //Encodes an Objec ... -
[extjs] formpanel 标准提交问题
2008-09-19 02:29 3338formpanel 的 标准提交 有 bug? var ta ... -
ComboBox 传值问题
2008-09-19 00:07 5299field -> textfield->trigg ... -
Ext 2 概述
2008-09-18 01:11 2300欢迎来到Ext 2.0。 在下列各章节中,你将会接触到E ...
相关推荐
ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0
bcprov-ext-jdk16-1.45.jar资源包 ,在进行JAVA的ECC椭圆算法调用时,需要用到的jar包
其中,“style-ext-html-webpack-plugin”是一个特别值得关注的插件,它专门针对HTML文件的内联样式进行了优化,以提高页面加载速度和用户体验。 **一、插件概述** “style-ext-html-webpack-plugin”是针对...
ext-3.3.1ext-3.3.1ext-3.3.1ext-3.3.1ext-3.3.1ext-3.3.1
ext-ms-win-gdi-desktop-l1-1-0.dll 用于解决这个dll文件丢失问题,下载后将此文件放置在相关文件根目录下,即可解决丢失问题
openwrt软路由
在这个主题中,我们将深入探讨如何在ExtJS中实现一个聊天窗口,并利用HTTP长连接(也称为持久连接或Keep-Alive连接)来实现实时通信。HTTP长连接是解决传统HTTP短连接频繁建立与关闭导致的性能问题的一种策略。 ...
ext-base ext-4.1.1a-commercial
ext+jsp分页---好不好,大家说了算。下载不扣分,回帖加1分,欢迎下载,童叟无欺。ext+jsp分页---好不好,大家说了算。下载不扣分,回帖加1分,欢迎下载,童叟无欺。ext+jsp分页---好不好,大家说了算。下载不扣分,...
spketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-...
官方版本,亲测可用
ext4magic-0.3.2-3.10.x86_64.rpm
bcprov-ext-jdk15-1.46.jar
EXT-4.0.2a-gpl.zip是一个包含EXT文件系统的源代码压缩包,它代表了EXT文件系统的一个特定版本,即4.0.2a。EXT,全称为Extended File System,是Linux操作系统中广泛使用的日志式文件系统之一。EXT-4.0.2a-gpl.zip的...
RSA加密算法,一个不错的包,我试过,可以用!
在“EXT 实现省份--城市--地区--级连”这个主题中,我们将探讨EXT如何用来实现多级联动选择的功能,如省份、城市、地区之间的级联选择。 在Web应用中,用户可能需要选择一个地理位置,通常是从国家到省份,再到城市...
bcprov-ext-jdk15on-146.jar
Extjs中实现国际化要用到的文件ext-lang-zh_CN.js和ext-lang-en.js
ExtDesigner-1.2.2-48破解版 超级好用