简易基于Ext留言板源码

kongshanxuelin

浏览: 926954 次
性别:
来自: 宁波

最近访客更多访客>>

norrain

wangenbao1

akingde

newer_fisher

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

完整代码

EXT CSS fckeditor BBS JavaScript

以前接私活的时候给医院做个网站，搞了个基于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.
 * 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);

查看图片附件

分享到：

通用DbGrid的设计与实现 | 环岛路闲想

2008-09-19 13:15
浏览 2701
评论(1)
论坛回复 / 浏览 (-1 / 4429)
分类:Web前端
查看更多

1 楼 myclover 2009-03-19

强顶一个哈

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

简易基于Ext留言板源码

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

简易基于Ext留言板源码

评论

发表评论

相关推荐

自定义表单的设计与实现

高性能高可用的服务端研究之Req-Rep模式（附源码）

也说企业应用中的公式管理功能

大学时光的陈年旧作：代码收集软件

好用的复选树源码改进版

Apache 2.2.x+Tomcat6集群配置备忘

校内应用API开发源码

网页划词自动翻译的实现

抓取百度Top500歌曲以及地址源码

灰色模型预测算法源码

AS 3.0语言的魅力（12月1日更新例子）

通用各类文档读写的设计与实现

Web上传文件在线压缩的实现

在Java调用VB编写的Dll文件

图论—深度优先和广度优先算法源码

即时通信XMPP协议示例程序（可与QQ,MSN等互通）

使用Substance制作漂亮的swing皮肤(附源码)

Java加密算法汇总

网站全文检索的实现（基于lucene 2.0）

Google API代码

最近访客更多访客>>