具体描述：

      表格第一列（其它列也行）为类型选择列，采用ComboBox为编辑器，当选择某一类型（如：类型1）时表格当前行的某些列（如：第2列~第4列）就变为不可编辑状态，并显示不同的样式（类似于button的disable）。

       当选择其它类型（如：类型2）时表格当前行的不可编辑单元格又变成可编辑的。

document.write('<authz:authorize ifAnyGranted="ROLE_HRCHANGE_S"> ');

    document.write('<li><a id="a1" href="#" title="我的工作">我的工作</a></li>');

document.write('</authz:authorize>');

</script>

JSP页面中的页面元素,URL,按钮是否可见或变灰都可通过Acegi标签库来实现，使用Acegi标签库，可设置不同的权限ID允许点击的按钮,访问的URL,或隐藏无权限的功能菜单。

如何配置和使用标签库？

打开acegi-security-<chsdate w:st="on" isrocdate="False" islunardate="False" day="30" month="12" year="1899">1.0.3</chsdate>.jar,在META-INF目录中有一个authz.tld文件，将此文件复制到你的web应用的WEB-INF"tld中，然后配置web.xml,增加:

<taglib>

<taglib-uri>http://acegisecurity.sf.net/authz</taglib-uri>

<taglib-location>/WEB-INF/tld/authz.tld</taglib-location>

</taglib>

然后JSP页面可以通过声明<%@ taglib uri="http://acegisecurity.sf.net/authz" prefix="authz"%>来引用标签库。

声明了标签以后，在页面中可以按下面的格式使用acegi标签(authz标签可以嵌套使用)：

<!--使用权限标签的例子,标签可以嵌套 -->

<authz:authorize ifAnyGranted="AUTH_USER">

<td> 一般用户权限

</td>

<authz:authorize ifAnyGranted="AUTH_ADMIN">

<td> 超级用户权限

</td>

</authz:authorize>

</authz:authorize>

<authz:authorize ifAnyGranted="AUTH_SYS">

<td> 系统维护权限

</td>

</authz:authorize>

也可以在JavaScript中用document.write输出权限标签：

<script language="JavaScript" type="text/javascript">

//订单中心

document.write('<authz:authorize ifAnyGranted="AUTH_TAG_ORDER_CENTER"> ');

new tree(TREE_ITEMS1, TREE_TPL);

document.write('</authz:authorize>');

</script>

在有javaScript脚本中有时不方便引用acegi标签，可以从SecurityContextHolder中获得权限集合，然后判断当前登录的用户，其权限集合中是否有某权限，根据判断结果来决定显示或隐藏哪些页面元素，见下面的JSP:

<%@ page contentType="text/html; charset=GBK"%>

<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>

<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>

<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>

<%@ taglib uri="http://acegisecurity.sf.net/authz" prefix="authz"%>

<%@ page import="org.acegisecurity.Authentication" %>

<%@ page import="org.acegisecurity.context.SecurityContext" %>

<%@ page import="org.acegisecurity.context.SecurityContextHolder" %>

<%@ page import="org.acegisecurity.userdetails.UserDetails" %>

<%@ page import="org.acegisecurity.ui.AccessDeniedHandlerImpl" %>

<%@ page import="org.springframework.aop.framework.ProxyFactoryBean"%>

<%@ page import="org.springframework.context.ApplicationContext"%>

<%@ page import="org.springframework.context.support.ClassPathXmlApplicationContext"%>

<%@ page import="org.acegisecurity.GrantedAuthority"%>

<%@ page import="com.mysoft.common.ValidateAcegiAuth"%>

<%

SecurityContext ctx = SecurityContextHolder.getContext();

%>

。。。

<script language="JavaScript" type="text/javascript">

//下面是调用自定义的类ValidateAcegiAuth，输入当前登录用户的SecurityContext，及权限码，如果有AUTH_FUN_TICKET_CHKERR权限，则执行相应的JS脚本。

<%if(ValidateAcegiAuth.validate(ctx,"AUTH_FUN_TICKET_CHKERR")){%>

//具有AUTH_FUN_TICKET_CHKERR 权限，执行相应js脚本…

<%}%>

</script>

下面是ValidateAcegiAuth类的代码：

package com.mysoft.common;

import org.acegisecurity.Authentication;

import org.acegisecurity.context.SecurityContext;

import org.acegisecurity.context.SecurityContextHolder;

import org.acegisecurity.userdetails.UserDetails;

import org.acegisecurity.ui.AccessDeniedHandlerImpl;

import org.springframework.aop.framework.ProxyFactoryBean;

import org.springframework.context.ApplicationContext;

import org.springframework.context.support.ClassPathXmlApplicationContext;

import org.acegisecurity.GrantedAuthority;

/**

* 验证权限集合中是否有某一权限

* @author bzwang

*

*

*/

public class ValidateAcegiAuth

{

/**

*验证权限集合中是否有某一权限

* @param ctxLoginUser SecurityContext

* @param sAuthID 权限ID

* @return boolean 是否有指定的权限

*/

public static boolean validate(SecurityContext ctxLoginUser,String sAuthID)

{

boolean bool = false;

Authentication authLoginUser = null;

GrantedAuthority[] arrayAuthorities = null;

if(ctxLoginUser!=null)

{

authLoginUser = ctxLoginUser.getAuthentication();

if(authLoginUser!=null)

{

arrayAuthorities = authLoginUser.getAuthorities();

for(int i=0;i<arrayAuthorities.length;i++)

{

if(arrayAuthorities[i].toString().equals(sAuthID))

{

bool = true;

break;

}

}

}

else

{

bool = false;

}

}

else

{

bool = false;

}

return bool;

}

}

(2)IE8 浏览器中,对于EXTJS TABPANEL在IE8中TAB标签选中时,标签底部没有效果显示
原因:文本模式为杂项,EXTJS无法判断IE浏览器版本,也就无法在<a>标签中正确加载CSS代码:
.ext-ie .x-tab-strip .x-tab-right{position:"relative"}
<a class="x-tab-right" id="ext-gen37" href="#">
...
</a>

HTML元素的标准事件是指mouseover、mousedown、click、 blur、focus、change等。在ExtJS中，这些事件的处理如下：

• 注册一个事件处理函数使用： Ext.get('myElement').on('click', myHandler, myScope) myElement是要注册的元素的ID，click是事件的名称（注意，和HTML元素中的声明onXXX不同，这里不需要on），myHandler 是处理函数的函数名称，myScope是一个可选的参数，指定处理函数绑定的对象，也就是处理函数的作用域，如果不提供这个参数，则是默认的 window。
• 撤销一个事件处理函数： Ext.get('myElement').un('click', myHandler, myScope) 参数的意义同上。

ExtJS 会根据不同的浏览器进行相应的处理，支持多浏览器。事件处理函数的参数只能参考ExtJS的文档了，必要时还得参考源代码。

2. 处理自定义事件

在ExtJS中使用自定义事件，需要从Ext.util.Observable继承，示例代码如下：

Employee = function(name){
this.name = name;
this.addEvents({
"fired" : true,
"quit" : true
});
}
Ext.extend(Employee, Ext.util.Observable, { ... });

在这段代码中，定义了一个Employee类，定义了fired和quit两个事件。如何触发这两个事件呢，基类 Ext.util.Observable提供了触发自定义事件的方法fireEvent(eventName, arg1, arg2, ... argn), eventName是要触发的时间的名称（不区分大小写），后面的参数arg1，arg2等是要传给事件处理函数的参数。用上面的Employee类做示例，触发quit事件：

this.fireEvent('quit', this);

这行代码将触发quit事件，并将Empolyee类的实例传给quit事件的处理函数，quit事件的订阅可以采用如下代码：

function myHandler1(empolyee){ ... }
function myHandler2(empolyee){ ... }
var emp = new Empolyee('tom');
emp.on('quit', myHandler1);
emp.on('quit', myHandler2);

在上面的代码中，为quit事件注册了两个处理函数（myHandler1与myHandler），当quit事件被激发时，将会依次调用 myHandler1和myHandler2两个函数。

值得注意的是，不管是HTML元素的标准事件还是自定义事件，如果为某个时间注册了多个处理函数，如前面的例子，如果myHandler1返回 false的话，则会取消在myHandler1之后注册的处理函数的执行，即该事件被取消，从而停止继续执行该事件的处理函数，而这个返回值false 会作为事件激发的结果，返回给empolyee，即：

var result = this.fireEvent('quit', this);
if (result === false) {
alert('event canceled'); //这里表示事件被某个处理函数取消
}
else {
alert('event complete'); // 这里表示事件执行完毕
}

通过Ext的自定义事件的机制，可以实现一对多的观察者模式，也可以实现一对一的绑定模式，这一点，在ExtJS的开发中是很重要的。

}) }); panel.render(document.body);

DataView 用store提供的数据流，采用tpl的格式显示，itemSelector的值为数据流中块的CSS类选择器，对块操作时更换其CSS类样式,如鼠标悬停在块上和块被选定时的CSS类样式;简单点说,就是有利于对数据流中的块好控制操作.

tpl定义的块：<div id="zack_hat.jpg" class="thumb-wrap">
鼠标悬停时的块（overClass）：<div id="zack_hat.jpg" class="thumb-wrap x-view-over">
点击被选中的块（selectedClass）：<div id="kids_hug2.jpg" class="thumb-wrap x-view-selected">

1.当鼠标点击数据流中某一块时，块增加selectedClass定义的类样式，如没定义类名,即采用默认的类名'x-view-selected'（CSS内容依然为空,仍需手写,只是类名必须为此）；
2.用overClass定义的CSS类样式，鼠标悬停在块(div)上，更换其CSS类样式.
3.dataView.store.filter(f1,f2):从store中查找f1字段,与f2匹配(不完全匹配相同)过滤,重新本地加载数据.
4.dataView.store.store(f1,'asc'/'desc'):store的内容按f1的值排序.
5.dataView.store.clearFilter():清除过滤状态.还原初始.
6.dataView.select(n):更换第n个块的CSS类样式.

(二)html:

<html>
<head>
</head>
<body id="ext-gen6" class=" ext-gecko ext-gecko3">
-->
<h1>DataView Example</h1>
<p>
</p>
<div id="images-view" class="x-panel" style="width: 535px;">
<div class="x-panel-tl">
</div>
<div id="ext-gen8" class="x-panel-bwrap">
<div class="x-panel-ml">
<div class="x-panel-mr">
<div class="x-panel-mc">
<div id="ext-gen9" class="x-panel-body" style="width: 523px; height: auto;">
<div id="ext-comp-1001" style="height: auto;">
<div id="kids_hug2.jpg" class="thumb-wrap x-view-selected ">
<div class="thumb">
<img title="kids_hug2.jpg" src="images/thumbs/kids_hug2.jpg"/>
</div>
<span class="x-editable"/>
</div>
<div id="zack_hat.jpg" class="thumb-wrap ">
</div>
<div id="zack.jpg" class="thumb-wrap ">
</div>
<div id="zack_sink.jpg" class="thumb-wrap ">
</div>
<div id="sara_pink.jpg" class="thumb-wrap">
</div>
<div id="dance_fever.jpg" class="thumb-wrap ">
<div class="thumb">
<img title="dance_fever.jpg" src="images/thumbs/dance_fever.jpg"/>
</div>
<span class="x-editable"/>
</div>
<div id="gangster_zack.jpg" class="thumb-wrap ">
</div>
<div id="zacks_grill.jpg" class="thumb-wrap">
</div>
<div id="kids_hug.jpg" class="thumb-wrap ">
</div>
<div id="zack_dress.jpg" class="thumb-wrap ">
</div>
<div id="sara_pumpkin.jpg" class="thumb-wrap">
</div>
<div id="sara_smile.jpg" class="thumb-wrap ">
</div>
<div id="up_to_something.jpg" class="thumb-wrap ">
</div>
<div class="x-clear"/>
</div>
</div>
</div>
</div>
</div>
<div class="x-panel-bl x-panel-nofooter">
</div>
</div>
</div>
</body>
<div id="_firebugConsole" style="display: none;" FirebugVersion="1.4.2"/>
</html>

(三)css
#images-view .x-panel-body {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-x-system-font:none;
background:white none repeat scroll 0 0;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
#images-view .thumb {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#DDDDDD none repeat scroll 0 0;
padding:3px;
}
#images-view .thumb img {
height:60px;
width:80px;
}
#images-view .thumb-wrap {
float:left;
margin:4px 0 4px 4px;
padding:5px;
}
#images-view .thumb-wrap span {
display:block;
overflow:hidden;
text-align:center;
}
#images-view .x-view-over {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#EFEFEF url(../../resources/images/default/grid/row-over.gif) repeat-x scroll left top;
border:1px solid #DDDDDD;
padding:4px;
}
#images-view .x-view-selected {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#EFF5FB url(images/selected.gif) no-repeat scroll right bottom;
border:1px solid #99BBE8;
padding:4px;
}
#images-view .x-view-selected .thumb {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
}
#images-view .loading-indicator {
background-image:url(../../resources/images/default/grid/loading.gif);
background-position:left center;
background-repeat:no-repeat;
font-size:11px;
margin:10px;
padding-left:20px;
}
 

.menubar {
 border-bottom: 1px solid #AACCF6;
 color: #222222;
 cursor: pointer;
 display: block;
 height: 20px;
 width: 50px;
 line-height: 17px;
 outline-color: -moz-use-text-color;
 outline-style: none;
 outline-width: 0;
 padding: 3px;
 text-align: center;
 text-decoration: none;
 white-space: nowrap;
}

.menubar:hover {     //鼠标悬停上时触发
 background: #EBF3FD url(../item-over.gif) repeat-x scroll left bottom;
 text-decoration: none;
}

var myNewRecord = new TopicRecord({
    topic_title: 'Do my job please',
    username: 'noobie',
    topic_replies: 1,
    post_time: new Date(),
    user2: 'Animal',
    post_text: 'No way dude!'
});
myStore.add(myNewRecord);

匹配中文字符的正则表达式： [\u4e00-\u9fa5]
评注：匹配中文还真是个头疼的事，有了这个表达式就好办了

匹配双字节字符(包括汉字在内)：[^\x00-\xff]
评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

匹配空白行的正则表达式：\n\s*\r
评注：可以用来删除空白行

匹配HTML标记的正则表达式：<(\S*?)[^>]*>.*?</\1>|<.*? />
评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力

匹配首尾空白字符的正则表达式：^\s*|\s*$
评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式

匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
评注：表单验证时很实用

匹配网址URL的正则表达式：[a-zA-z]+://[^\s]*
评注：网上流传的版本功能很有限，上面这个基本可以满足需求

匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
评注：表单验证时很实用

匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}
评注：匹配形式如 0511-4405222 或 021-87888822

匹配腾讯QQ号：[1-9][0-9]{4,}
评注：腾讯QQ号从10000开始

匹配中国邮政编码：[1-9]\d{5}(?!\d)
评注：中国邮政编码为6位数字

匹配身份证：\d{15}|\d{18}
评注：中国的身份证为15位或18位

匹配ip地址：\d+\.\d+\.\d+\.\d+
评注：提取ip地址时有用

匹配特定数字：
^[1-9]\d*$　 　 //匹配正整数
^-[1-9]\d*$ 　 //匹配负整数
^-?[1-9]\d*$　　 //匹配整数
^[1-9]\d*|0$　 //匹配非负整数（正整数 + 0）
^-[1-9]\d*|0$　　 //匹配非正整数（负整数 + 0）
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$　　 //匹配正浮点数
^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$　 //匹配负浮点数
^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$　 //匹配浮点数
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$　　 //匹配非负浮点数（正浮点数 + 0）
^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$　　//匹配非正浮点数（负浮点数 + 0）
评注：处理大量数据时有用，具体应用时注意修正

匹配特定字符串：
^[A-Za-z]+$　　//匹配由26个英文字母组成的字符串
^[A-Z]+$　　//匹配由26个英文字母的大写组成的字符串
^[a-z]+$　　//匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$　　//匹配由数字和26个英文字母组成的字符串
^\w+$　　//匹配由数字、26个英文字母或者下划线组成的字符串
评注：最基本也是最常用的一些表达式