转 ext Demo

下面这个是主界面的设计

Ext.onReady(function() { 
Ext.QuickTips.init(); 
Ext.BLANK_IMAGE_URL = 'ext/s.gif'; 
// ---------------------------------------------好友列表树 
var Tree = Ext.tree; 
// 定义（可以异步加载）根节点 
var root = new Tree.AsyncTreeNode({ 
id : '0', 
text : '目录根节点' 
}); 
// 开始构建树面板 
var treePanel = new Tree.TreePanel({ 
id : 'im-tree', 
root : root, 
loader : new Tree.TreeLoader({ 
// 从数据库加载树形结构数据 
dataUrl : '/graduationPrj/treePro.action' 
}), 
deferredRender : false, 
region : 'west', 
title : '在线用户', 
border : false, 
rootVisible : false, 
lines : false, 
autoScroll : true, 
enableDD : false, 
animate : false, 
split : true, 
width : 200, 
minSize : 175, 
maxSize : 400, 
collapsible : false, 
selModel : new Ext.tree.MultiSelectionModel(), 
margins : '0 0 0 5' 
}); 

/** 
* @method expandAll 
* @private 
* @description 展开所有节点 
*/ 
var expandAll = function() { 
treePanel.root.expand(true, false); 
} 

/** 
* @method updateUserList 
* @private 
* @description 定时更新在线用户列表，刷新时间为10分钟 
*/ 
var updateUserList = function() { 
treePanel.root.reload(); 
treePanel.root.expand(true, false); 
setTimeout(updateUserList, 1000 * 10); 
} 

/** 
* @method treeDoubleClick 
* @private 
* @description 添加‘双击事件’处理 当双击节点时，弹出聊天对话框 
*/ 
var treeDoubleClick = function(node, e) { 
if (node.isLeaf()) { 
addOrOpenTab(node.text); 
} 
} 
treePanel.on('dblclick', treeDoubleClick); 


/** 
* @method treeDoubleClick 
* @private 
* @description 判断tab有没有存在，如果不存在添加新tab 
*/ 
var addOrOpenTab = function(nodeText) { 
var n = tabs.getComponent(nodeText); 
if (!n) { 
n = tabs.add({ 
'id' : nodeText, 
'title' : nodeText, 
layout : 'border', 
closable : true, 
items : [new Ext.Panel({ 
region : 'center', 
title : '聊天记录  ', 
autoScroll : true, 
html : '<div id=' + nodeText + 'div></div>', 
tools : [{ 
id : 'refresh', 
qtip : '注意：如果长时间没有收到对方回应，试一下', 
// hidden:true, 
handler : function(event, toolEl, panel) { 
// refresh logic 
} 
}] 
})] 
}); 
} 
tabs.setActiveTab(n); 
} 


// ---------------------------------------------公共聊天室 
var logPanel = new Ext.Panel({ 
region : 'center', 
title : '聊天记录  ', 
id : 'history_panel', 
autoScroll : true, 
html : '<div id=publicChat></div>', 
tools : [{ 
id : 'refresh', 
qtip : '注意：如果长时间没有收到对方回应，试一下', 
// hidden:true, 
handler : function(event, toolEl, panel) { 
// refresh logic 
} 
}] 
}); 
/** 
* @method treeDoubleClick 
* @private 
* @description 公用的输入文本框 
*/ 
var chatPanel = new Ext.Panel({ 
region : 'south', 
title : '聊天啦', 
layout : 'fit', 
// split:true, 
autoScroll : true, 
height : 250, 
// minSize: 200, 
// maxSize: 500, 
collapsible : true, 

margins : '0 0 0 0', 
items : { 
xtype : 'form', 
baseCls : 'x-plain', 
autoHeight : true, 
autoWidth : true, 
bodyStyle : 'padding:10 10px 0;', 
defaults : { 
anchor : '98%' 
}, 
items : [{ 
xtype : 'htmleditor', 
height : 150, 
id : 'htmleditor', 
hideLabel : true 
}] 
}, 
bbar : [{ 
text : '发送请输入Ctrl-Enter', 
handler : function() { 
var t = tabs.getActiveTab().getId(); 
if (t == 'allChat') { 
sendPublicMsg(); 
} else { 
sendPrivateMsg(); 
} 
} 
} 

, '-', { 
text : '清除', 
handler : function() { 
Ext.getCmp("htmleditor").reset(); 
} 
}] 
}); 

var allChatPanel = new Ext.Panel({ 
id : 'allChat', 
title : '公共聊天室', 
layout : 'border', 
items : [logPanel] 
}); 

/** 
* 构建标签面板，出现在主显示页面，用于显示信息 
*/ 
var tabs = new Ext.TabPanel({ 
region : 'center', 
deferredRender : false, 
id : 'tabs', 
resizeTabs : true, 
minTabWidth : 115, 
tabWidth : 135, 
height : 100, 
autoScroll : true, 
enableTabScroll : true, 
plugins : new Ext.ux.TabCloseMenu(), 
items : [allChatPanel] 
}); 
tabs.setActiveTab(allChatPanel); 

var sendPublicMsg = function() { 
var content_value = Ext.getCmp("htmleditor").getValue(); 
var t = tabs.getActiveTab().getId(); 
if (content_value.trim() == '') { 
Ext.Msg.alert("消息提示", "您没有输入消息文本内容！"); 
Ext.getCmp("htmleditor").focus(); 
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) { 
Ext.Msg.alert("消息提示", '您没有选择接收者！'); 
tree.focus(); 
return; 
} 
// alert(receivers_values.length); 
if (receivers_values.length > 1) { 
Ext.Msg.alert("消息提示", '只能选择一个接收者！'); 
tree.focus(); 
return; 
} 
document.getElementById('publicChat').innerHTML = t + '中的aaadasdasdasd'; 
} 

var sendPrivateMsg = function() { 
var content_value = Ext.getCmp("htmleditor").getValue(); 
var t = tabs.getActiveTab().getId(); 
if (content_value.trim() == '') { 
Ext.Msg.alert("消息提示", "您没有输入消息文本内容！"); 
Ext.getCmp("htmleditor").focus(); 
return; 
} 

document.getElementById(t + 'div').innerHTML = t + '中的aaadasdasdasd'; 
document.getElementById("publicChat").innerHTML = t + '中的aaadasdasdasd'; 
} 

/** 
* @method treeDoubleClick 
* @private 
* @description 主界面，添加各个元素 
*/ 

var viewport = new Ext.Viewport({ 
layout : 'border', 
items : [treePanel, { 
region : 'center', 
layout : 'border', 
autoScroll : true, 
items : [tabs, chatPanel] 
} 

] 
}); 
expandAll(); 
updateUserList(); 
}); 

// -------------------------------------------------------------------