2010.04.11———Ext 之 从上淡入淡出的一个效果插件

2010.04.11———Ext 之 从上淡入淡出的一个效果插件

这个插件给人一种从浏览器上方，显示提示框，一种淡入淡出的感觉 很不错


examples.js

/*!
 * Ext JS Library 3.2.0
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * [email protected]
 * http://www.extjs.com/license
 */
Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif';

Ext.example = function(){
    var msgCt;

    function createBox(t, s){
        return ['<div class="msg">',
                '<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"><h3>', t, '</h3>', s, '</div></div></div>',
                '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',
                '</div>'].join('');
    }
    return {
        msg : function(title, format){
            if(!msgCt){
                msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
            }
            msgCt.alignTo(document, 't-t');
            var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
            var m = Ext.DomHelper.append(msgCt, {html:createBox(title, s)}, true);
            m.slideIn('t').pause(1).ghost("t", {remove:true});
        },

        init : function(){
            /*
            var t = Ext.get('exttheme');
            if(!t){ // run locally?
                return;
            }
            var theme = Cookies.get('exttheme') || 'aero';
            if(theme){
                t.dom.value = theme;
                Ext.getBody().addClass('x-'+theme);
            }
            t.on('change', function(){
                Cookies.set('exttheme', t.getValue());
                setTimeout(function(){
                    window.location.reload();
                }, 250);
            });*/

            var lb = Ext.get('lib-bar');
            if(lb){
                lb.show();
            }
        }
    };
}();

Ext.example.shortBogusMarkup = '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.';
Ext.example.bogusMarkup = '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.</p>';

Ext.onReady(Ext.example.init, Ext.example);


// old school cookie functions
var Cookies = {};
Cookies.set = function(name, value){
     var argv = arguments;
     var argc = arguments.length;
     var expires = (argc > 2) ? argv[2] : null;
     var path = (argc > 3) ? argv[3] : '/';
     var domain = (argc > 4) ? argv[4] : null;
     var secure = (argc > 5) ? argv[5] : false;
     document.cookie = name + "=" + escape (value) +
       ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
       ((path == null) ? "" : ("; path=" + path)) +
       ((domain == null) ? "" : ("; domain=" + domain)) +
       ((secure == true) ? "; secure" : "");
};

Cookies.get = function(name){
	var arg = name + "=";
	var alen = arg.length;
	var clen = document.cookie.length;
	var i = 0;
	var j = 0;
	while(i < clen){
		j = i + alen;
		if (document.cookie.substring(i, j) == arg)
			return Cookies.getCookieVal(j);
		i = document.cookie.indexOf(" ", i) + 1;
		if(i == 0)
			break;
	}
	return null;
};

Cookies.clear = function(name) {
  if(Cookies.get(name)){
    document.cookie = name + "=" +
    "; expires=Thu, 01-Jan-70 00:00:01 GMT";
  }
};

Cookies.getCookieVal = function(offset){
   var endstr = document.cookie.indexOf(";", offset);
   if(endstr == -1){
       endstr = document.cookie.length;
   }
   return unescape(document.cookie.substring(offset, endstr));
};

examples.css

/*!
 * Ext JS Library 3.2.0
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * [email protected]
 * http://www.extjs.com/license
 */
body {
	font-family:helvetica,tahoma,verdana,sans-serif;
	padding:20px;
    padding-top:32px;
    font-size:13px;
	background-color:#fff !important;
}
p {
	margin-bottom:15px;
}
h1 {
	font-size:large;
	margin-bottom:20px;
}
h2 {
	font-size:14px;
    color:#333;
    font-weight:bold;
    margin:10px 0;
}
.example-info{
	width:150px;
	border:1px solid #c3daf9;
	border-top:1px solid #DCEAFB;
	border-left:1px solid #DCEAFB;
	background:#ecf5fe url( info-bg.gif ) repeat-x;
	font-size:10px;
	padding:8px;
}
pre.code{
	background: #F8F8F8;
	border: 1px solid #e8e8e8;
	padding:10px;
	margin:10px;
	margin-left:0px;
	border-left:5px solid #e8e8e8;
	font-size: 12px !important;
	line-height:14px !important;
}
.msg .x-box-mc {
    font-size:14px;
}
#msg-div {
    position:absolute;
    left:35%;
    top:10px;
    width:250px;
    z-index:20000;
}
.x-grid3-row-body p {
    margin:5px 5px 10px 5px !important;
}

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <!-- ext-base.js必须在ext-all前面，不然，Ext无法识别 -->
    <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="extjs/examples.css" />
	<script type="text/javascript" src="extjs/examples.js"></script>
    
<script type="text/javascript">
//弹出一个传统的对话框
/*
Ext.onReady(
		function() { 
			alert("Hello,小都");
		}
);
*/

//利用examples.js,达到一种从上到下的淡入淡出的感觉
Ext.onReady(function(){
	// 显示文本和图标，并且在点击的时候会显示相同的信息。
	//Action是一个可复用的功能，它被从具体的类中抽象出来以便可以在多个组件之间进行复用
	//主要有 Ext.Toolbar, Ext.Button 和 Ext.menu.Menu 组件)。 

	var action = new Ext.Action({
	    text: 'Do something',
	    handler: function(){
	        Ext.example.msg('Click', 'You did something.');
	    },
	    iconCls: 'do-something'
	});

	var panel = new Ext.Panel({
	    title: 'Actions',
	    width:500,
	    height:300,
	    tbar: [
	        // 向一个toolbar中直接添加一个action，作为一个菜单按钮
	        action, {
	            text: 'Action Menu',
	            // 向菜单中添加一个action，作为文本项
	            menu: [action]
	        }
	    ],
	    items: [
	        // 向panel主体区域中添加一个action，作为一个标准的按钮
	        new Ext.Button(action)
	    ],
	    renderTo: Ext.getBody()
	});
		
});


</script>
</head>
  
<body>
    This is my JSP page. <br>
</body>
</html>