简易基于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'); 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'); 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; } else if (document.layers) {return document.layers; }} 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" > <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. * licensing@extjs.com ** 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);
页:
[1]