www.gusucode.com > 一个基于extjs的强大聊天插件源码程序 > 一个基于extjs的强大聊天插件/extjame/ext-jame/js/ext-jame/ui/ChatDialog.js
/** /** * Licence : GPL * Author : Robert Schönthal * Date : 16.08.2007 */ /** * @class ExtJame.ui.ChatDialog * @description provides a dialog, which is able to store Chats (ChatForms) in Tabs, you can drop buddy on it for new chats */ ExtJame.ui.ChatDialog = function(_opener, _config, _jid){ var extDialog = null; var config = _config; var opener = _opener; var dd = null; var jid = _jid; /** * @method createDialog * @private * @description creates the Ext Dialog and appends it to the parent element (opener) */ var createDialog = function(){ extDialog = new Ext.Window({ title:"ChatDialog", width:530, height:400, closable:true, collapsible:true, layout:'fit', items: [{ xtype:'tabpanel', border:false, animScroll:true, autoScroll:true, enableTabScroll:true, layoutOnTabChange:true }] }); extDialog.getComponent(0).on("tabchange", tabChange,extDialog.getComponent(0)); extDialog.setTitle(jid); extDialog.on("destroy", removeChats); addPanel(extDialog.getComponent(0),jid); extDialog.show(opener); //panel.getComponent(1).findByType("htmleditor")[0].toggleSourceEdit(true); tabpanel = extDialog.getComponent(0); dd = new Ext.dd.DropTarget(tabpanel.getId(),{ ddGroup:"buddys", parent:extDialog.getId(), notifyDrop : pushPanel }); extDialog.doLayout(); } /** * @method closeTab * @private * @description removes a tab from the dialog */ var closeTab = function(e){ Ext.ComponentMgr.unregister(e); if(extDialog.getComponent(0).items.getCount() == 0){ extDialog.close(); } } /** * @method removeChats * @private * @description removes all chats, if window is closed */ var removeChats = function(){ extDialog.getComponent(0).items.each(function(item,index,length){Ext.ComponentMgr.unregister(item);return true;}) } /** * @method tabChange * @private * @description changes the dialogs title (title of active tab) */ var tabChange = function(e){ extDialog.setTitle(e.getActiveTab().title); } /** * * */ var pullResponse = function(){ var d = new Date(); var ts = d.getHours()+":"+d.getMinutes(); var myText = "<b style='color:blue;'>["+ExtJame.myJid+" "+ts+"]</b> "+this.ownerCt.form.items.items[0].getValue()+"<br/>"; this.ownerCt.ownerCt.getComponent(0).body.insertHtml("beforeEnd",myText); this.ownerCt.form.items.items[0].reset(); p = this.ownerCt.ownerCt.getComponent(0); //p.getEl().scroll("bottom",p.getEl().getY() - p.getEl().dom.scrollTop,true) } /** * @method submit * @private * @description submits a form */ var submit = function(el,event,d){ try{ if(event.ENTER){ el.ownerCt.form.submit({ reset:false, scope: this, success : pullResponse }); }else if(el.text){ el.ownerCt.form.submit({ reset:false, scope: this, success : pullResponse }); } }catch(e){ //TODO } } /** * trigger a panel add from drag */ var pushPanel = function(dd,e,data){ var jid = data.node.attributes.jid; tabpanel = Ext.WindowMgr.get(dd.cachedTarget.parent).getComponent(0); addPanel(tabpanel,jid); } /** * create new Panel */ var createPanel = function(jid){ return new Ext.Panel({ id:jid, title:ExtJame.factory.cutJid(jid), parent:extDialog.getId(), closable:true, border:false, layout:'border', iconCls : '', items:[{ region:'center', border:0, height:150, xtype:'panel', autoScroll : true, border:false, layout:'fit', bodyStyle:'padding:10px;' },{ region:'south', minHeight:150, split:true, xtype:'form', border:false, hideLabels:true, bodyStyle:'background:transparent;', height:150, method:'POST', url:ExtJame.backend.url.sendmessage, items:[{ xtype:'htmleditor', fieldLabel: '', name: 'body', allowBlank:false, anchor:'0-50', border:false },{ xtype:'hidden', fieldLabel: '', name: 'to', value:jid, allowBlank:false } ], buttons:[{ text:"Send", handler:submit }] }] }); } /** * @method addPanel * @private * @description adds a tab to the dialog (creates a ChatForm) */ var addPanel = function(tabpanel,jid){ if(!Ext.ComponentMgr.get(jid)){ var chatPanel = createPanel(jid); if(ExtJame.roster && ExtJame.roster.getBuddy(jid)) chatPanel.setIconClass(ExtJame.roster.getBuddy(jid).attributes.status); else chatPanel.setIconClass("unavailable"); tabpanel.add(chatPanel); Ext.ComponentMgr.register(chatPanel); tabpanel.activate(chatPanel.id); extDialog.doLayout(); //events chatPanel.on("destroy", closeTab,chatPanel); //chatPanel.getComponent(1).findByType("htmleditor")[0].on("specialkey",submit,item); //chatPanel.getComponent(1).findByType("htmleditor")[0].toggleSourceEdit(true); tabpanel.doLayout(); }else{ var pDlg = Ext.ComponentMgr.get(jid).parent; Ext.WindowMgr.get(pDlg).show(); Ext.WindowMgr.get(pDlg).getComponent(0).activate(jid); } } return { /** * @method init * @public * @description initializes the dialog */ init : function(){ if(!extDialog) createDialog(); else extDialog.show(); } } }