简易基于Ext留言板源码
以前接私活的时候给医院做个网站，搞了个基于Ext的小论坛，但后来感觉这东西比较笨重，灵活性也一般，后来的项目中基本上都选用的JQuery，一用就喜欢上他了，倒没有做广告的意思（其实JQuery框架不用我做广告，Google都用它，呵呵），不过JQuery真是太好用了，而且Plugin也很多，这里给出Ext的代码先，初学的，代码写得很乱，大家凑合着参考吧！
JSP页面代码：
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ page import="blogcn.common.StrCharUtil"%>
<%@ page import="blogcn.epdsm.common.User"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<%
String cateid=StrCharUtil.formatNullStr(request.getParameter("tid"));
User userInfo = (User) request.getSession().getAttribute("user");
%>
<script>
var GCATEID="<%=cateid%>";
var loginDialog;
</script>
<title></title>
<link rel="stylesheet" type="text/css" href="/hms/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/hms/css/post.css" />
<link rel="stylesheet" type="text/css" id="themeCSS" href="/hms/resources/css/xtheme-aero.css" />
<!-- GC --> <!-- LIBS -->
<script type="text/javascript" src="/hms/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="/hms/adapter/ext/example.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="/hms/js/ext/ext-all.js"></script>
<script type="text/javascript" src="/hms/js/ext/paging.js"></script>
<script type="text/javascript" src="/hms/js/ext/bbs.js"></script>
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
#header{
background: url(extimages/header-bar.gif) repeat-x bottom;
border-bottom: 1px solid #083772;
padding:5px 4px;
}
#footer{
background: url(extimages/header-bar.gif) repeat-x bottom;
border-top: 1px solid #083772;
padding:2px 4px;
color:white;
font:normal 8pt arial,helvetica;
}
#nav {
}
#nav, #inner1, #inner2 {
padding:10px;
}
#content p {
margin:5px;
}
#nav li {
padding:2px;
padding-left:10px;
background-image:url(extimages/bullet.gif);
background-position: -3px 6px;
background-repeat: no-repeat;
font-size:8pt;
display: block;
}
.x-layout-panel-north, .x-layout-panel-south, #content .x-layout-panel-center{
border:0px none;
}
#content .x-layout-panel-south{
border-top:1px solid #aca899;
}
#content .x-layout-panel-center{
border-bottom:1px solid #aca899;
}
#loading_container{width:350px;height:135px;margin:0px auto;}
#loading_header{width:350px;height:28px;background:url(/hms/extimages/top_title.gif);color:#fff;font-weight:bold;line-height:30px;}
#loading_main{border:1px solid #608599;border-top:none;width:348px;height:106px;background:url(/hms/extimages/bg_line.gif);}
#loading_gif{float:left;width:39px;height:39px;margin-top:30px!important;margin-top:20px;margin-left:60px!important;margin-left:30px;}
.loading_content{float:right;width:150px;height:40px;margin-right:70px!important;margin-right:35px;margin-top:30px!important;margin-top:20px;color:#245B96;line-height:22px;}
.loading_content a:link,.loading_content a:visited,.loading_content a:active{
color: #95ADC3;text-decoration: none;
}
.loading_content a:hover{
color: #95ADC3;
text-decoration:underline
}
</style>
<script type="text/javascript">
document.onreadystatechange=function(){
if(document.readyState=="complete"){
document.getElementById("loading").style.display="none";
}
}
//容器管理
BbsLayout = function(){
return {
init : function(){
var layout = new Ext.BorderLayout(document.body, {
west: {
split:true,
initialSize: 200,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 400
},
center: {
autoScroll: false
}
});
layout.beginUpdate();
layout.add('west', new Ext.ContentPanel('nav', {title: '检验之家栏目', fitToFrame:true, closable:false}));
var innerLayout = new Ext.BorderLayout('content', {
south: {
split:true,
initialSize: 200,
minSize: 100,
maxSize: 400,
autoScroll:true,
collapsible:true,
titlebar: true
},
center: {
autoScroll:true
}
});
innerLayout.add('south', new Ext.ContentPanel('inner1', "内容预览"));
innerLayout.add('center', new Ext.ContentPanel('inner2'));
layout.add('center', new Ext.NestedLayoutPanel(innerLayout));
layout.endUpdate();
}
};
}();
Ext.EventManager.onDocumentReady(BbsLayout.init, BbsLayout, true);
function initStyle(){
if(/stylesheet=([^;]+)/.test(document.cookie))
{
getObject("themeCSS").href=unescape(RegExp.$1);
alert(RegExp.$1);
}
}
</script>
<script>
//菜单管理
Ext.onReady(function(){
var menu = new Ext.menu.Menu({
id: 'mainMenu',
items: [
new Ext.menu.CheckItem({
text: '天际蓝',
checked: true,
group: 'theme',
checkHandler: onChangeTheme
}),
new Ext.menu.CheckItem({
text: 'Vista风格',
group: 'theme',
checkHandler: onChangeTheme
}),
new Ext.menu.CheckItem({
text: '银灰主题',
group: 'theme',
checkHandler: onChangeTheme
})
]
});
var tb = new Ext.Toolbar('toolbar',[{text:'发表新帖',type:'button',tooltip: '可以在选定的栏目下发表内容',handler:openBBSDialog}],{menuAlign:'tr-br'});
tb.add({
text:"删除帖子",
type:"button",
tooltip:"删除选中的帖子",
handler:delBBSTopic
});
tb.addSeparator();
tb.add({
text:"风格切换",
menu: menu
});
tb.addSeparator();
var curuserno='<%=userInfo==null?"":("欢迎您："+userInfo.getUserno())%>';
var btntip=curuserno==""?"重新登录":("重新登录[目前登录用户："+curuserno+"]");
tb.add({
text:btntip,
type:"button",
handler:loginBtnHandle
});
tb.addSeparator();
tb.add({
text:"<img src='/hms/extimages/warning.gif'><b>点击帖子标题可预览内容，双击帖子可回复该帖子<b>",
disabled:true
});
function loginBtnHandle()
{
if(typeof(loginDialog)=="undefined")
{
loginDialog = new Ext.BasicDialog("login-dlg", {
width:290,
height:200,
autoTabs:false,
resizable:false,
shadow:false
});
var loginIt=function(){
var uname=Ext.get("txtUsername").getValue(false);
var upass=Ext.get("txtUserpass").getValue(false);
//远程登录
var success = function(o){
try{
var xml = o.responseXML;
var msg = xml.getElementsByTagName('msg')[0];
msg=unescape(msg.firstChild.data);
if(msg.indexOf("[错误提示]")>=0){
Ext.MessageBox.alert('系统提示', msg);
}else{
Ext.MessageBox.alert('系统提示', msg);
location.reload();
}
}catch(e){
Ext.MessageBox.alert('系统出错提示', "操作不成功，请检查您的网络环境");
}
}.createDelegate(this);
var failure = function(o){
Ext.MessageBox.alert('系统出错提示', "操作不成功，请检查您的网络环境");
};
Ext.lib.Ajax.request('POST', '/hms/servlet/BbsServlet?act=login',
{success:success, failure:failure}, 'u='+uname+'&p='+upass);
}
loginDialog.addKeyListener(27, loginDialog.hide, loginDialog);
postBtn = loginDialog.addButton('登录', loginIt, this);
loginDialog.addButton('取消', loginDialog.hide, loginDialog);
}
loginDialog.show("toolbar");
}
function openBBSDialog()
{
if(BBS.dialog==null)
{
BBS.init();
}
BBS.openDialog();
}
function delBBSTopic()
{
if(G_TOPICGRID.getSelectionModel().getSelected()==null)
{
Ext.MessageBox.alert('系统出错提示', '请先选中其中一个帖子！');
}else{
var tid=G_TOPICGRID.getSelectionModel().getSelected().get('tid');
var success = function(o){
try{
var xml = o.responseXML;
var msg = xml.getElementsByTagName('msg')[0];
msg=unescape(msg.firstChild.data);
if(msg.indexOf("[错误提示]")>=0){
Ext.MessageBox.alert('系统出错提示', msg);
}else{
G_TOPICGRID.getDataSource().reload();
}
}catch(e){
Ext.MessageBox.alert('系统出错提示', "操作不成功，请检查您的网络环境");
}
}.createDelegate(this);
var failure = function(o){
Ext.MessageBox.alert('系统出错提示', "操作不成功，请检查您的网络环境");
};
Ext.lib.Ajax.request('POST', '/hms/servlet/BbsServlet?act=delbbs',
{success:success, failure:failure}, 'tid='+tid);
}
}
function getObject(elementId) { //获取指定id的object
if (document.getElementById) {
return document.getElementById(elementId);
} else if (document.all) {
return document.all[elementId];
} else if (document.layers) {
return document.layers[elementId];
}
}
function onChangeTheme(item, checked)
{
if(checked){
var stylesheet;
if(item.text=="Vista风格")
stylesheet=getObject("themeCSS").href="/hms/resources/css/xtheme-vista.css";
else if(item.text=="银灰主题")
stylesheet=getObject("themeCSS").href="/hms/resources/css/xtheme-gray.css";
else
stylesheet=getObject("themeCSS").href="/hms/resources/css/xtheme-aero.css";
document.cookie="stylesheet="+escape(stylesheet);
}
}
});
function clickme(tid)
{
var success = function(o){
try{
var val = o.responseText;
Ext.get("inner1").update(unescape(val));
}catch(e){
Ext.MessageBox.alert('系统出错提示', '数据库查询中遇到问题，请联系管理员！');
}
}.createDelegate(this);
var failure = function(o){
Ext.MessageBox.alert('系统出错提示', '连接异常或超时，请重试，多次重试不成功，请管理管理员！');
};
Ext.lib.Ajax.request('POST', '/hms/servlet/BbsServlet?act=getbbsdtl&tid='+tid,
{success:success, failure:failure}, '');
}
</script>
</head>
<body>
<div id="loading"
style="width:800px;height:524px; margin-top:180px;">
<div id="loading_container">
<div id="loading_header">
欢迎进入检验之家
</div>
<div id="loading_main">
<div id="loading_gif">
<img src="/hms/extimages/no_2.gif" />
</div>
<div class="loading_content">
正在加载数据，请稍候...
</div>
</div>
</div>
</div>
<div id ="container">
<div id="nav" class="x-layout-inactive-content" style="line-height:25px;background-image: url(images/bg.gif);background-repeat:repeat-x;">
</div>
<div id="content" class="x-layout-inactive-content">
</div>
<div id="inner1" class="x-layout-inactive-content">
</div>
<div id="inner2" class="x-layout-inactive-content">
<div id="container">
<div id="toolbar"></div>
</div>
<div style="width:100%" class="x-box">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc" style="background-image: url(images/bg.gif);background-repeat:repeat-x;">
<h3 style="margin-bottom:5px;">检验之家</h3>
<div id="topic-grid" style="border:1px solid #99bbe8;overflow: hidden; width: 690px; height: 320px;position:relative;left:0;top:0;">
</div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</div>
</div>
<!-- bbs dialog -->
<div id="bbs-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">发布</div>
<div class="x-dlg-bd">
<div class="x-dlg-tab" title="新增帖子">
<div class="inner-tab">
<form action="" method="post" id="bbs-form" onsubmit="return false;">
<input id="act" type="hidden" name="act" value="add" />
<p><label for="url"><small>标题</small></label>
<input class="textinput" type="text" name="title" id="title" value="" size="22" tabindex="3" />
</p>
<p>
<label><small>内容</small></label>
<script type="text/javascript">
<!--
var sBasePath = 'fckeditor/';
var oFCKeditor = new FCKeditor('company_notes' ) ;
oFCKeditor.BasePath = sBasePath ;
oFCKeditor.Value = '';
oFCKeditor.Height = 340 ;
oFCKeditor.Width = 760 ;
oFCKeditor.ToolbarSet='jianyan';
var init="";
oFCKeditor.Value=init;
oFCKeditor.Create() ;
//-->
</script>
</p>
</form>
</div>
</div>
</div>
<div class="x-dlg-ft">
<div id="dlg-msg">
<span id="post-error" class="posting-msg"><img src="images/warning.gif" width="16" height="16" align="absmiddle" /> <span id="post-error-msg"></span></span>
<span id="post-wait" class="posting-msg"><img src="../../images/grid/loading.gif" width="16" height="16" align="absmiddle" /> 发布中...</span>
</div>
</div>
</div>
<div id="login-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">用户登录</div>
<div class="x-dlg-bd">
<div class="x-dlg-tab" title="Hello World 1">
<div class="inner-tab">
<br/><br/>
用户名：
<input type="text" name="txtUsername" id="txtUsername" class="x-form-text"/>
<br/><br/><br/>
密 码：
<input type="password" name="txtUserpass" id="txtUserpass" class="x-form-text"/>
</div>
</div>
</div>
</div>
</body>
</html>
<% if(userInfo==null){ %>
<script>
Ext.MessageBox.alert('系统出错提示', '很抱歉，您还没有登录不能使用本论坛,页面将自动转到首页!',MyshowResult);
function MyshowResult(btn){
location.href="/hms/login.do";
}
</script>
<%}%>
Ext代码：
/* * Ext JS Library 1.1 * Copyright(c) 2006-2007, Ext JS, LLC. * [email protected] * * http://www.extjs.com/license */ var BBS = function(){ var dialog; var postBtn; var wait, error, errorMsg; var btitle,bcontent; return { init : function(){ wait = Ext.get('post-wait'); error = Ext.get('post-error'); btitle = Ext.get('title'); bcontent = Ext.get('content'); errorMsg = Ext.get('post-error-msg'); this.createDialog(); }, submitBBS : function(){ postBtn.disable(); var bbsSuccess = function(o){ postBtn.enable(); var data = o.responseText; if(data.indexOf("error")>=0) Ext.MessageBox.alert('系统出错提示', '登录超时，请重新登录！', showResult); else { G_TOPICGRID.getDataSource().reload(); dialog.hide(); } //location.reload(); }; var bbsFailure = function(o){ postBtn.enable(); Ext.MessageBox.alert('系统出错提示', '连接异常或超时，请重试，多次重试不成功，请管理管理员！', showResult); }; function showResult(btn){ }; var ttl=btitle.getValue(false); //取得FCKEDITOR内容 var FCK = FCKeditorAPI.GetInstance("company_notes"); var tcont=FCK.GetXHTML(); //var tcont=bcontent.getValue(false); var tact=Ext.get('act').getValue(false); var turi='title='+encodeURIComponent(ttl)+'&content='+encodeURIComponent(tcont)+'&act='+tact+'&cateid='+GCATEID; Ext.lib.Ajax.request('POST', '/hms/servlet/BbsServlet', {success:bbsSuccess, failure:bbsFailure}, turi); }, createDialog: function(){ dialog = new Ext.BasicDialog("bbs-dlg", { autoTabs:true, width:800, height:520, resizable:false, shadow:false }); dialog.addKeyListener(27, dialog.hide, dialog); postBtn = dialog.addButton('确认发表', this.submitBBS, this); dialog.addButton('取消发布', dialog.hide, dialog); dialog.on('hide', function(){ wait.removeClass('active-msg'); error.removeClass('active-msg'); }); }, openDialog:function(){ dialog.show("toolbar"); } }; }(); Ext.EventManager.onDocumentReady(BBS.init,BBS, true);